DEV Community

Cover image for The mystery of the changing favicon
Alvaro Montoro
Alvaro Montoro

Posted on • Originally published at alvaromontoro.com

The mystery of the changing favicon

Yesterday at work, another developer reached out to me about an issue. The conversation went like this (with some artistic license):

Dev: Hey, Alvaro! We have a problem.
Me: What is it?
Dev: The favicon on the site is wrong. It's not the corporate logo.
Me: What?
Dev: Yes. It's not our logo... it's your name!
Me: What????
Dev: *shows screen*
Me: ...
Dev: ...
Me: Oh, ****!

It was clear as day, but I couldn't believe my eyes: it was our site, the title was correct, only that the favicon displayed on the tab didn't have the company's logo but the letters "Alv" (from Alvaro?) I refreshed and re-refreshed, thinking that maybe it was some prank. But it wasn't.

Note: I removed the screenshots of the site's name and logo to avoid issues. There is a small sample at the bottom of the article to replicate the problem with generic icons.

It was puzzling: the favicon worked differently depending on the browser. Chrome and Safari showed the correct favicon (with the corporate logo) while Firefox showed a completely different logo (with some letters.) And we double-checked that the file was the same, not an old cached version. It was the exact same file... but it was different.

Luckily for us, it only took a few minutes to figure out what was happening (and solve the issue.) But I must admit, it is one of the weirdest issues I've seen lately.

We downloaded the favicon.ico file and opened it in an image editor, and then we saw the root cause of the problem:

Screenshot of GIMP, and image editor, with an icon open. It has two layers, one with the CyberSource logo and another with the letters Alv

The .ico file had multiple layers (or icons) in it. The top layer (first icon) was the one that Chrome and Safari displayed, and the bottom layer (last icon) was the one that Firefox was displaying.

We even ran a test to verify that was the case. We swapped the order of the layers, saved the file... and the favicon changed in all browsers! Now Chrome had the Alv favicon (top layer) while Firefox had the corporate logo (bottom layer.)

Transparencies were ignored by the browser. The issue is not a matter of stacking layers but a .ico file that contains multiple icons, and the browser selects one (and only one). As Bramus suggested on Twitter.

Having singled out the cause of the error, made the solution easy: remove the icon/layer from the .ico file and save. Problem (and mystery) solved.

But why the letters "Alv"? Initially, we tested with a dummy icon. When we got the corporate logo, we put it in a layer on top of the image editor and hid the test layer. But even when the layer was hidden from view, it was still exported as part of the icon when we saved!

I don't know if we can consider Firefox's behavior a bug or a feature. But it turned into an interesting puzzle to solve.

Replicating the issue

What to see the issue locally? Create an HTML file like this on your computer (something simple, you don't even need the content of the <body>):

<!doctype html>
<html>
  <head>
    <title>Favicon test</title>
    <link rel="icon" href="./favicon.ico" />
  </head>
  <body>
    <h1>favicon test</h1>
    <p>The favicon has two layers and it is 
    displayed differently by the browsers.</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Then create a favicon.ico file with two layers/icons inside. I used GIMP to create the file, adding two 64x64 layers like these:

Note: If you don't have an image editor handy, you can download a version of the favicon.ico from my website.

Layer one of the favicon: the letter A Layer two of the favicon: the letter B

Save it as a .ico and put it in the same folder as the HTML file. That's it. Your demo is ready for testing. Open the page on Chrome, and the tab will look like this:

Screenshot of a Chrome tab with the title "favicon test" and an icon with the letter A in it

While opening in Firefox, the tab will look differently:

Screenshot of a Firefox tab with the title "favicon test" and an icon with the letter B in it

You can add more layers to the icon, but they will be "ignored", and the result will be the same all the time: Chrome and Safari will pick the top one to display as a favicon, and Firefox will pick the last one.

Top comments (3)

Collapse
 
grahamthedev profile image
GrahamTheDev

Is this not something to do with how animated favicons are created? I think it is just stacked image files to create it and the only thing that was missing was whatever instruction the browser needs (time per frame probably) to switch between them?

Super interesting though, hopefully someone can give the actual explanation in the comments as this was just a best guess!

Collapse
 
koas profile image
Koas

¡Hola tocayo! Is there any advantage in using ico files over png?

Collapse
 
alvaromontoro profile image
Alvaro Montoro

¡Hola! There's no real advantage apart from support for old browsers. The reason why we were using ico is because it is an old application and we were not allowed to change the code, just the image file.