How to change the site's favicon

Here we're talking about the icon that appears in Firefox tabs and shortcuts and elsewhere. See also IE section below.

There's a bunch of discussion on this subject here:

The most complete version from that thread seems to be to insert the following in the theme:
<link rel="shortcut icon" href="/space/showimage/my_favicon.ico" type="image/x-icon" />
 <link rel="icon" href="/space/showimage/my_favicon.ico" type="image/x-icon" />

I have found this minimal version to work:
 <link rel="shortcut icon" href="/file/view/favicon.ico" />

Not sure what to make of the variation between"/space/showimage/" and "/file/view/" as the location of the file. Whatever path would normally cause the server to cough up the image should do the trick.

Problem on private sites

On private sites, the server will not serve files to users who are not logged in. Consequently, the request for the favicon will not be honored. Instead, wikispaces serves up an error image that currently looks like this:
img_no_access.gif

Unfortunately, when the user does log in, the browser has cached this as the favicon, and is resistant to fetching the "real" icon as requested in the page. Check Google for ways to flush the browser favicon cache.

The following seems to be a solution to this problem of caching the wrong icon. First, wrap the above favicon code in theme conditionals, like this:

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

Now, the non-member gets a page with no special icon link, and gets wikispaces' tree icon instead of the no-access image. This may get cached, but it's served from a different address (it seems), so when the user logs in, the custom favicon gets requested and appears.

But what if the browser has cached a different image (like the no access image) for that address? I found the following steps dislodged it in Firefox 3.6:
1. Entering the address of the image explicitly into Firefox's address bar: mysite.wikispaces.com/file/view/favicon.ico. This probably causes Firefox to display the undesired cached image.
2. Shift-refresh, or whatever you have to do to get the correct image to appear.
3. Now that image appears as the site icon.

Internet Explorer

A few experiments using IE8:
  • Using a 16x16 gif file renamed to favicon.ico worked in FF, but not in IE8.
  • For IE8, I had to actually make a proper .ico format file. (These show up as pictorial icons in Windows Explorer also.) So now IE8 shows the icon in its tabs, but I can't get FF to see this new ico file, it's still caching the old one.
  • I tried navigating FF to the ico file by providing the URL to the address slot, but that cause FF to just download it, doesn't seem to know how to display it. Arrrg.
  • But, after logging out of the site, deleting all bookmarks for that site from FF's bookmarks list, closing FF, and then restarting FF, it did see and use the new icon. Yay!

Other references