12

I've looked at several posts on here, and I've done further research online, but I can't see to find the problem.

I put the favicon.ico in the main directory, but it's not showing up on any browser. I've tried it personally on Firefox and Safari, and I've tried the rest on Browsershots.

I also have this line in the head of the html: 

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

I've also tried it without the type..., as I have it on other pages on the same server.

This website doesn't show its favicon (thistle)

This website does show its favicon (greenman)

Two of my sites on the same server with the favicon in the same place of the site's directory. ??

The only thing I can figure is there was a problem converting the ico online and saving it on my MacBook Pro before uploading it to the server?

Any help or hints or thoughts are greatly appreciated.

ProfRose
  • 153
  • 1
  • 3
  • 14
  • Both sites load their favicon in Chrome 40. – Dai Mar 06 '15 at 23:54
  • lochhavenretreat doesn't seem to have a favicon. The other site does, but it's a very large icon of 64 by 72 px, which isn't a propert icon size. – GolezTrol Mar 06 '15 at 23:55
  • @GolezTrol, lochhavenretreat does have on that's 16x16, but it's not showing up. I didn't realize the other one was so big! It was made about 8 yrs ago. – ProfRose Mar 07 '15 at 00:01
  • Also, both sites load their icon on IE11 for me: http://imgur.com/Rnv8Ydc – Dai Mar 07 '15 at 00:50

6 Answers6

27

Had the same problem. Found this great answer: https://stackoverflow.com/a/16375622/5359989

What worked for me was changing 'favicon.ico' to something unique such as 'myfavicon.ico' and referencing it in the html accordingly. Hope this works for you also.

Community
  • 1
  • 1
Jonathan McLaren
  • 373
  • 3
  • 8
  • 1
    The link only mentions that name change works on IE. To add, the same trick works for Firefox too (tested on 59.0.2). – codeman48 May 11 '18 at 17:00
3

Change this:

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

To this:

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

Another reason why your favicon is not shown could be because you're viewing a cached version of your site.

Clear your cache and open the site again and you will see the favicon.

AndrewL64
  • 15,794
  • 8
  • 47
  • 79
2

Chrome didn't like the fact my favicon.ico was a 64x64 image. I changed it to a 32x32 pixel image and it showed right up!

patrick
  • 11,519
  • 8
  • 71
  • 80
1

You're using a relative path in your href="" attribute. Change it to a root-relative path /favicon.ico or an absolute path http://yoursite.com/favicon.ico.

Dai
  • 141,631
  • 28
  • 261
  • 374
  • Thanks for the help, but that didn't work. Neither one. :-/ Interesting that it works on Chrome 40. – ProfRose Mar 07 '15 at 00:02
1

Not all icons are the same! I had this problem for a while and could never figure out why some browsers didnt show the icon. I knew with absolute certainty that the file existed where the link tag said it did. Eventually I discovered that, at least for Chrome and Opera, they WONT display some icons depending on the formats within the .ico file.

E.g. a .ico that has, only, 64x64 and 32x32 and 16x16 formats will display.

BUT a .ico that also has, IN ADDITION TO those above, 512x512 256x256, 128x128 and 48x48 formats, will NOT display.

That really looks like a browser issue but its curious that it affects more than one browser.

Anyhow the solution, for me at least, was to only include 64x64 and 32x32 and 16x16 formats.

user876725
  • 133
  • 8
0

I had the same issue but solved it in the following way. In w3schools at the "HTML favicon" section it says:

To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is "favicon.ico".

In my case I had a project in express.js. In express one sets the root directory of static files with the command:

app.use(express.static('public'))

In my project, "public" seemed as the root directory for all my static files. So, I just had to add a folder named "image" inside "public" where I saved my "favicon.ico". Finally I linked the icon in my main template html file according to my project's directory tree:

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

Notice that I don't have to refer to the public folder because it is set as root by my framework. In summary I think that if one uses a simple html project with vanilla js the w3schools' guideline is straightforward. But, if you're using a framework like express, Django etc. you have to think carefully how does your framework serve your static files.

Στέργιος Κατσογιαννης
  • 1
  • 1