How to make a fav-icon?September 20th 2005, updated on January 30th 2009
This guide explains the term favicon, gives you hints how to make your own favicons, and tells you how to modify your internet pages to display favicon in Internet Explorer, Mozilla Firefox, Opera, and Google Chrome.
This guide is intended for people with basic knowledge about icons and HTML.
Favicon is a small image displayed by an internet browser:
Favicon in the address bar and in a bookmarks panel of a web browser
Favicons are supported by all major web browsers. They are not a mandatory part of a web page. Web browsers will use a default icon if page lacks its own favicon, but a nice favicon gives a website identity and makes it easier to recognize and remember.
|Internet Explorer 9 pushed the limit again and requires larger fav-icons when a site is pinned to the taskbar in Windows 7.|
Favicon is just an ordinary icon with 16x16 pixels images. For best compatibility, there should be an image with 16 colors or 256 colors. Browsers are also able to use the smooth 32bit image with alpha channel. Images with larger sizes are not necessary (unless you want to target users running in high-DPI modes, but the support of that in browsers is very inconsistent) and would only make the icon file larger -> it will take longer to download, so leave them out.
You can create a favicon in any icon editor. Use either RealWorld Icon Editor, or pick up one of the other icon editors (there is a list of icon editors in our directory). If you want to create favicon without installing anything, use an online icon maker. It supports 256 colors with transparency and it can also convert pictures to icons. Once you have the icon, rename it to favicon.ico and upload it on your web server.
To activate your favicon, you must modify the source of your web page. Add this line to the <head> section of your page:
<link rel="shortcut icon" href="/favicon.ico" />
Following example shows complete html of a very simple page with favicon:
<html> <head> <title>Title of my page</title> <link rel="shortcut icon" href="/favicon.ico" /> </head> <body> My page is not empty. See? </body> </html>
Internet Explorer supports favicons since version 5.0. It is actually quite hard to make IE5 or IE6 show the favicon. If the icon is not showing, try one of the following:
Later versions of Internet Explorer improve support for favicons and it is not necessary anymore to add a page to your favorites to see the icon.
These browsers support favicons flawlessly. You do not need to add a page to your bookmarks, the icon is automatically displayed in address bar and eventually in a tab heading. They will accept any file name, not just favicon.ico, hence you may assign different icon to each page on your web.
Firefox allows you to use any pictures as favicons, including .gif animations. Opera can do this as well, but it does not animate the picture. If you want an animated favicon, simply create favicon.gif and use the same html code as above. If you add two lines to yout <head> section, animated favicon will be used by Firefox and the normal one by the other browsers.
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.gif" />
Warning: animation effect may distract users. Adding an animated favicon to your page only to demonstrate that you can do it, is not always the right idea. Some users may be irritated by it.
These are the typical problems and solutions related to favicons. This list is based on comments accumulated during the existence of this page. Please read them carefully before adding a new comment.
con somenone expaine this to me
i am being able to di it
goood is working marius from galati RO
It's not working with Internet Explorer.
how can i add image icon on my HTML?
how can i remove the google image from my browser title?
i didn't get result for adding favicon why?
why do they call it a favicon?
its not showing on google chrome with me tho