Favicons and How To Make Them

There are a wide assortment of improvements you can make to a website — some more related to content, such as adding an RSS feed, and others more related to the styling of the site, such as adding foreground and background images, improving the typography, and adding a favicon. In this article, I will take a closer look at what favicons are and how you can create and use your own.

You may not be familiar with the term "favicon", but if you have spent any time using the Internet, you are probably familiar with what they look like. The term is a contraction of "favorite icon", which is derived from its usage: A favicon is a small image — like a tiny logo for a website — that gets added to your Web browser's bookmarks when you designate the particular site as a favorite. Favicons are small square images, usually 16 by 16 pixels, but can also be 32 by 32. The Wikipedia entry has additional information on favicons.

That website, as is to be expected of Wikipedia, also has a nice favicon of its own, which can serve as an example. When you visit the Wikipedia home page, you may or may not immediately see a small image of a "W" in your browser's address field and on the current tab in your browser, depending upon which brand and version of browser you are currently using.

If you are using any version of Mozilla Firefox, then you will certainly see the Wikipedia favicon in your address bar, just to the left of the Wikipedia URL.

This should be the standard behavior among all browsers. If you are still using an older version of Internet Explorer, then you will probably see different behavior, since Microsoft generally does not follow industry standards, preferring instead to try to break them by creating its own. If you are using IE version 8, for example, you will see the same behavior as with Firefox. But if you are using IE version 6, then when you first land on the Wikipedia home page, and that site has not been added to your IE Favorites menu, you will not see the favicon.

If you designate Wikipedia as a favorite site (always a good idea, since Wikipedia is a terrific storehouse of information), then you will see the favicon in your address bar, similar to what is displayed in Firefox.

In addition to being displayed in the address bar, the favicon appears in the Firefox Bookmarks menu and in the Internet Explorer Favorites menu, just to the left of the website's name.

Making Your Own

While you may be hesitant about trying to create your own favicon, there are a number of online tools to make it fairly straightforward. There are basically two different methods you can use for creating a favicon: You can create it by hand, or by taking an existing image and converting it to a favicon. I will examine tools that can help you in either case.

Any substantial image editor will allow you to create a 16x16 or 32x32 image, and save it in the icon format (with the file extension ".ico"). However, you don't have to purchase Photoshop or any other high-powered application to get the job done. There are alternative applications available that are dedicated to creating icons, of all varieties. Icon Craft and IconForge are just two examples of commercial icon editors that possess all of the capabilities needed to create icons for your sites. However, they are not free, nor are they open source (in case you are a programmer interested in exploring their source code).

If your budget does not allow a paid program, consider one of the free programs out there. For instance, Icon Sushi no longer has a dedicated website, but can still be obtained from several reputable shareware/freeware sites, including CNET Download.com. My current favorite is SnIco Edit, available from any number of sites, including Utilidades-Utiles.com. It too used to have a website, but apparently SnideSoft is no longer in business (a sign of the times?).

Using an image editing tool to create your favicon has the advantage that you will have pixel-perfect control over the way it looks. But the downside is that making any image by hand can become incredibly time-consuming and frustrating. Moreover, if the image in your intended favicon is fairly complex — and not just a couple letters or boxes with sharp vertical and horizontal lines — then the final results will probably look suboptimal, unless you want to spend even more time manually adding the dithering and other effects called for when trying to make that complex image look as realistic as possible, using so few pixels. Lastly, favicon desktop programs are now out of favor, and consequently the software vendors that used to develop them all seem to be disappearing.

These are some of the reasons why most Web designers and developers now use favicon generators, which take a larger image and shrink it down to 16x16 or 32x32. Some of these tools even allow you to specify scrolling text, if for some perverse reason you would like to subject your website visitors to a flashback of the cheesy site decoration that littered the Web during the 1990s.

There are countless favicon generators available, but here is a sampling: ConvertIcon is a free and simple service that allows you to upload a GIF, JPEG, ICO, or PNG image, and then convert it into an ICO or PNG image, without losing quality. FavIcon from Pics has come through for me time and time again. Other well-regarded services are offered by companies such as Dynamic Drive, Favicon Generator.com, graphicsguru, and Salvatore Sanfilippo.

Finally, if you don't want to spend any time making your own favicon, and a standard computer-related icon would be sufficient for your needs, then be sure to check out famfamfam.com's Silk Icons, a library of icons licensed under the Creative Commons Attribution 2.5 license (which means that you can use any of the icons for any purpose, and even modify them, as long as you link back to famfamfam.com, so they get credit).

Adding Your Own

Once you have created a favicon for your site, you will want to add it to your home page. Upload the favicon file to the root directory of your website. This is typically done using an FTP application, such as FileZilla. Alternatively, your Web hosting account probably includes some sort of file management tool, which would be a more efficient approach if you plan on only uploading the single file. But if you're actively managing a website for which you create the files, you probably are already using an FTP client.

Next you will need to update the HTML code in order to display the favicon. Let's assume that you have named the file favicon.ico (the standard name used by most sites). Open up your home page HTML file (it might be named index.html or default.html, or something similar) using your favorite text editor. Find the head element in the code; that consists of the opening tag, the closing tag, and everything in between. Insert the following line of code into the head element:

<link rel="shortcut icon" href="https://www.ross.ws/_writing/articles/Favicons%20and%20How%20To%20Make%20Them/favicon.ico">

In this case, the Web server will look for the favicon file in the directory containing your home page HTML file. But if you would like to use the same favicon for all of the pages in your site (a recommended approach), and some of those files are located in subdirectories off the root directory, then you will need to take into account the fact that your favicon file is not located in the current directory for those nested HTML files. The quickest way to resolve this issue is to provide an "absolute path" to your favicon file. Let's say that your website domain name is example.com. You would use the following line of code instead:

<link rel="shortcut icon" href="http://www.example.com/favicon.ico">

Favorite Favicons

If you're having difficulties coming up with ideas for your site's favicon, consider using your site's logo as a starting point. If the logo is relatively square in dimensions, and not too detailed, then it probably will look fine shrunk down to the favicon size. Otherwise, you can take a distinctive portion of the logo, cropped as a square, and shrink that down. Or, you could take the initials of your company's or organization's name, and create a large image with those initials, using your brand colors.

If none of those ideas suit your purposes, then perhaps you could derive some inspiration from outstanding favicons created by others. Daniel Burka's list is a good place to start.

Regardless of how you create your favicon, you will most likely find that it can add a bit more visual appeal to your site. Lastly, do not feel limited to just a single favicon. Every page on your site can have its own; simply specify each individual favicon filename in the link tag.