Quick Tip: Adding a Favicon To Your Website

by Nathan Rohler

What's a Favicon?

A favicon is the little icon that browsers display next to a page's title on a browser tab, or in the address bar next to its URL. It also is used when you bookmark a page. Here are some examples:

Here's an example of the bookmarks menu:

But it doesn't stop there. Some web services and search engines (such as DuckDuckGo) even use the favicon:

Does Your Site Have a Favicon?

As you can see, the favicon is pretty important. It's critical for site recognition in a browser full of tabs, it's a great opportunity to expand your site's branding, and your site will simply look incomplete without one.

Unfortunately, many designers and developers don't realize how easy it is to add a favicon. They don't specify any, or they leave the generic one their webhost provides. How's that for branding – you end up with the same favicon as thousands of other sites!

Favicons add that extra polish that visitors (and clients) appreciate.

The Technical Details

The Size

Images for favicons should be 16x16 pixels. You can either resize an existing photo, or create a tiny image specifically for use as a favicon. When resizing a larger photo to be this small, you'll often lose important details or end up with a fuzzy image. To avoid this, you'll likely want to do some touch-up work after downsizing the larger photo. Or, just start with a 16x16 canvas to avoid resizing issues altogether.

What To Show

Because you only have 256 pixels to work with, it can be a little challenging to know what to include in a favicon. Here are some common ideas:

• Use your logo (or part of it)
• If your logo doesn't display well at such a small size, use a stylized version of the first letter (or letters) of your site or business name
• Use an icon that communicates what your site does or represents (for example, Google Analytics uses a tiny chart for their favicon)

The Image Format

As the name suggests, favicons must use the icon (.ico) file format. In the past, it was a hassle to convert into this format. However, thanks to easy, free services, this is no longer the case. All you need to do is create a 16x16 image. The .ico format supports transparency, so you're not limited to creating a square icon. If you want to take advantage of transparency, use the .gif or .png format when creating your image.

Once you have your 16x16 image, go use a free service like favicon.cc to convert your image. Use the Import Image option to upload your original image:

You'll get to see a preview of your new icon. You can then download the converted icon:

Save the file within your site (more on the location next).

Where It Goes

Originally, favicons had to be named exactly favicon.ico and placed at the root of your domain (e.g. http://www.yourdomain.com/favicon.ico). This meant that you could only have one favicon per domain, period. However, as favicons have become standardized, more flexibility has been added. There are now two approaches:

One Favicon For Entire Domain

If you only want one favicon for your entire domain, simply save the favicon.ico file to the root folder of your site. When uploaded, it must be accessible from http://www.yourdomain.com/favicon.ico . As soon as you upload the file, your browser should start displaying the icon for all pages on your site. If not, clear your browser cache and reload the page.

Page-Specific Favicons

If you want more control (and to be a little more standards-compliant), you can specify favicons on a page-by-page basis. To use this approach, save the .ico file anywhere within your site, such as an images/ folder. Then add the following code to your page:

<link rel="shortcut icon" href="/images/specialicon.ico" type="image/x-icon" />

Update the highlighted path to reference your new icon file. Note that we use a site-relative path (starting with a slash) so that it will be a valid link regardless of the current page's path.

When using this approach, you'll still want to upload a fallback icon to http://www.yourdomain.com/favicon.ico for situations where someone is browsing or bookmarking non-HTML content (such as a PDF).

Let's Review: How To Do It, The Easy Way

1. Create a 16x16 image. If you want transparency, use the PNG or GIF format.
2. Convert your image to .ico format using a free service such as favicon.cc.
3. Upload the new icon to http://www.yourdomain.com/favicon.ico . For finer control, use the code above to specify favicons on a page-by-page basis.

Conclusion

Adding a favicon is so easy, there's no excuse not to. Favicons are important for site recognition and branding, and should always be added to your sites. You can even have fun with them – for example, you could add a sprig of holly for the winter holidays.

I hope this guide has removed the mystery behind those little icons, and empowered you to add them to your sites!

Have any thoughts or comments? Have you seen a humorous or creative icon while browsing the web? Please share in the comments!

Thanks to Diane D. for suggesting this article – she received a $15 Amazon gift certificate as a prize.