How to create an Icon with Multiple Sized Images
I occasionally need to create Icons for Windows apps and websites – but not so often that I can always remember how to do it.
The free open-source image manipulating tool Gimp does the job perfectly and the latest version is easy – but it still takes me a few goes fiddling before getting it right.
I always start from one large ‘png’ images created with transparency to allow for any shape.
So I thought it would be helpful to document exactly what to do for future icons:
1. Start Gimp
2. Click Menu -> File -> Open as Layers
select your master ‘png’ file (size >= largest icon size)
b. click ‘Open Button’
3. Click Menu -> Layer -> Scale Layer
Enter largest (next) size of Icon element you want to include (eg 256 by 256)
Click the Scale button
4. Click Menu -> Layer -> Duplicate Layer
Enter Repeat step 3 and this step for next smaller Icon element Sizes
5. Click Menu -> File -> Save As to save your work as a Gimp XCF file
6. Click Menu -> File -> Export As
Edit your filename as required and use ‘.ico’ extension
7. To Include your Icon (Favicon) in an HTML web page:
Add the HTML following code to your HTML header:
<link rel=”icon” type=”image/x-icon” href=”./images/favicon.ico”>
Editing icon name and its’ relative location.