What is a favicon?
A favicon (pronounced “fave-icon”) is typically a small, iconic image that represents your website. Favicons are most often found in the address bar of your web browser, but they can also be used in lists of bookmarks in web browsers and feed aggregators. Well-designed favicons are styled to match the logo or theme of your website, that way users have a quick and easy way to recognize your website at a glance.
A Beautiful Site's favicon in the Firefox address bar.
What type of image is a favicon?
Although most modern browsers will recognize PNG, GIF, and JPG formats for favicons, Internet Explorer currently does not. It is recommended to use the Microsoft ICO format, which works in all browsers.
What size should my favicon be?
Another good reason to use the ICO format is because it can contain multiple favicons of different sizes in one ICO file. It is best to have, at minimum, a 16×16 pixel version. I usually include 32×32 and 48×48 versions as well. That way, if users drag the bookmark to their desktop they will see a nicely scaled version of the icon instead of the 16×16 version stretched out. To learn how to create a favicon with multiple sizes, see How to create a favicon below.
16x16, 32x32, and 48x48 versions of A Beautiful Site's favicon. Each image is embedded in one favicon.ico file.
The most common sizes for favicons are:
- 16×16
- 32×32
- 48×48
- 64×64
- 128×128
How to create a favicon
Although there are many ways to create Microsoft ICO files, I’m going to focus on my favorite way to do it. This method involves creating your favicon, saving it as a PNG file, and converting it to ICO format using png2ico.
Step 1 – Creating the Image
Create the image that will become your favicon in your favorite image-editing program. I prefer Adobe Photoshop, but a free, cross-platform, open-source alternative is GIMP.
If you want to use multiple sizes, make sure you create one image for each size.
Step 2 – Saving the Image
Save the image as favicon.png. If you are using multiple sizes, save each one as something recognizable. I prefer using 16.png, 32.png, 48.png, etc. You can save as 8-bit (256 color) or 24-bit (16 million colors) PNG files.
Step 3 – Converting the image to an icon
If you haven’t already, download png2ico. You don’t have to install it, just unzip it and copy it to an easy-to-remember directory (I use c:\png2ico on my Windows system). Once the program resides happily in its new location, copy the PNG file(s) to the png2ico directory.
The next step involves opening a Command Prompt, but don’t worry. It’s a painless procedure.
- From the Start menu, click ‘Run’
- Enter cmd and click ‘OK’
- Navigate to the png2ico directory. In my case, the command was cd \png2ico
- Enter png2ico favicon.ico favicon.png. If you are using multiple images, the command will be something like png2ico favicon.ico 16.png 32.png 48.png…
- Type exit to close the Command Prompt
The favicon.ico file will appear in the png2ico directory.
How to link to your favicon
Now that you’ve created a nice little favicon, you need to tell web browsers and other applications where to find it. Adding this line to the <head> section of your HTML will ensure that your favicon will be found:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
The location of the favicon isn’t really important, as long as the href attribute is accurate. Most favicons, however, are placed in the root directory (the directory that contains the homepage). Keep in mind that it is not necessary to have multiple instances of the same favicon on one website.
If you add a favicon without linking to it within your HTML, you may notice that some browsers will still find and display it. This only occurs if the favicon is in the root directory. It isn’t good to rely on this method, so if you want to make sure that applications will see your favicon, <link> to it!
Great Tut, thanks!
Featured it on our site too.
Best article I’ve found so far, finally! But, where is the alpha-transparency? I swear I’ve seen icons out there that use it.
Multi-resolution favicons with alpha transparency (the favicon holy grail?) can be made using a program called IconWorkshop.
16 and 32 pixels square should suffice for most favicons; anything more will significantly slow page load times for almost no benefit. Just these two lowest resolutions with full color and alpha transparency is already a 5 kb file.
me ajude como vazê-lo…por favor…
Very informative article, yes I have incorporated an icon into my flexijourney.com website. Btw, can I save the image as .ico file directly using GIMP ?
Nice article. So as a result of very good quality. Better than using a web-services
Bravo, facilité déconcertante …
Encore bravo et un grand merci !!!
Thanks for an informative article.