CODEWITHSUNDEEP
htmlcssfavicon
megashigger
megashigger

Reputation: 9053

Favicon isn't working on root website and only works on specific sites after refreshing

In my index.php file I have:

<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />

And in assets/images I have the two files ("favicon-16x16.png" and "favicon-32x32.png"). What am I doing wrong?

Also, when I go to specific pages on my websites and refresh I see the favicon. But it doesn't show on the root page and it only only show on some other pages if I refresh.

Another thing I noticed is that this problem didn't happen when my index.php file was called index.html. However I have to name the file index.php because I'm hosting through Heroku.

Upvotes: 0

Views: 253

Answers (2)

philippe_b
philippe_b

Reputation: 41318

Not sure of what is causing this issue, but here is a checklist:

  • Use absolute paths, eg. /images/favicon-32x32.png, instead of relative paths, eg. images/favicon-32x32.png. Else you might have issues due to pages in different directories.
  • Makes sure your links are valid. For example, if your HTML code contains <link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16"> and your web site is http://example.com, then type http://example.com/images/favicon-16x16.png in the address bar of your browser: does it displays the icon?
  • Browsers are very tough regarding favicon caching. If the favicon is not configured correctly, you browser might display it anyway because it cached it during a (successful) previous attempt. Even if the favicon is configured correctly, your browser might not display it, at least immediately, because of failed previous attempts. As a workaround, you can add a kind of version to your URL. For example, <link rel="icon" type="image/png" href="/images/favicon-16x16.png?v=2" sizes="16x16"> and change it whenever you try something else. That will force your browser to consider the picture no matter what it encountered previously.
  • Because of this same caching issue, you might want to try with another browser, just to make sure your cache is not messing up.
  • While debugging your favicon, display either your browser's network logs (Firebug with Firefox, Dev tools with Chrome...) and/or your server's logs (eg. access.log with Apache) to understand what's going on. Again, this might reveal the dreadful caching issue: you try many things but your browser won't reload anything.
  • Browsers can have different behavior in local environments regarding favicon. Are you accessing your files directly, ie. from the file system? If so I suggest you to switch to a web server environment.

Upvotes: 0

AndrewL64
AndrewL64

Reputation: 16311

The favicon rel should be defined as rel="shortcut icon"like this:

And also make sure the path file is correct for every page. If your root file is in the same directory i.e. inside your assets folder, then the above updated code should work but if your index is outside your assets folder, then you need to change your favicon path file to something like href="assets/images/favicon-32x32.png"

Upvotes: 0

Related Questions