|
 |
|
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 January 25th
At first it wasnt work but after i changed the path to "root/htdocs/img/favicon.ico" instead of "root/htdocs/favicon.ico"
and changed the code to
<link rel="shortcut icon" href="/img/favicon" >
It Works, i cant see the diffrent with the original Tut but it work
on January 29th
Adrijana
on February 2nd
on February 10th
I triend using a pocture from a site too to see.
Here is a piece of my code.
<link rel="shortcut icon" href="http://www.mannythemovieguy.com/images/superman_warner_bros_won.jpg" />
on February 10th
I have an issue with favicon with IE6. My website (http://www.burhanpur.x10hosting.com/home.html) icon works fine with firefox but not with IE6.
After adding to my favorites, Icon appearing in the favorites but not in address bar.
I want icon to appear also in address bar of IE6.
Any one faced the same issue with IE6?
Thanks & regards,
Burhanpur
http://www.burhanpur.x10hosting.com
on February 12th
on February 18th
My website is www.clearlyorganizedlife.com.
1) In IE 8 I cannot get my favicon to show at all. UPDATE: SOLVED! Finally got it working - I erased the cookies and other temporary files. I think it was the cookies that were the problem.
2) In Foxfire, why does the favicon only look good in 2 of the 3 spots where it appears - it's okay on the tab, it's okay in the address bar, but doesn't look good in the bookmark. (It's jagged and not transparent.) UPDATE: SOLVED! Same issue as above - I deleted the cookies and other temporary files and now the browser is using the same version everywhere.
3) How can I get my favicon to look really crisp - like Yahoo's or Craig's list? What type of file do I need to begin with? I turned a 300 dpi jpg into a gif with 16 colors. I'm not a graphics designer, but know a little about Illustrator and Photoshop. STILL NEED HELP HERE....
Any help you can provide on these issues would be great. Thanks!!
on March 1st
I see your problem in both FireFox 3.6 and Internet Explorer 8. :(
If you would like to see my favicon the address is >> http://cdl.viviti.com.
I started with an old preexisting 200 dpi file, normally I would bump up the resolution to 300-600 dpi, but the effort was intended merely to test the outcome.
Usually speaking, the higher the resolution (dpi/ppi) the better the image and the larger the file. My original file was a bitmap 246 x 246 pixels / 1.23 x 1.23 inches @ 200 dpi (222k), transparified & saved as portable network graphic (42.8 k), the resulting generated icon was 244k.
I used Paint Shop Pro 9.01 to produce the bitmap and portable network graphic, & @icon 1.21 (safely available through cnet download.com >> http://download.cnet.com/Icon-Sushi/3000-2195_4-10547564.html?tag=mncol;rbxcrdl1) to produce the icon. Aicon works well, is simple, & is freeware. All I did was open the .png in @icon 1.21 and saved it as a single icon.
It has been a while since I used the RealWorld Icon Editor (prior to version 2008.1), I loved using it when I did. In RealWorld Icon Editor you have the option to save as a smooth Windows XP icon or a Windows Vista icon (see >> http://www.rw-designer.com/vista-icon). There are other options which may assist you in achieving a smoother image in RealWorld Icon Editor.
When using RealWorld Icon Editor I would simply open the 200-300 dpi image and save in Windows XP or Windows Vista icons. If the image I was working with was too small the results would be a bit pixelated, I believe 512 x 512 is recommended.
You might also want to try to smooth out the edges of your original with shape based anti-aliasing and/or various blurring or smoothing adjustments/effects in PhotoShop. I haven't used PhotoShop yet but I hear that it is much the same as Paint Shop Pro.
If you are using RealWorld Icon Editor you may want to take a look at "Related resources: " here >> http://www.rw-designer.com/3D_icon_editor.php.
There is also a "free to try" convenient service online for rendering vector images >> http://vectormagic.com/home.
You may contact me via my website's navigation panel, http://cdl.viviti.com, if you need further assistance.
Good Luck!
;) cdl
on March 15th
on March 16th