I have a favicon in a website that it works in all browsers, except of Microsoft Edge. What's the issue?
My code:
<link rel="shortcut icon" href="../img/favicon.ico" />
<link rel="icon" href="../img/favicon.ico" />
<link rel="apple-touch-icon-precomposed" href="../img/favicon.ico" />
I have also tried with type="image/x-icon".
At the moment it seems as though favicon will only worked after you have deployed your site and never on localhost.
Try deploying the site to see if it works.
Related
My website favicon.ico is not showing when using SSL links. Seems to work fine with non-SSL.
But the problem is I have other two pages getting viewed over SSL that shows the correct favicon.
This is the favicon.ico link (works fine).
https://ricardoconceicao.com/favicon.ico
This is the link to the page.
https://ricardoconceicao.com/index2.html
Here is the code used:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
Any ideas what is wrong?
I've tested your code and the link to the favicon isn't correct - this may be after following the suggestion that was made by another post on this thread.
Replace the current link rel tag you have on https://ricardoconceicao.com/index2.html
With
<link rel="icon" href="/favicon.ico" type="image/x-icon">
And it should work just fine, eventually. As others have mentioned, it may just be a caching issue. Either way, rest assured that you are not going crazy, because it definitely should be working. I went onto your page and edited the link rel tag in Chrome Dev Tools with the one I've mentioned in this post and the favicon appeared immediately. Anyway, hope that helps :)
Give the full URL for favicon path. As follows
<link rel="shortcut icon" href="https://ricardoconceicao.com/favicon.ico" type="image/x-icon" />
Adding two dots before your current image path might do the trick. If not, then add the full path.
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<link rel="icon" href="../favicon.ico" type="image/x-icon" />
I don't think this should be treated as a duplicate since the first question didn't get a proper answer
I have a WP page running and for some reason I can't get Edge to display the favicon. It works everywhere, even in IE11. The first two lines are mine, the others are generated by WP. I doesn't work on deployed server either.
<link rel="icon" sizes="16x16" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http://192.168.1.59/wp-content/uploads/logo.jpg" sizes="32x32" />
Please try
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Note : MS Edge won't display favicon for locally hosted sites.
I have used the online tool RealFaviconGenerator to generate the favicons for my website, to support a variety of devices and browsers.
Most of my favicons have a transparent background, except for the apple-touch-icons as iOS adds a black background, which I do not want. So, I have manually added a white background and used that image instead for iOS.
The favicons work well with all the devices I have tested so far, except for Google Chrome on iOS (specifically, an iPad mini 1). What I want is the browser to use one of the icons with a transparent background, like it does on a computer (probably either favicon.ico or favicon.png). However, Chrome is instead using one of the apple-touch-icons, which has a white background.
My question is: Is this behaviour normal for Chrome on all iOS devices, or am I doing something wrong?
Additional Information:
I am not sure if this is relevant, but I am adding it anyway.
In order to make it easier to organise the favicon images, I put them all in a separate folder (instead of the root directory). However, I left the favicon.ico and browserconfig.xml files in the root folder, and removed the explicit links as the FAQ of the generator recommends so:
When your favicon is in the root directory, RealFaviconGenerator does
not generate this code. This is because it somehow confuses some other
browsers like Chrome. And since IE looks for a file named favicon.ico
anyway, the best solution is to not even talk about it.
By default, Internet Explorer 11 looks for browserconfig.xml at the
root of the web site.
Any help will be gladly accepted!
UPDATE:
This is what I have in my <head> now. Notice that I have also added the favicon.ico as a <link>. When I tried using this, it seemed to work fine at first, with iOS Chrome displaying the correct favicon. However, when I refreshed the page once, the favicon went back to the earlier white background one and remained the same.
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="57x57" href="/pics/icons/apple-touch-icon-57x57.png?v=2">
<link rel="apple-touch-icon" sizes="60x60" href="/pics/icons/apple-touch-icon-60x60.png?v=2">
<link rel="apple-touch-icon" sizes="72x72" href="/pics/icons/apple-touch-icon-72x72.png?v=2">
<link rel="apple-touch-icon" sizes="76x76" href="/pics/icons/apple-touch-icon-76x76.png?v=2">
<link rel="apple-touch-icon" sizes="114x114" href="/pics/icons/apple-touch-icon-114x114.png?v=2">
<link rel="apple-touch-icon" sizes="120x120" href="/pics/icons/apple-touch-icon-120x120.png?v=2">
<link rel="apple-touch-icon" sizes="144x144" href="/pics/icons/apple-touch-icon-144x144.png?v=2">
<link rel="apple-touch-icon" sizes="152x152" href="/pics/icons/apple-touch-icon-152x152.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/pics/icons/apple-touch-icon-180x180.png?v=2">
<link rel="icon" type="image/png" href="/pics/icons/favicon-32x32.png?v=2" sizes="32x32">
<link rel="icon" type="image/png" href="/pics/icons/android-chrome-192x192.png?v=2" sizes="192x192">
<link rel="icon" type="image/png" href="/pics/icons/favicon-96x96.png?v=2" sizes="96x96">
<link rel="icon" type="image/png" href="/pics/icons/favicon-16x16.png?v=2" sizes="16x16">
<link rel="manifest" href="/pics/icons/manifest.json?v=2">
<link rel="mask-icon" href="/pics/icons/safari-pinned-tab.svg?v=2" color="#5bbad5">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="msapplication-TileImage" content="/pics/icons/mstile-144x144.png?v=2">
<meta name="theme-color" content="#ffffff">
What you observe is normal, even if that's not what you want: iOS Chrome takes the Apple Touch icon for bookmark and favicon.ico for the regular tab icon. On an iPad Mini, it takes the 57x57 Touch icon and the embedded 16x16 pic of favicon.ico.
Android Chrome is not that different:
Add to home screen icon (no equivalent with iOS Chrome), tab icon and task switcher icon: icons declared in manifest.json.
Bookmark icon: the Apple Touch icon. Yep.
Long story short: there is no workaround. It would worth trying to remove all touch icons to see how iOS Chrome behaves, but this is not something you will do in production.
Oh, and as the author of RealFaviconGenerator, I congratulate you for this excellent choice :)
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
or
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Have you tried this inside of your <head>? It works fine on my website. I have just tested it on Google Chrome for IOS.
The favicon that I am trying to use for a site is showing up on the Firefox tabs, but not on the Chrome tabs.
Yes, there are some problem with the chrome while you work on a local machine.
Try uploading your webpages to any web hosting site and there with http:// this will work fine with every browser.
IE may also not work for this on local machine. Try it in Firefox of safari
Copy the code, this will surely work:
<head> <link rel = "shortcut icon" href=".\favicon.ico"> </head>
Have a look at: https://stackoverflow.com/a/16375622/1581725
Here again if someone first see this question:
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
On Local Host I was having this problem
So I changed the url
from
<link rel="icon" type="image/x-icon" href="/static/images/system/favicon.ico">
to
<link rel="icon" type="image/x-icon" href="../static/images/system/favicon.ico">
Notice the double fullstops before the href
The Question
When my website is local (using the file:// protocol), the favicon doesn't show up in Chrome or Safari, but it works in Firefox (all on a mac). However, when the exact same site is actually hosted, the favicon works fine in all of the browsers I tried. Why do the webkit browsers not display local favicons?
Details
The favicon.ico file is in the same directory as the index.html page. I am using the following code, although I've tried several variations of it:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
Since the favicon works when accessed over http://, I doubt that there's something wrong with the way I'm including it, but you never know...
Update
I've found a few forum posts (nothing too official) that suggest that this is by design, but none of them give the rationale. Also, it sounds like some versions of IE have the same problem. Is there some security risk with local favicons? (I know that some browsers have issues with local cookies, for example.)
Disclaimer: There seem to be a ton of questions in a similar vein, but I haven't found exactly this one. (In fact I have basically the same question as this one, but none of the answers there worked for me.)
You can use Base64 data of an image. Put something like this:
<link href="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAD9/f0F/Pz8DP///wD///8P////Dv///xL///8P////A////wD///8A/v7+Cf///wX///8A////APv7+wr9/f0D+/v7Dv///wb///81+vv8i/v7/Iv3+PqL4+nxi+ru9JHy9Piu5+zzru3w9ZD+/v5x/v7+H////wr///8A9/f3H/7+/g7///8J////HNDX5Pyaq8j/m6zJ/5esy/+QpcX/larK/5uwzv+MoMH/mqrG/5qlv+7Q0Nty/f3+Af///wD///8A/v7+A////wz+/v6b2d/q/4abvf+Emr7/jKHD/5Gnyf+Uqsz/fpW5/4mXuP/U1OL/e3ui+MPE0l7///8A////AP///wD///8P////Xa680/9/lrr/kafJ/5yy0/+WrM7/nbPT/52uyv+ktM7/1NTi/8LC1f+lpr3n////AP///wD///8A////AP7+/mDo7PL/ytPi/5yv0fehsuXuuMvl0Kq81drS2uf8+/z9bff3+SG5uM1r8vL1ff///wD///8A////AP///wr+/v4H/v7+jufq8umIg/Sut7L9YKul/W7PzvlMnZn03Ozq/x/+/v4H////AP///wD///8A////AP///wD///8A5OH/IpuS/pF3cfPploz/hH5y/6F/dP+gl47/gkw++e7Hwv9Fta//XPj4/gf///8A////AP///wD///8A+vn/BoyB/pGlnf5vfHfxy4mA/JlIOf/lmZD+f1lK/89kWPrPmZD+f9zY/yu3sP5ar6j/ZP///wD///8A6uj/GbSt/l6imv9yVkf/1HBm+MJ5eOrlhX/1s2JY+dRpYPfPv7/zb4+F/41WR//Uloz/hI6E/47///8A////AOro/xmnn/9teW3/qH5y/6HKxf9B9/n7Fc3N9VfMyvlQraj6cbWv/1zj4f4h2tf/Lks7/+NmWP+/0s7/OP///wCvqP9kjoT/jo6E/46Sif+I+vn/Bt3a/ypsX/+5////AH90/6Dj4f4h0Mz/OrWv/1yyq/9gkon/iNzY/yv///8A19P/MvLx/g////8A////APX0/wxvYv6119P/MtzY/ytmWP+/oZj/df///wBQQP/dt7D+Wv///wD///8A////AP///wD///8A////AKyk/2makf9+UUL/283J/z/l4/8f1dH/M////wD///8At7D+Wv39/gH///8A////AP///wD///8A////AP///wDa1/8u2tf/LtrX/y719P8M////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A//8AAOAfAADgBwAA4AMAAPABAADwHwAA8d8AAPAfAADonwAA8CEAAOf5AADGvQAA/bcAAP3/AAD//wAA//8AAA==" rel="icon" type="image/x-icon" />
into the <head> section of an html file.
Base64 data can be received, for example, by favicon.cc
Local file:// and chrome:
For a local favicon in Chrome - according to an old thread found on linux command it should be possible to place a local favicon with the file:// if it's in the your /Downloads/ directory. So I tried it like this:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="shortcut icon" type="image/x-icon" href="file://localhost/Users/dominikangerer/Downloads/favicon.ico">
</head>
<body>
<h1>Testing</h1>
</body>
</html>
I don't have a apache or anything running. It's simply the way chrome can access local files using the file://. If I try using the favicon from another part of my filesystem it doesn't seems to work - so maybe that's a solution for chrome.
Local file:// and Safari:
Still looking for a way - above code doesn't work for my up2date safari.
Interesting topic's:
Security in depth loca web pages (Chromium Blog)
General troubleshooting guide for your favicons:
Have a look at: https://stackoverflow.com/a/16375622/1581725
This is a known issue for years. Your code is right, and I don't think you'll find any way to allow Chrome or IE to include a favicon with a non-remotely way.
Some time ago, I tried a lot of ways, none works, and I wasn't able to find any browser documentation on this point.
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.png" type="image/png" />
<link rel="shortcut icon" href="C:/files/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="file:///C:/files/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="file:///C|/files/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="file://localhost/C:/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="file://127.0.0.1/C:/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="file://localhost/C|/favicon.ico" type="image/x-icon" />
For Chrome, favicons are stored in a file : User\AppData\Local\Google\Chrome\User Data\Default\Favicons. We can guess local favicons aren't stored in.
Once I've solved it using two lines of code
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
and also keep the favicon.ico named exatly this and in the webroot folder, if it helps.
I solved this by renaming favicon.ico as new_name.ico. And it works in Safari and Chrome.
<head>
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='logo.ico') }}">
</head>
Well I have the problem similar with Google Chrome the favicon don't show correctly the problem was the .ico I was using was 16x16 and 32x32 I just used a bigger image and it works for all browsers.
Works In Chrome All you need is a folder with the icon and the website then the html should look like this (MAKE SURE THE ICON IS NAMED favicon.ico !)
link rel='shortcut icon' type='image/x-icon' href='C:\Website/favicon.ico