How to make a favicon
How to make a favicon
RealWorld Graphics logo    Česky 
Not logged in.  
IndexSoftwareGraphicsArticlesDiscussMore...

What is a ...
How to make a ...
favicon
speaker icon
icon from image
composed icon
3D text
hi-res star icon
More about ...
Video guide on...
Free Online Icon Maker
Icon Shortcut Maker
Search this site using Google

Bookmark this page

del.icio.us iconDel.icio.us
Digg iconDigg it
StumbleUpon iconStumbleUpon
Yahoo MyWeb iconYahoo MyWeb
Furl iconFurl it

Find quality web sites in our directory of Graphics Resources

Tutorials, App Developer, Research, Online Services, Web Design

Windows Vista icons

Find out how Vista icons differ from XP icons.

See how RealWorld Icon Editor handles Vista icons.

Free newsletter
Your email address:

Select background


   

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 gives a web site identity

Favicon is a small image displayed by an internet browser:

  • in the address box,
  • in the Favorites (Bookmarks) pane and menu,
  • modern browsers also display them in tabs,
  • and there is also an extension for Firefox, which displays favicons on Google search pages.

Favicon in Mozilla Firefox 1.5.

Favicon in Internet Explorer 6.


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.

Creating a favicon

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 neccessary (unless you want to target users running in high-DPI modes, but the support of that in browsers is very unconsitent) 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.

Assigning favicon to a page

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>This is the title of my page!</title>
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
My page is not empty. See?
</body>
</html>

Browser specific notes

Internet Explorer

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:

  • Add the page to your favorites. If you already have the page in your favorites folder, remove it and add it again.
  • Make sure, the icon file is called favicon.ico and it is placed in the root folder of your web server.
  • Make sure, the path to the favicon in the header of your page is absolute, not relative.
  • Delete your temporary internet files. If the folder with temporary files has reached its maximum, the favicon may not be used.
  • If your favicon is still not showing, leave us a comment below.

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.

Mozilla Firefox, Opera, Google Chrome

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.

Animated favicons

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.

Frequent problems and solutions

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.

  • If you have changed the icon on your web you see an old icon (or no icon) in your browser, refresh the page or clear the cache. If you do not know how to clear the cache and you still see the old icon, try testing your web from another computer. You can ask your pals on your favorite discussion board if they see your new favicon.
  • Do not rename .bmp to .ico. I really mean it. You need to convert picture to icon using one of the methods described above. While Firefox will accept this fake .ico, others may not.
  • Once more: if you can, have the favicon available on url http://www.yourserver.com/favicon.ico with correct headers. It will save you a lot of troubles. Test if your favicon is accessible by putting its url in the address box. It should either be displayed in the browser as picture or the download dialog should appear. If you see gibberish text instead, your web browser is not configured properly to handle .ico files.
  • Icons (.ico files) may contain multiple images with different sizes and different color depths. If your favicon contains multiple images and you only change one of them, you may not see the change in your browser, because it shows you a different image from the .ico file.
  • Favicons do not work in some browsers if you test them locally by opening a .html file (without a web server).


Recent Comments

Display all comments.

Anonymous
on April 5th 2009
Sorry, but I don't feel like registering.

Please check out the (draft) standard for "favicon" at the W3C site ("How to Add a Favicon to your Site"). The current HTML standard and XHTML standard are somewhat different from what things have been. Also note that since the standard itself is not actually a standard yet (it's in draft), things may change again (but I doubt the "link" tag will change much, if at all from what you see below), but it makes my description of this below a little complicated.

HTML:
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" type="image/png" href="http://example.com/myicon.png">

XHTML:
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" type="image/png" href="/somewhere/myicon.png"/>

Note that the W3C states that the "profile" attribute and value as shown in the "head" tag should be added as shown for the purpose of properly defining the meaning "icon" value of the "rel" attribute. However, it is my opinion (professionally, I'm a computer programmer and a website designer/coder) that at this time the use of the "profile" attribute is completely superfluous. (I say this, because if you look at the profile that the W3C gives as an example, it seems to provide nothing at all in terms of giving information to a browser that the browser would use to know what to do. The one I'm seeing as I write this seems purely for human reading.)

In the "link" tags above, the "rel" attribute is simply "icon", not "shortcut icon". (In fact, the format of the value "shortcut icon" is bad - contrary to current standards - because it has a space in it, and in current standard the space is a delimiter, so "shortcut icon" would be referring to two different link types, one called "shortcut" and another one called "icon".)

The "type" and "href" attribute values are examples, but note that only the following three values are allowed values for "type" (corresponding to the MIME types of the allowed image formats of the icon file):

type="image/vnd.microsoft.icon"
type="image/gif"
type="image/png"

Note that previously "image/x-icon" was used, because it was an unregistered MIME type - unregistered, meaning that Microsoft had never registered that image file format type officially with the organization, IANA, where all MIME types are officially established. But that particular image format is now registered, so from now on you should use "image/vnd.microsoft.icon" for that type. (Note also that a lot of web server software does not have the new MIME type for ICO files configured, so they will ignore what you've specified anyway, and send it as "text/html" or "text/plain" - which is what they do for every type you specify for anything that the server is not configured to recognize as a valid MIME type.)

This means that you can now make the icon in either the up-until-now typical ICO format, or you can also make it either a GIF file or a PNG file. But remember that whatever format you choose to put the image file in, you must still comply with using a geometry of 16x16 or 32x32 pixels, and either an 8-bit or 24-bit color depth. (Obviously, if you make a GIF, then you can't have 24-bit color; however, a GIF file allows for animation if you want to use it.)

The reason I'm writing about this is because I just recently had occasion to want to use the "favicon" with a web site, which I've never done before, and googling around and digging up relevant information I've been studying this. (I also just updated the Wikipedia article on the subject, which is how I ended up here in fact from the link to this page that is at the bottom of the Wikipedia article.)

- Todd S. Greene
(Charlotte, Michigan)
Anonymous
on April 13th 2009
I used this code:
<link rel="favorites icon" href="favicon.ico">
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" href="favicon.ico">
<link rel="favorites icon" href="favicon.gif">
<link rel="shortcut icon" href="favicon.gif">
<link rel="icon" href="favicon.gif">

on internet explorer 7 and it didn't show niether the static nor the animated!!! http://joosle.recoding.net/
Anonymous
on April 26th 2009
Have you checked the files favicon.ico or favicon.gif really exist in the same folder of the page?

Try to use the slash to tell the browser that the favicon is in the root folder like this

<link rel="shortcut icon" href="/favicon.ico">

There is also a page which check and download the favicon of others

http://www.getfavicon.org

You can see from there how your favicon is displayed to the world.
Anonymous
on April 26th 2009
IE really needs to get with the program...favicons are nice but IE 7 will not show mine for me ..but i can see others...
Anonymous
on April 28th 2009
I'm from joosle.recoding.net I preffered to use only the static favicon... i discovered it was my internet the only one that didn't showed it :( but I fixed it
IconDrive.com
on May 15th 2009
Actually, any favicon is a good favicon, since too many sites do not have one at all. Once you have a favicon, you can use your favicon to advertise your site at IconDrive.com (http://www.icondrive.com).
Redorbit
on May 23rd 2009
Thanks for the information below. However, my favicon wouldn't show up under my subdomains. My main domain is http://www.jomra.com, the subdomain I tried it on are http://iphone.jomra.com.
So I copied favicon.ico to the main folder of the subdomain and linked it in the head as:
<link rel="shortcut icon" href="/favicon.ico">
= Didn't show up

<link rel="shortcut icon" href="http://iphone.jomra.com/favicon.ico">
= Didn't show up

<link rel="shortcut icon" href="//wwwjomra.com/iphone/favicon.ico">
= WORKED on IE7 and Firefox!!

Ensure you clear you cache when trying.

Good luck,
Redouane

Anonymous
on May 26th 2009
Thanks man, this stuff works. I tried it and tested it on opera and firefox and it worked well. thanks.maybe those who complained it didn't work didn't do it well.

Prince C. CIWA
Anonymous
on June 5th 2009
Todd S Greene... Thank you. This worked perfectly.
Anonymous
on June 23rd 2009
Yep Worked a treat although for some reason I only added my file as
favicon.gif ( Animated ) then linked to it
<link rel="shortcut icon" href="favicon.gif">
And it played the animated one in Firefox and just played a static
one in IE ... Cleared everything and tried on three different pc's .
Go figure ( IE 7 and firefox 2.2 to 3.011 )

Copyright © 2005-2009 RealWorld Graphics. Contact: info@rw-designer.com.