Search code examples
htmlwebfavicon

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!

Solution

  • (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+.