Whenever I make a site, I end up having to make a favicon. Favicons are a nice way to brand a site in the address bar (and tabs). Making favicons for “good” browsers (not IE) is easy since they accept PNG files by declaring a link statement for the image…
<link rel="icon" type="image/png" href="/somepath/image.png" />
However, if you want a favicon that can be picked up by all browsers you’ll want to create an ICO file. I’ve found various online tools that will convert image files to ICO; Favicon.cc was one that I often used. The downside, all the online favicon generators I found gave me a 16×16 ICO file. I wanted an ICO file with multiple sizes so if the user puts the bookmark on their desktop is uses the larger ICO size. So I decided to find a way to easily create a ICO file with multiple embedded sizes (64×64, 48×48, 32×32, 16×16) and I’ve decided to describe how I accomplished this.
These directions are written for Windows, but they can easily be adapted to other operating systems with minor adjustments. First you’ll need to download two tools.
- ImageMagick – This will be needed to automatically create the appropriate image sizes/formats
- png2ico – This, as the title suggests, will be needed to convert PNG images to ICO files
Installation
ImageMagick: If you downloaded one of the installers, this one is easy. Just run the installer and follow the on-screen prompts
png2ico: This doesn’t really need to be installed, but you need to copy png2ico.exe into your System32 folder (C:/Windows/System32) so it can be used from any directory in the command prompt
Implementation
- Open up your System32 (where you copied png2ico.exe) and create a file titled favicon.bat
- Open favicon.bat in a text editor (right click the file and choose Edit)
- Enter the following into favicon.bat and then save the file
convert %1 -resize 64x64^ -gravity center -background transparent -extent 64x64 64.png
convert %1 -resize 48x48^ -gravity center -background transparent -extent 48x48 48.png
convert %1 -resize 32x32^ -gravity center -background transparent -extent 32x32 32.png
convert %1 -resize 16x16^ -gravity center -background transparent -extent 16x16 16.png
png2ico favicon.ico 64.png 48.png 32.png 16.png
del 64.png
del 48.png
del 32.png
del 16.png - Open the command prompt (Go to Start > Run, type cmd and hit enter)
- Navigate to the folder with your image (cd foldername) and now type favicon filename.png (replace filename.png with the filename of your image) and hit enter
Now, with that little bit of setup, you can create favicons in seconds. I added a few keys to my registry to make it even easier, but I’ll save that for another time. Also, I will cover story about conversions and why it’s import to use business voip and track leads coming in.
