ajpocus ajpocus - 2 months ago 5
HTML Question

Favicon not updating; flashes new version, then reverts

I'm trying to update the favicon on my site, but something strange is happening: it shows the new version for a split-second, then reverts to the old icon. Check out yesinsights.com to see what I mean -- watch the favicon carefully. Here's what the favicon should look like.

I've tried adding a query parameter to the favicon url, I've tried clearing my browser's cache (I'm using Firefox on Ubuntu), I've tried all kinds of variations on the

<link>
tag, and nothing seems to work. Any help would be very much appreciated. Thanks in advance!

Answer

(As of request, here is my comment as an answer)

Your icon looks different in different pixel dimensions:

enter image description here

The browser fetches the 16×16 one with the white background, whereas your link shows the 64×64 one with the blue background.

See this Wikipedia article for details about the ICO file format.

Solution 1

One solution could be to fetch a tool to edit your icon to only include the 16×16 image and delete all other images inside the icon file.

Personally, I've used Microangelo and IcoFX as an icon editor (both commercial).

Solution 2

Alternatively, you could generate a favicon by uploading a PNG image to one of the various online tools like e.g. this one.

Solution 3

Another solution is to not use an ICO file at all but a PNG file by using something like this inside the <head> tag:

<link rel="icon" type="image/png" href="http://my-domain.com/my-favicon.png" />

As mentioned by Ajpocus in the comment below, this works for most browsers but in the IE land only for IE 11+.