Browser doesn't show favicon.ico, but it exists

C

13

21

My site is http://example.com/en/ I made a favicon for it. In the head I have:

 <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

I can see the favicon.ico using the URL http://example.com/favicon.ico

But any browser doesn't show it. Help, please.

Conah answered 30/9, 2013 at 22:12 Comment(2)

Try adding another copy of that with just icon. Some browsers don't read the whole thing properly. – Hetero 30/9, 2013 at 22:14

CP 510 - thanks, but it doesn't help. – Conah 30/9, 2013 at 22:45

A

14

I see it used as icon when I browse to your page.

If you have visited your page before (duh!) it's likely because the browsers remember that there wasn't any icon there before, and don't update it right away. Browsers remember the icons for different sites, so that they don't have to request it every time that the site name is shown (for example in the bookmarks or the history).

Also, it's not guaranteed that every user sees the favicon, some browsers simply doesn't display some icons sometimes, for no apparent reason.

Asphalt answered 30/9, 2013 at 22:19 Comment(2)

@124bit: It seems that the only way is for the visitors to clean their histories: #3971436 – Asphalt 30/9, 2013 at 23:5

Actually, there is another way that is under developer control. Webservers can instruct browsers how long to cache any given file via the "Expires" and "max-age" headers. – Roulade 4/8, 2021 at 2:3

S

23

Browser will load from cached data. Try updating your call to force an update via. new file-name.

<link rel="shortcut icon" href="/favicon.ico?v=2" type="image/x-icon">

Shoddy answered 28/2, 2017 at 6:49 Comment(2)

just anything behind '?' will do – Snug 5/10, 2018 at 11:42

Brilliant! I couldn't find the cache, but this busted it. – Linehan 11/6, 2019 at 20:42

A

14

I see it used as icon when I browse to your page.

If you have visited your page before (duh!) it's likely because the browsers remember that there wasn't any icon there before, and don't update it right away. Browsers remember the icons for different sites, so that they don't have to request it every time that the site name is shown (for example in the bookmarks or the history).

Also, it's not guaranteed that every user sees the favicon, some browsers simply doesn't display some icons sometimes, for no apparent reason.

Asphalt answered 30/9, 2013 at 22:19 Comment(2)

@124bit: It seems that the only way is for the visitors to clean their histories: #3971436 – Asphalt 30/9, 2013 at 23:5

Actually, there is another way that is under developer control. Webservers can instruct browsers how long to cache any given file via the "Expires" and "max-age" headers. – Roulade 4/8, 2021 at 2:3

S

3

I had the same problem. This is my favicon tag:

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>

Don't forget close it.

I cleaned browser cache, but it didn't fixed a problem.

I saw my favicon just after Chrome and Firefox restart. In my opinion, it's a strange hard browser caching

Scaler answered 11/11, 2015 at 14:21 Comment(0)

K

2

Takeaway from the Rest of the Similar Posts

It is Important to Close ALL the Windows for the Browser You Are Testing against and Start It Fresh to See the Change Happen. (Doesn't Work on Edge)

Aside Notes

I have stumbled upon this issue myself. After researching other answers, there are many suggestions to fix it.

Some people can't rid of the old icon: How to clear the icon cache of Chromium browser

Others wanted to force refresh: How do I force a favicon refresh

Krahling answered 6/3, 2017 at 23:28 Comment(0)

O

2

CTRL+F5 can help in some cases as it will force-reload all elements on the page. Closing and opening a tab doesn't always help.

Oink answered 3/4, 2018 at 12:43 Comment(0)

J

1

Before doing anything, check your website in the browserling. If the favicon displayed there, you don't need to do anything further. At that moment, your browser decided to go crazy!

Janik answered 11/5, 2020 at 18:56 Comment(1)

This is excellent advice if you might have some weird caching stuff going on. I had this issue and didn't want to redeploy my code just to fix the favicon. The most pragmatic approach for me, once I'd seen that the favicon was there and whilst I vaguely cared about updating it, was to update the link (by appending a querystring, like favicon.ico?v=new in the head section) ready for the next deploy. The more I care, the sooner the next deploy. – Entertainment 24/11, 2020 at 11:46

K

0

I had the same problem :

the favicon exists (you can access it by its url), but doesn't show up, wether I am in local (with WAMP) or on a real webserver.

I had the following code :

<link rel="icon" sizes="192x192" href="https://example.com/public/images/favicon/favicon.png" type="image/png">

The problem was that I had made some echo and var_dump of PHP variables before the <!DOCTYPE html> was displayed.

Once I had removed all the echo and var_dump, the favicon immediately worked on both local and web server.

Kelleykelli answered 3/4, 2019 at 15:33 Comment(0)

S

0

I experienced this as well. The quickest way for me usually is to paste the required link onto a different browser.

For example, if you are using Safari, run the link on Google Chrome. It works for me every time, without having to do the extra steps mentioned by others.

Shelburne answered 18/2, 2021 at 0:31 Comment(0)

D

0

Use of a rel attribute value defined in a profile, Inside head tag-

<link rel="icon" 
  type="image/png" 
  href="http://example.com/myicon.png">

Updated Favicon information is here

https://www.w3.org/2005/10/howto-favicon

Douglas answered 13/9, 2023 at 20:4 Comment(0)

D

-1

try to use only rel="icon" in your rel... no rel="shortcut icon"

Dialectologist answered 10/4, 2016 at 23:27 Comment(0)

H

-1

Po Rith's line of code worked for me. I added to the php page involved, escaping the quotes to accommodate the php, and it worked great.

echo "</head>"

became

echo "<link rel=\"shortcut icon\" href=\"/favicon.ico?v=2\" type=\"image/x-icon\"></head>"

Then used Ctrl+F5 to bypass the cache and load image fresh...worked right away.

Thanks, DougieC

Hootenanny answered 15/11, 2020 at 19:8 Comment(0)

S

-1

You can try this way. I had same issue.

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

Skycap answered 9/11, 2022 at 13:1 Comment(1)

This is pretty much identical to the solution proposed in the top rated answer. This isn't adding anything new or interesting. – Chatelaine 12/12, 2022 at 21:10

C

-1

You can add "?" at the end of the "favicon.ico" in code:

<link rel="icon" type="image/x-icon" href="favicon.ico?">

Cushat answered 12/12, 2022 at 9:10 Comment(2)

This is pretty much identical to the solution proposed in the top rated answer. This isn't adding anything new or interesting. – Chatelaine 12/12, 2022 at 21:10

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Donn 16/12, 2022 at 7:39

Recommended topics

Hot tags