HTML Favicon.ico won't show on Google Chrome

Question

I am making a HTML page and one of the things I wanted was a favicon appearing next to the title.

I'm using Google Chrome, I see favicons working on other websites, but the favicon on my website won't show up. The site is in a folder on my desktop named site.

The favicon.ico file is 16x16, and I used an online generator to make it.

This is the code:

<!DOCTYPE html>
<html> 
    <head>
        <title></title>
        <link rel="shortcut icon" href="/favicon.ico" />
    </head>
    <body>
    </body>
</html>

Christofer Eliasson · Accepted Answer · 2012-12-08T20:33:14.663

42

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 webserver, the leading / will tell the browser to look in the root folder of your filesystem. So the browser expect 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, your 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 webserver.

edited Dec 08 '12 at 20:33

answered Dec 08 '12 at 18:23

Christofer Eliasson

32,939
7
74
103

2

@Nick If you open up developer tools (press F12), go to the Network tab, then reload your page. You will now see all the resources get loaded. If you look for your favicon.ico, what does it say in the status column. Do you get 200, 404 or what? – Christofer Eliasson Dec 08 '12 at 18:41
All it shows is my site name and the local link below it. I see all of the columns but all they are showing ids the status for the page itself. – Nick Dec 08 '12 at 18:46
Yeah that worked, thanks. I'll use Firefox or IE to test out the favicon. – Nick Dec 08 '12 at 20:40
@ChristoferEliasson: It doesn't show up in firefox for me either, I tried base64, deleting the cache, have the **favicion.ico** file in the same directory as my **html** page, renaming _favicon.ico_ also didn't work, what worked was using the tag from **SO**, by the way your tag's href url has changed since. – aspiring1 May 23 '20 at 21:18

score 34 · Answer 2 · answered Apr 02 '17 at 21:43

34

I've found that (at Chrome 56, OSX) the favicon state appears to be cached for the browser lifetime, so if a favicon isn't being loaded, it won't be until after restarting Chrome. It appears that it doesn't show up in the "application" tab in dev tools and isn't cleared by a hard reload or 'Clear site data'.

answered Apr 02 '17 at 21:43

Rich

885
12
15

1

Yes this works. Close all the windows of Chrome and restart Chrome. Thanks! – WesternGun Mar 21 '18 at 16:37
I just had to close the tab and reopen it. I didn't have to restart all of Chrome. – Don Kirkby Jul 17 '18 at 19:39
2

I confirm this answer. What Don Kirkby said is wrong. You indeed have to quit the browser and open it again. Once the browser gets a 404 for a favicon request, it won't send a favicon request to that domain until the browser is restarted. Incognito mode or Developer Tools -> Application -> Clear storage -> Clear site data WILL NOT work. – Utku Nov 05 '20 at 22:23

pokeybit · Answer 3 · 2018-04-21T11:23:47.307

22

A common issue where the favicon will not show up when expected is cache, if your .htaccess for example reads: ExpiresByType image/x-icon "access plus 1 month"

Then simply add a random value to your favicon reference: <link rel="shortcut icon" href="https://example.com/favicon.ico?r=31241" type="image/x-icon" />

Works every time for me even with heavy caching.

edited Apr 21 '18 at 11:23

answered Apr 21 '15 at 05:40

pokeybit

1,032
11
18

4

Heh. Chrome didn't even try to load my favicon (no 404, no network request in the dev console). Then I added ?v=1 and boom! Done. Thanks! – REJH Feb 11 '18 at 13:50
Didn't work for me but going to keep this in mind incase it happens again. Thanks! – dogonaroof Jan 15 '19 at 09:49

score 11 · Answer 4 · answered Aug 16 '16 at 09:50

Another reason for Chrome not displaying the favicon is that it still remembers a time when the site in question did not have a favicon or the favicon was incorrectly configured.

You're going to want to completely wipe the favicon cache:

Exit all running Chrome processes.

Delete the Favicons file in your user data folder. For example:

C:\Users\me\AppData\Local\Google\Chrome\User Data\Default\Favicons

This can not be resolved by clearing the browser cache, as it does not affect the Favicons container.

Also note that, contrary to what you might read online, requests to favicon resources are not shown in the Network panel of the DevTools. Under very rare circumstances, one such request may show up there, but it is highly unlikely and the DevTools will not help you solve your favicon woes.

Yes; Thank you! I could see using fiddler (proxy) that it wasn't requesting a favicon.ico, but after deleting this file, it did. Thanks! — Grezzo, Nov 28 '16 at 09:59

score 4 · Answer 5 · answered Apr 11 '15 at 18:59

1) Clear your chache. http://support.google.com/chrome/bin/answer.py?hl=en&answer=95582 And test another browser, lets say safari. How did you import the favicon?

2) How you should add it:

Normal favicon:

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

PNG/GIF favicon:

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

3) Another thing could be the problem that chrome can't display favicons, if it's local (not uploaded to a webserver).

4) Try to rename it from favicon.{whatever} to {yourfaviconname}.{whatever} but I would suggest you to still have the normal favicon. This has solved my issue on IE.

5) Found another solution for this which works great! I simply added my favicon as Base64 Encoded Image directly inside the tag like this:

<link href="data:image/x-icon;base64,AAABAAIAEBAAAAEAIABoBAAAJgAAACAgAAABACAAqBAAAI4EAAAoAAAAEAAAACAAAAABACAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AIaDgv+Gg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv////8A////AP///wD///8A////AP///wCGg4L/////AP///wD///8A////AP///wD///8A////AP///wCGg4L/////AP///wD///8A////AP///wD///8AhoOC/////wCGg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv////8AhoOC/////wD///8A////AP///wD///8A////AIaDgv////8A////AP///wD///8A////AP///wD///8A////AIaDgv////8A////AP///wD///8A////AP///wCGg4L/////AHCMqP9wjKj/cIyo/3CMqP9wjKj/cIyo/////wCGg4L/////AP///wD///8A////AP///wD///8AhoOC/////wBTlsIAU5bCAFOWwgBTlsIAU5bCM1OWwnP///8AhoOC/////wD///8A////AP///wD///8A////AP///wD///8AU5bCBlOWwndTlsLHU5bC+FOWwv1TlsLR////AP///wD///8A////AP///wD///8A////AP///wD///8A////AFOWwvtTlsLuU5bCu1OWwlc2k9cANpPXqjaT19H///8A////AP///wD///8A////AP///wD///8A////AP///wBTlsIGNpPXADaT1wA2k9dINpPX8TaT1+40ktpDH4r2tB+K9hL///8A////AP///wD///8A////AP///wD///8A////ADaT1wY2k9e7NpPX/TaT16AfivYGH4r23R+K9u4tg/WQLoL1mP///wD///8A////AP///wD///8A////AP///wA2k9fuNpPX5zaT1zMfivYGH4r23R+K9uwjiPYXLoL1+S6C9W7///8A////AP///wD///8A////AP///wD///8ANpPXLjaT1wAfivYGH4r22x+K9usfivYSLoL1oC6C9esugvUA////AP///wD///8A////AP///wD///8A////AP///wD///8AH4r2zx+K9usfivYSLoL1DC6C9fwugvVXLoL1AP///wD///8A////AP///wD///8A////AP///wD///8A////AB+K9kgfivYMH4r2AC6C9bEugvXhLoL1AC6C9QD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAugvXyLoL1SC6C9QAugvUA////AP//AADgBwAA7/cAAOgXAADv9wAA6BcAAO+XAAD4HwAA+E8AAPsDAAD8AQAA/AEAAP0DAAD/AwAA/ycAAP/nAAAoAAAAIAAAAEAAAAABACAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/////wD///8AhISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP8AAAAA////AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/////AP///wCEhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/wAAAAD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP/4+vsA4ujuAOLo7gDi6O4A4ujuAN3k6wDZ4OgA2eDoANng6ADZ4OgA2eDoANng6ADW3uYAJS84APj6+wCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/9Xd5QBwjKgAcIyoRnCMqGRwjKhxcIyogHCMqI9wjKidcIyoq3CMqLlwjKjHcIyo1HCMqLhogpwA/f7+AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/xtHcAHCMqABwjKjAcIyo/3CMqP9wjKj/cIyo/3CMqP9wjKj/cIyo/3CMqP9wjKj/cIyo4EdZawD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP+2xNMAcIyoAHCMqJhwjKjPcIyowHCMqLFwjKijcoymlXSMpIh0jKR6co2mbG+OqGFqj61zXZO4AeXv9gCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/6i5ygDF0dwAIiozACQyPQAoP1AALlBmADhlggBblLkGVJbBPFOWwnxTlsK5U5bC9FOWwv9TlsIp3erzAISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAALztHAAAAAAAuU2sAU5bCClOWwkNTlsKAU5bCwFOWwvhTlsL/U5bC/1OWwv9TlsL/U5bC/ViVvVcXOFAAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAALDhEALVFoAFOWwjpTlsL6U5bC/1OWwv9TlsL/U5bC/1OWwvxTlsLIV5W+i2CRs0xHi71TKYzUnyuM0gIJHi4AAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAACtNZABTlsIAU5bCD1OWwv1TlsL6U5bCxFOWwoRVlsBHZJKwDCNObAA8icJAKYzUwimM1P8pjNT/KYzUWCaCxgALLUsAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAApS2EAU5bCAFOWwgBTlsIAU5bCNVOWwgg+cJEAIT1QABU/XQA1isg4KYzUuymM1P8pjNT/KYzU/ymM1LAti9E0JYvmDhdouAAAAAAAAAAAAP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AFyk1AE+PuQBTlsIAU5bCAER7nwAmRVoADBojABRFaQAwi80xKYzUsymM1P8pjNT/KYzU/ymM1LgsjNE2MovXFB+K9MUfivbBH4r2BgcdNAARQH8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAQIDABIgKgAPGiIABRMcABdQeQAti9AqKYzUrCmM1P8pjNT/KYzU/ymM1MAqjNM9HmqmACWK7SIfivbZH4r2/x+K9vsuiudAFE2YACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAABhQfABtejgAoitEAKYzUACmM1JQpjNT/KYzU/ymM1MgpjNREH2mgABlosQAfivY0H4r26R+K9v8fivbyKIrtR0CB1SggevTQIHr0Nv///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAACBwsAJX2+ACmM1AApjNQAKYzUGSmM1MYpjNRMInWxABNHdQAcfuEAH4r2Sx+K9vUfivb/H4r25iGK9DE2gt4EIHr0yyB69P8gevTQ////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAOMUsAKYzUACmM1AApjNQAJX6/ABE7WgAUWJwAH4r2AB+K9mYfivb9H4r2/x+K9tYfivYfG27RACB69HsgevT/IHr0+yB69DL///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAAfaJ4AJ4XKABVGagAKKkoAG3raAB+K9gEfivaEH4r2/x+K9v8fivbCH4r2EB133wAgevQsIHr0+SB69P8gevSAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAAAAAAAAAAAAAUSGwAFERwAElCOAB+J9QAfivYAH4r2lx+K9v8fivb/H4r2qR+K9gYefuoAIHr0BSB69M4gevT/IHr00CB69AUgevQA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAkqSgAfivYAH4r2AB+K9gAfivZLH4r2/R+K9osfivYBH4PwACB69AAgevSAIHr0/yB69PkgevQwIHr0ACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAAAAAAAEEiAAB+K9gAfivYAH4r2AB+K9gAfivYsH4r2AB+G8wAge/QAIHr0MCB69PsgevT/IHr0eyB69AAgevQAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAXZrYAH4r2AB+K9gAfivYAH4r2AB+K9gAfifUAIHz0ACB69AcgevTQIHr0/yB69MwgevQEIHr0ACB69AAgevQA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAAAAAAAAIDAB6E6gAfivYAH4r2AB+K9gAfivYAH4r2ACB+9QAgevQAIHr0fCB69P8gevT5IHr0LCB69AAgevQAIHr0ACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAABBAcAEUqDAB6E6wAfivYAH4r2AB+K9gAggPUAIHr0ACB69AAgevQTIHr0qCB69HYgevQAIHr0ACB69AAgevQAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP////////////////wAAH/8AAB//P/+f/z//n/8wAZ//MAGf/z//n/8wAZ//MAGf/zAAn/8/gJ//+AD///AAf//wEH//+cA///8AH//8BB///BgH//xwB///4If//4EP//+CD///hh///9w////4P///+H////j////////////" rel="icon" type="image/x-icon" />

Used this page here for this: http://www.motobit.com/util/base64-decoder-encoder.asp

Thank you for #5)! It helped me:) – InaFK Aug 17 '18 at 15:22 — InaFK, Aug 17 '18 at 15:22

Asaf · Answer 6 · 2019-03-31T12:03:04.560

2

For me the problem was that there was a div above it (which of course shouldn't have been in the head, but it happens). Firefox didn't mind, but Chrome did.

edited Mar 31 '19 at 12:03

answered Jul 02 '18 at 12:09

Asaf

616
2
6
17

Blake · Answer 7 · 2012-12-08T18:58:18.527

1

It doesn't look like Chrome allows you to display the favicon in the address bar...

http://en.wikipedia.org/wiki/Favicon#Use_of_favicon

I've also seen it done like this. Don't know if it would make a difference or not.

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

edited Dec 08 '12 at 18:58

answered Dec 08 '12 at 18:42

Blake

756
3
16
34

5

Chrome doesn't show the favicon in the address bar, but it does show it on the tab, next to the title. Which I believe is what OP is asking for, since he says that he can see it for other pages. – Christofer Eliasson Dec 08 '12 at 18:44
1

Yeah I was looking for the favicon in the tab. – Nick Dec 08 '12 at 18:48
Oops, my bad, read it a little too quickly. If you're 100% sure the image you have is referenced correctly then it should be working... Do you have more than one line of code to specify a favicon? I've seen people with several, each formatted for a different browser, but Chrome would read the first line and ignore the others... – Blake Dec 08 '12 at 18:50
1

That's strange. You always used to just be able to drop it in the root folder of your site and it would display without a bit of code... not that it was good practice but still. Clear your cache? – Blake Dec 08 '12 at 19:03

score 1 · Answer 8 · answered Feb 13 '19 at 13:13

1

I moved ico file to root folder and link it. It worked for me. Also, in chrome, I have to wait 30 mins to get cache cleared and new changes to take affect.

answered Feb 13 '19 at 13:13

Amjith

445
5
15

Chrome seems to ignore whatever path you use for your icon and just looks at the root folder. Seems like we're back to the bad old days where you have to cater for every browser. – Savage May 03 '23 at 18:49

score 1 · Answer 9 · answered Aug 16 '21 at 13:49

This is a bug in Chrome and Chrome only. To trigger the bug:

Set in your HTML <head> block: <link rel="shortcut icon" type="image/ico" href="favicon.ico">
Load the page with one favicon.ico image, then replace the favicon.ico file with a different one. You will not be able to get the new one to display, even if you use Classic Cache Killer or use incognito mode (security breach, anyone?). You can use another browser to confirm.

To solve the bug: Do a forced reload, by pressing shift + F5.

This is such a massive bug in Chrome, that it's already been reported to their developers, who have suggested using this method as solving the their bugs. (Source: GoogleSupport.)

score 0 · Answer 10 · answered Sep 25 '14 at 08:29

0

This trick works: add this script in header or masterPage for Example

    var link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = '/favicon.png';

and will be cached. It's not optimal, but it works.

answered Sep 25 '14 at 08:29

Hima

11
2

2

If `/favicon.png` really is a PNG image, then you should be responding with an `image/png` mime-type (value of the `type` attribute), not `image/x-icon`. If this is working then it's because the server (or browser) is overriding this. However, setting this with JavaScript, rather than hardcoded in the HTML is not to be recommended. – DocRoot May 27 '16 at 23:24

score 0 · Answer 11 · answered Apr 09 '15 at 12:25

The path must be via the URI (full).

Like: http://example.com/favicon.png

so in your case:

<!DOCTYPE html>
<html> 
    <head profile="http://www.w3.org/2005/10/profile">
        <title></title>
        <link rel="shortcut icon" 
              type="image/png" 
              href=" http://example.com/favicon.png" />
    </head>
    <body>
    </body>
</html>

Ref: http://www.w3.org/2005/10/howto-favicon

Matthew Lock · Answer 12 · 2018-05-25T08:13:45.403

0

Note if you have so many tabs open that Google Chrome is only showing the favicons then Google Chrome won't show the favicon for the selected tab, so if you keep reloading the tab with your page loaded in order to see your new favicon you will only see the text of your page's title.

You will need to reload your page, and then select a different tab in order to see your favicon.

edited May 25 '18 at 08:13

answered May 25 '18 at 08:07

Matthew Lock

13,144
12
92
130

score 0 · Answer 13 · edited Jun 20 '20 at 09:12

These are the locations where browsers store the Temporary data in Linux:

Note: you can see hidden files in File Manager using Ctrl + H

for Terminal use the command ls -la

Chromium

~/.cache/chromium/[profile]/Cache/

Google Chrome

~/.cache/google-chrome/[profile]/Cache/

Also, Chromium and Google Chrome store some additional cache at

~/.config/chromium/[profile]/Application Cache/Cache/

and

~/.config/google-chrome/[profile]/Application Cache/Cache/

and generally here:

/tmp/

so to apply new FAVICON or try to show it up is to clean them

make sure u are inside each of these directories use the command:

rm -rf *

score 0 · Answer 14 · answered Jan 31 '22 at 23:34

0

There's one more possibility that no-one else seems to have mentioned: You may have exported your .ico file with settings that Chrome does not support.

Another possibility is your .ico lacks a 16px image, and so may display nothing, even though you have other resolutions.

I would suggest trying different settings on your .ico exporter, or trying another one altogether.

answered Jan 31 '22 at 23:34

Miles B Huff

98
1
2
9

I know Nick (the OP) has already resolved his issue, but I wanted to provide this answer as a way to help people having an issue with the icon itself, as the symptoms are identical. – Miles B Huff Jan 31 '22 at 23:34

score 0 · Answer 15 · answered Apr 11 '22 at 00:00

0

One potential problem is that the server is not replying with a correct file type when the browser fetches the favicon, using Base64 is a good workaround

answered Apr 11 '22 at 00:00

Iyad Ahmed

80
2
12

score -2 · Answer 16 · answered Aug 21 '17 at 14:28

-2

This issue was driving me nuts! The solution is quite easy actually, just add the following to the header tag:

<link rel="profile" href="http://gmpg.org/xfn/11">

For example:

<!DOCTYPE html>
<html> 
    <head>
        <title></title>
        <link rel="profile" href="http://gmpg.org/xfn/11">
        <link rel="icon" href="/favicon.ico" />

answered Aug 21 '17 at 14:28

Mike

1,258
12
12

3

-1; the XHTML Friends Network is a set of `rel` values for annotating links to webpages with the relationship you have with the target page's author. It is not even slightly related to favicons. If your favicon started showing up after you added this tag, I guarantee that it was a coincidence. – Mark Amery Nov 01 '18 at 11:57

score -4 · Answer 17 · answered Dec 08 '12 at 18:24

-4

Your html is completely wrong for starters, there should not be a div within your head section, nor after your body section. I suggest you look into correct html first before starting to work with favicons etc.

answered Dec 08 '12 at 18:24

Jon Taylor

7,865
5
30
55

2

Would be nice if the down voter commented as to why my answer is wrong. – Jon Taylor Dec 08 '12 at 18:29
I didnt have a div in the head tag. But you're right I'm kind of new to the Div thing too. – Nick Dec 08 '12 at 18:30
1

@MikeSmithDev If he can't write valid html then his results will always be unpredictable. This is the first and most important step to fixing his problem. – Jon Taylor Dec 08 '12 at 18:30
@Nick I meant before the body tag. You have a div between the head and the body and also one bwteeen the end of the body and end of the html tags. – Jon Taylor Dec 08 '12 at 18:31
But I can write basic HTML, Div tags aren't exactly basic. – Nick Dec 08 '12 at 18:31
@Nick div tags are as basic as any other tag. Styling them may be a little more tricky but in terms of valid html you have them in completely the wrong place. Anything that is part of the page itself should be placed within the `` and `` tags. – Jon Taylor Dec 08 '12 at 18:32
My thinking was that the div would be for a logo or navigation bar outside of the actual page. But I understand now. – Nick Dec 08 '12 at 18:36
10

@JonTaylor I fully agree with you, but your suggestion would be more fitting in a comment. When another user with the same issue comes to this page, your answer is not going to help. – MikeSmithDev Dec 08 '12 at 22:36

HTML Favicon.ico won't show on Google Chrome

17 Answers17

Linked

Related