0

I have a problem with my favicon in Chrome. It won't show in one page. I don't really know why but I guess it's because it works with a token, so if the token is different it takes other stuff from my database. in other words the page is never the same. I also tried some other stuff from stackoverflow but it wouldn't work either. Somehow it will work in Microsoft Edge.

this is what I tried so far (header.php):

<link rel="icon" type="image/png" href="/healtywavezicon.png">
<link rel="shortcut icon" type="image/png" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="57x57" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="60x60" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="72x72" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="76x76" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="114x114" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="120x120" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="144x144" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="152x152" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/healtywavezicon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/healtywavezicon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/healtywavezicon.png">
<link rel="icon" type="image/png" sizes="96x96" href="/healtywavezicon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/healtywavezicon.png">

I also tried to put it directly in the index.php:

<head>
  <link rel="icon" type="image/png" href="/healtywavezicon.png">
  <link rel="shortcut icon" type="image/png" href="/healtywavezicon.png">
</head>
xmaster
  • 1,042
  • 7
  • 20

3 Answers3

1

If your favicon does not work on Chrome but works on Edge, Firefox and others, this may be because your header contains a body-only markup.

philippe_b
  • 38,730
  • 7
  • 57
  • 59
  • if i show you my code do you think you can help me out? – xmaster Apr 02 '19 at 09:03
  • Well, this is not super convenient. Your header must be quite big. You should: 1) Spot your icon markups 2) Look for a div or a p that could appear *before* the icon markups Note: The W3C Validator spots this kind of issue, you submit your code there. – philippe_b Apr 02 '19 at 12:27
  • 1
    thanks mate i know what i did wrong i had a break above the code for my css – xmaster Apr 02 '19 at 12:51
  • 1
    Great! This issue can be so annoying... I'm glad you found the culprit! – philippe_b Apr 02 '19 at 14:47
0

If you put that in index.PHP then you should make sure that they're in header tags rather than in tags. otherwise,check the image urls

squills
  • 31
  • 1
  • 6
0

Since you have a leading / in your href, you are referencing a file that will be in the root folder. In case you have your page in a folder on your computer, not serving it from a local web server, the leading / will tell the browser to look in the root folder of your filesystem. So the browser expects the file to be at C:/favicon.ico or similar, which is probably not what you've expected.

If you have the favicon.ico in the same folder as the web page, you could just remove the leading slash, and the icon should be visible.

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

Update:

As a debug option, you could try to add a tag that you know works. I borrowed this snippet from the StackOverflow source. Try replacing your link tag with this and see if you get the SO logo as your favicon.

<link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">

Update 2:

It appears that there is a bug reported on Chromium where the favicon isn't displayed if the file is loaded locally, without being served through a web server.

Tanbir Chowdhury
  • 40
  • 5
  • im working on a server. so that can't be the problem. i need the `/` in my href otherwise it won't work. i tried your **Update** but it won't work... maybe because the site doens't have like one url because of the token? – xmaster Mar 21 '19 at 13:38