The Chrome Favicon Nightmare And How I Finally Fixed It
February 25th, 2017
The other night was a real doozy. I decided to add
favicons to all my
gh-pages hosted projects on Github. A while ago I had added a
favicon to a project using one of the images for project itself and I had no
problems after installation. So yesterday I thought, why not install a new brand
favicon that would match the look of the front of my new business card? I wanted
to get started on developing my new brand image and make it easy for people to
recognize MY work. Favicons are great for that.
So I went ahead and installed my newly generated favicon on all relevant gh-pages-hosted projects. In the beginning, everything seemed fine locally. However, once the favicon was pushed remotely, things got hairy locally and remotely. I would get an infinitely spinning wheel on page load.
At first I thought it might be the font. But I thought it couldn’t be the case, because I always choose speedy Google fonts and never had any problems. Nevertheless, I tried replacing one font in a project to see what would happen. It made no difference. It’s then that I knew that it must be the favicon.
Then I tested the
localhost link in Firefox and the
gh-pages link in
Firefox. There was no problem with page load. And Safari simply doesn’t
display favicons at all.
Google Searches for
“Favicon Bugs in Chrome” and
“Chrome issues favicons”, to name a couple. Did not come up with much of
anything at first, but it was only as I dug deeper and deeper, and finally
conducted a search entitled
“Refreshing favicons in Chrome” that I came up
with my solution. It was a StackOverflow post entitled
“How do I force a favicon refresh”
from 7 years ago! The answer that solved my problem was NOT the most upvoted on
the page but the following:
801 Ok, after 10 minutes of wtf'ing, the easy way to fix it is close to that of lineofbirds Type in www.yoursite.com/favicon.ico (or www.yoursite.com/apple-touch-icon.png, etc.) Push enter ctrl+f5 Restart Browser (IE, Firefox)
This does NOT just apply to IE or Firefox. It also applies to Chrome. But since this was written 7 years ago, Firefox has since fixed its favicon bug. It was only Chrome that caused me problems. Safari fixed its issue by NOT displaying favicons AT ALL.
The solution above fixed my problem and I haven’t had an issue since.