Favicon did not show in Chrome when using localhost

Frontend Web Development: The Big Nerd Ranch Guide Chapter 2: Setting Up Your First Project
1

Using Chrome and localhost, the favicon did not show up. When localhost was changed to machine name, it worked!

I was using also browser-sync.

Thanks to the tips from Stackoverflow: https://stackoverflow.com/questions/37073/what-is-currently-the-best-way-to-get-a-favicon-to-display-in-all-browsers-that

1 Like
2

I also found out if you exit browser-sync and restart then the favicon starts showing up while using localhost

1 Like
3

Mine wasn’t showing up either, but stopping the browser-sync with Control C a couple of times and deleting some of the html (did this to see if changes where showing up also must save the changes) now shows the favicon all the time. ( Windows 10 , Chrome )

Correction, I had also added this to the header and this seems to be the reason the favicon is showing.(the website that generated the favicon outputted this)

> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
>   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
>   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
>   <link rel="manifest" href="/site.webmanifest">
>   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
>   <meta name="msapplication-TileColor" content="#da532c">
>   <meta name="theme-color" content="#ffffff">
4

Thanks! finally, I solved this problem according to the link which you had posted. I find that just a single line of codes below can do the trick :

<link rel="icon" href="favicon.gif" type="image/png">

instead of :

<link rel="shortcut icon" href="favicon.ico">
1 Like