An icon in the digital world is a pictogram or ideogram displayed on a computer screen in order to help the user navigate a computer system. The icon itself is a quickly comprehensible symbol of a software tool, function, or a data file, accessible on the system, and is more like a traffic sign than a detailed illustration of the actual entity it represents.
In C++ Builder, every application build (debug or release) has a standard C++ application icon. In professional programming, if you are developing a great application, you should also create and add a custom icon for your application. Icons are really important, may have an important impact to have more users, means more purchase and popularity of your application. An icon for your application may be a brand icon for your commercial things. We highly recommend logo designers for your applications. On the other side, you can create icons by yourself. In this post, we will teach you how you can create an icon easily.
Note that although this article focuses on C++ Software, the instructions can also work for RAD Studio Delphi as well.
In another article also looked at how to icons and splash screens for mobile apps which can be found here: https://learncplusplus.org/how-to-create-app-splash-screens-for-android-and-ios-in-c/
Table of Contents
What is the file type for the Icons?
The *.ICO file format is required to define icons of your applications. The .ICO file format actually contains multiple versions of the same icon. These multiple images are processed by Windows and the most appropriate one for the desktop icon settings or Window and taskbar display is chosen automatically.
What icon sizes are used on Windows?
When you design a icon start with a 256×256 pixel size canvas. That said, you might find that a base size of 2048×2048 or 1024×1024 is easier and more appropriate for some designs. Always remember that it will be reduced to smaller scales and scaled up in order to fulfil the requirements of all Windows versions and desktop or screen resolutions.
Application icons uses 16×16, 32×32, 48×48, and 256×256 (code scales between 32 and 256). For Classic Mode, the full set is 16×16, 24×24, 32×32, 48×48 and 64×64
What are the basic tips to create an icon?
- Your application icon should be unique for your application and as simple as possible.
- Your application icon should be designed a least in 256×256 canvas and 24bits color depth
- Combining some letters on some images can help some users remember what your icon represents (think of the “W” in the Microsoft Word icon).
- You can use flat icons in one color (which is a popular trend at the time of writing) but personally I found them hard to differentiate when there are many icons displayed on something like the taskbar.
- If you have 2D icon use 2 or 3 colors (including shadows) and an alpha color background layer if necessary
- If you design a 3D icon, perspective camera angle is important. Note that 3D objects represents more solid objects.
- Consider the light source of your icon. Generally top left light source is good, which cause shadows to bottom and right of your icons
- Shadows are really important and count them as in 2-3 color limits in design.
- You can use any design application to create a icon, but at the end you will need to convert your image .ico file format so bear that in mind.
- Colors and saturation is really important, consider their visibility in different color backgrounds (dark and light), use 24bit or 32bit color format. You can use gradient colors for more realistic icons.
- Details are important and note that small details should be visible and understandable from any icon size. However, if the details are too fine they might get lost at higher resolutions. Generally consider 32×32, 48×48, 96×96 sizes to check visibility of your details.
- Use 8 pixel width in your pen, and use same as a grid snap. Note that 8 pixel object in 256×256 design is reduced to 1 pixel in 32×32 design size.
- Use the full size of the icon canvas size, this will make your app icon as large as possible.
How can I create a simple program or application icon for free?
Here is a simple example to create a simple icon for your applications
- Open MS Paint or an image editor such as GIMP . Create a new image 256×256 size, be sure you use 24bits or 32bits image format. Paint background in a color which is not used in your icon design (i.e. Green) This will be your alpha layer color. If your icon is fills the whole of the icon’s available drawing rectangle you don’t need an alpha color background.
- Draw your icon as described in basic tips above.
- If you draw in MS Paint, MS paint doesn’t allow to save .ico files, save your image as a bmp. Open this image via GIMP Image manipulation application to save as a ico file.
- If you draw or open your image via GIMP, there is a “Colors” and then “Color to Alpha” menu. Use this to make your background color to alpha.
- In GIMP, there is File menu and use “Export” to save your file as a *.ico file. Select .ICO format and save with pixel format explanation (i.e MyAppIcon250x250.ico).
- Resize the image’s Canvas to 150×150 and save as a .PNG file (i.e. MyAppIcon150x140.png).
- Resize Image Canvas to 44×44 and save as a .PNG file (i.e. MyAppIcon150x140.png).
- Check your Project settings if there are more resolutions please resize your main image to that an save it as given examples above.
How do I assign icons to my C++ or Delphi app?
- In RAD Studio, select Project->Options.. menu and In the Project Options window navigate to Application->Icons sections
- Here you will see your default application icon, Press “Load Icon” button and select your .ico file
3. Load your logo 150×150 and 44x 44 files by using “Load Logo…” buttons
4. At the button of Project Options windows there is “Save” button. Save all your new project settings.
Now if you compile your application, you will see it has your custom icon file.
What other things do I need to know about application icons?
If MS Paint and GIMP aren’t enough for your needs, then you can use more complex commercial applications like Photoshop or CorelDraw to draw icons. You can create 3D icons for your applications by using 3D apps. Blender is one such tool and it is provided free by Google. If you don’t mind paying for a commercial solution you can use apps such AutoCAD, Inventor, SolidWorks, StudioMax, MaxonCinema, and Lightwave all of which be used to create realistic 3D icons. You can even use MS PowerPoint as a drawing tool. It has nice effects on shapes and text. Note that, whatever you use, the final image result should be converted to ico file. If you need more details about creating icons and logos for Windows apps there are some details in Microsoft docs here and here.
C++ Builder is the easiest and fastest C and C++ IDE for building simple or professional applications on the Windows, MacOS, iOS & Android operating systems. It is also easy for beginners to learn with its wide range of samples, tutorials, help files, and LSP support for code. RAD Studio’s C++ Builder version comes with the award-winning VCL framework for high-performance native Windows apps and the powerful FireMonkey (FMX) framework for cross-platform UIs.
There is a free C++ Builder Community Edition for students, beginners, and startups; it can be downloaded from here. For professional developers, there are Professional, Architect, or Enterprise versions of C++ Builder and there is a trial version you can download from here.