All About Favicons

Keith Curreri - Blog Headshot

By Keith Curreri on August 16, 2010

What is a favicon?

A favicon (short for “favorite icon”) refers to the small icon that relates to a specific website. They are used to make the process of identifying a website easy.

Favicons show up next to the tabbed website name in your browser, in your browser’s history bar and favorites list, and also if you create a shortcut on your desktop.

 

(click to enlarge)

 

Why should I have a favicon?

A favicon is not necessary for the functionality of your website, but there are plenty of reasons why your website should still have one.

Reinforcing company branding – Just like companies have logos, websites have favicons. The favicon shows up with your website, so it acts as an extension of the website, which in turn is an extension of your company’s image and creates a level of professionalism for the company.

Portray a professional image – A favicon is a small touch that will add to the professionalism and trustworthiness of your design, website, and brand.

Make your website stand out – There are many websites that do not use favicons. By having one on your site you will stand out, especially when compared side by side with these websites when listed in people’s bookmarks/favorites.

Make life easier for people who are heavy multi-tab users – If a user has many tabs open the website title may not have room to display. The favicon, however, will always be displayed.

Making/installing a favicon

Favicons are super easy to make and install:

  1. Create the original image – Using your favorite image-editing program, create a square image (all four sides must be the same size). The image can be a .gif, .jpg, .png, or a .bmp. Favicons can also be transparent, so if you would like to use this feature be sure so save this file as a transparent .gif or .png.
  2. Convert into a favicon (.ico) – There are many favicon generators online. I like to use http://tools.dynamicdrive.com/favicon/. Browse for the file created in step 1, choose optional sizes for your favicon, and then click “create icon”.
  3. Add favicon to your website – Using an FTP client, add your freshly created .ico file to the root directory of your website. Then add the following line of code anywhere inbetween the <head> and </head> tags of your website. Be sure the “href” path points to the favicon in your root directory.
&amp;lt;link rel="shortcut icon" type="image/x-icon" href="/favicon.ico /&amp;gt;

Testing your favicon

Sometimes your favicon might not show up right away, even when it is installed correctly. If you think you have it installed right and it is not showing up, try clearing your browser cache/history, restart or use a different computer, or try your site in a different browser. I would recommend just waiting and checking your favicon in a few hours and by then your favicon should stay if everything is set up correctly.

An additional note on favicon sizes

A favicon is 16×16 pixels When you make your favicon, you will have the option to include a 32×32 desktop icon. This is used for when users create a desktop shortcut to your website.

Conclusion

Favicons are really easy to make/use and they add a lot of value to your site. They are a simple way to make your site stand out and look more professional!

Leave a Reply

4 Comments on "All About Favicons"

Notify of
avatar
Mitch

Yes, you know you can create a favicon that has people’s personal images in them as well, and those can be freaky sometimes.

Keith

Haha, I don’t know if I have ever seen any of those. I’ve been thinking about making an animated .gif favicon with my face that just keeps winking over and over. You just helped me make up my mind. I’m doing it!!!

Mitch

They sometimes also show up on the bookmarks toolbar if people decide they want to follow you more closely. Course, the ones that scare me are the ones with a face in them. lol

Keith

The ones with a face in them?

wpDiscuz