By Jeremy Lindblom
On June 18th, 2008
Favicons started as a helpful icon identifier for websites back when you’d peruse your bookmarks and track down your favorites. Nowadays, they serve a much more useful purpose: they help brand your site both in browser tabs and in the address bar. Further, if you make use of Firefox’s Bookmarks Toolbar folder like I do, (called the “Links” folder on IE; it usually appears beneath the address bar) you can reduce each of the bookmarks to display just the favicon, allowing you to cram a bunch up there.
Favicon is short for “favorites icon”. A favicon is essentially a resource file in the Windows icon (.ico) format that is associated with a website. Even though the ICO filetype is Windows-based, Linux and Mac systems can still edit and serve them. Favicons are displayed by your browser as a 16×16 pixel image, but should be rendered as a 32×32 image that is then scaled down, as ICOs are scalable to 32×32 in some cases.
[It should be noted that 16x16 is an incredibly small canvas to work with. Chances are, you're going to need to abandon whatever supercool idea you have for a favicon—you're not going to be able to have a mythical dragon slaying a knight guided by a fairie. You might be able to get the dragon's eye. I'm just sayin'.—Ed]
The Windows icon format allows you to embed multiple files into one, so your favicon file should contain both sizes. Fortunately, there are great tools available to create these favicons, and they don’t cost a thing. Take a look at exactly how to make your favicon and links to the necessary tools after the jump.
Favicons are included into a website with the following HTML code:
<link rel="shortcut icon" href="http://www.your-website.com/favicon.ico" type="image/x-icon">
<link rel="icon" href="http://www.your-website/favicon.ico" type="image/x-icon">
(Though some servers will serve them if the ico file exists in the document root even without this code.) Both of these lines are necessary in order to ensure cross-browser compatibility. One other thing: Favicons must always be named favicon.ico. Any other name will not work.
Creating a favicon is not very hard:
- Create your icon with your image editor of choice. Create it as a PNG image with a size of 32×32 pixels and with as few colors as possible. You should shoot for less than 16 colors so you can keep the filesize negligible. If you are looking for a good image editor, try GIMP. It is a free, open source image and photo editing program that rivals Adobe Photoshop in power and functionality.Remember that most larger images will not scale down nicely to 32×32 or 16×16 pixels. Trying to scale a 200×200 pixel JPEG image down to your icon size may not look very nice. If you have a vector version or your image, try using that. It might be necessary to recreate your image at the smaller scale to make it look correct. Keep your icons simple and be aware of how you are using transparency. Alternately, there are also some good online utilities for drawing favicons (These websites will take care of steps 1-3 in one swoop).
- Save a 32×32 pixel version of your icon and a 16×16 pixel version.
- Next, use a utility to convert your PNG file(s) to the actual favicon.ico. There are several options available, and I will briefly discuss a few below.
- Use an online tool for the conversion through HTML-Kit, Genfavicon, ConvertIcon, or GraphicsGuru. It simply requires you to upload your icon file through their interface. They then provide you a download of your favicon.ico in a ZIP archive.
- Windows users can download a command line tool called png2ico by Matthias Benkmann. Unzip this to any directory. Copy your 16×16 and 32×32 PNG files to that same directory. Open up the command line and change directory to the directory containing the program and image files. Now suppose the names of your image files are favico32.png and favico16.png. Type
png2ico favicon.ico favico32.png favico16.png. Your favicon.ico will appear in that same directory. You can limit the favicon to 16 colors (if you haven’t done this previously by typing
png2ico favicon.ico --colors 16 favico32.png favico16.png.
- If you already own Adobe Photoshop, there is a free plugin available through Telegraphics that can be used to create icons.
- If you need more help, there are many other tutorials I’ve seen for Windows, Mac, or Linux.
- Once you have your favicon.ico, you have to upload this file to your website. Typically, it is put in the root directly. If you are using some sort of templating software, that software may require the favicon to be placed in the template directory. ( This is the case with Magento.)
- Insert the HTML code as mentioned above into the <head></head> section of your web pages.
- Use your browser to navigate to your website to view the fruits of your labor. At this point, you may realize that 16×16 is a VERY small canvas to If it does not show up, try clearing your browser’s cache and refreshing the page. If it still doesn’t work, that means you did something wrong… try again.