When you browse the web, you may notice that in your tabs next to the site names are small graphical icons. These so-called favicons add a professional finish to a website, and help visitors keep track of sites visually. Although you might think it would be difficult, it’s actually quite simple to add a favicon.ico file, helping to complete the visual look of your site.
The favicon.ico standard was created by Microsoft and rolled out with Internet Explorer 5.0 as a way to keep track of bookmarks. Originally the favicon.ico file had to reside in the root directory of a server, but HTML now has a standard which allows the icon file to reside anywhere. With the advent of tabbed browsing favicons became even more useful to users – with many tabs open it can quickly become difficult to remember what site is open in each, and favicons give an immediate visual reference to help navigate a busy browser.
Creating a favicon is relatively easy, although the limitations of Internet Explorer make it somewhat more difficult to create an icon that is compatible with that browser. First you’ll need to create an image to represent your site, and you’ll have only a 16 pixel by 16 pixel square to do so in. While it may be tempting to take a larger image and shrink it down, you will generally find that any image shrunk to such a small size becomes entirely unrecognizable. Instead, try to create a very simple and iconic symbol, such as a single letter on a color field, or a very basic symbol. For some examples, you may want to look at popular sites, such as Amazon, Google, CNN, or Apple.
You can use virtually any image creation software to make a favicon.ico file, so long as it can export images as a bitmap. In Photoshop, for example, you can create a 16 pixel square file as a bitmap, draw your icon, save it, and then change the name to favicon.ico. You can also download a .ico plugin for Photoshop which will allow you to export your file directly as a .ico file. Technically, a favicon can be nearly any file format, including a JPEG, a GIF, or a PNG. Unfortunately, while many popular browsers, such as Firefox, Safari, and Opera can read all of these formats, Internet Explorer will only recognize the .ico format, effectively reducing your options to that format only.
If you have an existing file that you want to make into a favicon.ico file without exporting it as a bitmap, there are a number of tools to help you. DynamicDrive’s online favicon generator, for example, will take any image file under 150k and convert it into a 16×16 favicon.ico file. Different tools may allow you to choose the square area you want to be converted into an icon, to stretch the icon to fit, and even to highlight certain lines to make it appear crisper at smaller sizes. Generally, however, even when using an automation tool like this, it’s still a good idea to create the image you want first at a smaller size, such as 64×64 pixels, to ensure it will look good when shrunk even further.
If you don’t have a base image to work from, and want to create an icon from scratch, you can use an online creation tool, such as favicon.cc, to do so. These tools generally give you a 16×16 pixel grid and basic drawing tools to help you create the image you want. You can also view community favicons and use these wholecloth or as jumping off points to create your own icon.
Once you’ve created the image and downloaded it your computer, you’re ready to add it to your site. To do this, simply upload it to a directory in your server – most people use the root directory of their server, so that they can find it by going to http://www.myserver.com/favicon.ico. Once uploaded, simply add the line
to the tags of each page on your site, or to a header template if you’re using dynamic site software like WordPress. Even after being added, it can take a while for your favicon to appear, and in certain browsers, such as Internet Explorer, browser bugs may occasionally make the icon disappear, or even be replaced by another random icon. Don’t worry, though, this is a local bug, and not something other visitors to your site will necessarily be seeing.
Creating a favicon.ico file is fast and easy, and adds value to your site. A good favicon can supplement your existing visual identity and lets visitors know you take your web presence seriously. With so many benefits, and so little cost, it’s a wonder every site doesn’t have their own icon!