What is the secret to getting favicons to work?

I’ve tried everything. Added tags, used different generators to get the format right, etc. Here is an example of one that doesn’t work

I can click on the URL in the tag in FF when I view source and see the icon load up but it still shows a blank icon in the tab and address bar :confused:

Shows fine for me. Have you tried emptying your cache?

What browser and OS are you on? I find that IE (ironically) seems to always accept favicons. It’s getting them to show up in FF, chrome, safari that I can’t get to work.

I have my web developer tool bar in FF set to never use cache…

I’m on OS X Snow Leopard.

I tested it in the latest Chrome, Opera, Safari, and Firefox and they all display the favicon.

Have you tried any/all of the steps listed here?

I’ve no idea what else it might be. I’ve had this happen to me and usually by cleaning up the cache, the favicon got picked up.

I use this in the <head> and both the static and animated favicons appear in IE8, FF3.6, Opera, Safari and Chrome.

<link rel="shortcut icon" href="./Pics/favicon.ico" />
        <link rel="icon" href="./Pics/animated_favicon1.gif" type="image/gif" />

I convert my jpg to a favicon at chami and then download the output back to my pc.

I don’t know why you have the “.” before the “/Pics”… Are you trying to identify a path that is a level above where your web page is? If you put “…/” before a path, it tells the browser to go up one level to look for the file. Look at where your page is at. I would put your favicon in the same place as your webpage just to avoid confusion.

./ == current directory

…/ == up 1 level

so there is no confusion for me.

I normally have a pics folder where all the images for the website reside, including the favicon, but I guess you can put favicons wherever you like.

Usually the safest place is to put them in the root directory of the website due to legacy issues.


It looks like you have it fixed? Could you share with the rest of “the class” (LOL) what you did to fix it? I use these a lot and I am always looking for tips.

Works for me (Chrome 8, OSX). Favicons are super aggressively cached.

add the following coding in ur page
<link rel=“shortcut icon” href=“./images/favicon.ico” />
<link rel=“icon” href=“./images/zibscraps_favicon1.gif” type=“image/gif” />

after some time it appears in browser

Pardon my bluntness, but I see too many clunky attempts at doing a favicon. There’s no real secrets, just use the proper file type and code. Some browsers do not require the code to find your favicon, as long as you put it in the accepted location, which is the root of your domain. Not an image folder, not any sub-folder, just the domain root.

For those browsers that work better if you provide the right code, the code is to be placed within the <head></head> section of your documents - all of them if you want every page of your website to have the favicon appear for visitors in their browsers, Favorites/Bookmarks lists and desktop icons.

The code is dependent upon your doctype. If your doctype is HTML, the <link> has no end tag; if your doctype is XHTML, the <link /> tag must be properly closed. If you want to assure that the icon is found on every page, then hard code the location in, which is a good practice to use for every image because of the SEO value. My websites are XHTML Transitional and the favicon code looks like this here:

<link rel="shortcut icon" href="http://www.enterprisejm.com/favicon.ico" />

Simple and to the point. Nothing more is necessary.

The icon itself must be in the proper format. Renaming a PNG, GIF, BMP or JPG file to ICO does not make it an ICO file type. If you don’t have a program that can properly convert your graphic to ICO format, you can use chami.com, as agrable recommended, or any of the favicon websites available around the Net. Yes, you will be able to see other file types appear as the favicon in some browsers on some platforms, but it is not the standard and doesn’t always work.

If you want the professionalism and branding benefits of a favicon, do it right. It’s very easy and actually less trouble than doing it wrong.