|
 |
|
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
|
|
Index
Software
Gallery
Tutorials
Forums
Users
Del.icio.us
Digg it
StumbleUpon
Yahoo MyWeb
Furl it
Display all comments.
on September 15th 2009
e.g.
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
on September 25th 2009
on September 28th 2009
on September 30th 2009
on October 16th 2009
Please Help!!!!
on October 23rd 2009
my favicon is not working, http://www.moneymakingsecretsforyou.com/favicon.ico\
it shows there, but why not normally?
on October 28th 2009
on November 2nd 2009
on November 3rd 2009
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="SHORTCUT ICON" href="favicon.ico"/>
<link rel="SHORTCUT ICON" href="http://www.stjohnboscoco-op.org/favicon.ico">
<link rel="shortcut icon" href="/favicon.ico" />
on November 5th 2009