HTML Favicon.ico won't show on Google Chrome

Asked 8/12, 2012 at 18:19 Answered 1/12, 2023 at 11:34

Solved html google-chrome hyperlink favicon

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>

Intendant answered 8/12, 2012 at 18:19 Comment(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 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.

Gaynellegayner answered 8/12, 2012 at 18:23 Comment(4)

@Intendant 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? – Gaynellegayner 8/12, 2012 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. – Intendant 8/12, 2012 at 18:46

Yeah that worked, thanks. I'll use Firefox or IE to test out the favicon. – Intendant 8/12, 2012 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. – Cosmetician 23/5, 2020 at 21:18

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'.

Cableway answered 2/4, 2017 at 21:43 Comment(3)

Yes this works. Close all the windows of Chrome and restart Chrome. Thanks! – Vanya 21/3, 2018 at 16:37

I just had to close the tab and reopen it. I didn't have to restart all of Chrome. – Millard 17/7, 2018 at 19:39

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. – Canebrake 5/11, 2020 at 22:23

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.

Cosmism answered 21/4, 2015 at 5:40 Comment(2)

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! – Goldfarb 11/2, 2018 at 13:50

Didn't work for me but going to keep this in mind incase it happens again. Thanks! – Twosided 15/1, 2019 at 9:49

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.

Credendum answered 16/8, 2016 at 9:50 Comment(1)

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! – Crucifixion 28/11, 2016 at 9: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

Mulberry answered 11/4, 2015 at 18:59 Comment(1)

Thank you for #5)! It helped me:) – Kosygin 17/8, 2018 at 15:22

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.

Melisa answered 2/7, 2018 at 12:9 Comment(0)

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" />

Lepidosiren answered 8/12, 2012 at 18:42 Comment(4)

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. – Gaynellegayner 8/12, 2012 at 18:44

Yeah I was looking for the favicon in the tab. – Intendant 8/12, 2012 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... – Lepidosiren 8/12, 2012 at 18:50

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? – Lepidosiren 8/12, 2012 at 19:3

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.

Villegas answered 13/2, 2019 at 13:13 Comment(1)

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. – Merc 3/5, 2023 at 18: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.)

Impatient answered 16/8, 2021 at 13:49 Comment(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.

Hindsight answered 25/9, 2014 at 8:29 Comment(1)

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. – Xeres 27/5, 2016 at 23:24

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

Gainly answered 9/4, 2015 at 12:25 Comment(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.

Californium answered 25/5, 2018 at 8:7 Comment(0)

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 *

Cinda answered 7/11, 2019 at 9:39 Comment(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.

Avis answered 31/1, 2022 at 23:34 Comment(1)

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. – Avis 31/1, 2022 at 23:34

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

Damiandamiani answered 11/4, 2022 at 0:0 Comment(0)

Update: I recently (in 2023) ran into a similar issue where I could not render my favicon.ico file in google chrome.

Notice that the syntax rel="shortcut icon" is not to be used anymore. Instead, you should be using: rel="icon".

To solve the issue, assuming your .ico file is suitable, there are two things you may want to check:

Try renaming the favicon.ico
Check your file structure

Now, a solution to this issue is to rename the favicon.ico file.

For instance, this html code with the filename favicon.ico does not render the favicon in Chrome:

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

But simply renaming the file to favicon2.ico actually works:

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

If you are not getting and error message, your file structure is probably ok. The above code works when added into the file layout.html, with this file structure:

├── app
│   ├── __init__.py
│   ├── static
│   │   ├── favicon2.ico
│   │   └── styles.css
│   └── templates
│       ├── index.html
│       ├── layout.html
...

In case both the html file and the .ico files are in the same folder, you should change href to this instead:

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

Rema answered 1/12, 2023 at 11:34 Comment(0)

-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" />

Amund answered 21/8, 2017 at 14:28 Comment(1)

-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. – Forbis 1/11, 2018 at 11:57

-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.

Margetts answered 8/12, 2012 at 18:24 Comment(8)

Would be nice if the down voter commented as to why my answer is wrong. – Margetts 8/12, 2012 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. – Intendant 8/12, 2012 at 18:30

@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. – Margetts 8/12, 2012 at 18:30

@Intendant 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. – Margetts 8/12, 2012 at 18:31

But I can write basic HTML, Div tags aren't exactly basic. – Intendant 8/12, 2012 at 18:31

@Intendant 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 <body> and </body> tags. – Margetts 8/12, 2012 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. – Intendant 8/12, 2012 at 18:36

@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. – Laureen 8/12, 2012 at 22:36

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags