Web (General): How to add a Favicon to your website?

Home | Faq | Site map | Contact

Email sales@ or Call 1-248-686-1424

Web Development

Share |

Web (General): How to add a Favicon to your website?

Author: Anurup Gaurav

What:
A favicon is an icon associated with a particular website. You typically see it displayed in a browser's address bar near the URL, next to the page's name / title on a browser tab or in the bookmark menu, and while dragging and dropping a link anywhere in the user interface.

A favicon is otherwise known as a website icon, shortcut icon, url icon, or bookmark icon.

Benefits:
Branding: A good way to personalize or brand your site.
Professional-looking: Gives it kind of a finished and professional feel.
Usability: Makes it easier for the user to find your site in a list of bookmarks or from amongst multiple browser tabs.

How to:

Create a 16x16 or 32x32 icon (favicon.ico). You can also generate one (including animated ones) using free services such as the following:
- DynamicDrive FavIcon Generator
- FavIcon from Pics
Upload the favicon.ico file to the folder on your web site where you have the web page.
- Verify it is there by typing http://{your site name}/favicon.ico in the browser's location bar.
Insert the following markup in the <head></head> section of your page(s):
- <link rel="shortcut icon" href="favicon.ico" /> and/or
- <link rel="icon" type="image/x-icon" href="favicon.ico" />
Done! Simple, ain't it?

Notes:

Most of the information presented here is best-practice since there is no de-facto way of adding a favicon.
The W3C Favicon Document has more on the current, preferred way (XHTML, using a rel attribute value defined in a profile) of adding a favicon to your site and some of its limitations.
Firefox displays favicons instantly. Latest versions of Internet Explorer support it too, but you might sometimes need to bang your head at least twice against a hard object before it begins displaying the icon :) (You'll find more on what to do if IE doesn't display your favicon immediately in some of the documents linked to by this tip.)
Favicon Primer has a summing-up of all things favicon including links to resources, supported file formats, image sizes, etc.
New Google Favicon is an interesting read about Google's recent favicon change.

Related Tags:
Web Development