I am using this format for linking to my favicon.
My favicon.ico file is in the same directory as my HTML files, but for some reason it does not appear when I upload it to my web server. I cleared my cache, closed my browser, and re-opened it, but the favicon will still not appear.
If someone could explain why this is I would really appreciate it.
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
Edit: Also I do not know if this would affect it, but there is a default favicon that appears on my web server. I do not know if it is possible to overwrite this.
Edit 2: Not sure if this makes a difference, but this is the basic structure of my head.
<head>
<meta charset="utf-8">
<meta name="author" content="">
<meta name="description" content="Home">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
</head>
According to this answer it looks like it should be rel="icon" instead of rel="shortcut icon".
Also, if your favicon.ico is at the root of your server http://example.com/favicon.ico and your page is in a subdirectory http://example.com/blog/, the browser will try searching for favicon.ico inside the current directory http://example.com/blog/favicon.ico, which would result in a 404 error; to avoid that, you should set href="/favicon.ico" so it always points to the root directory, no matter in what subdirectory you are.
They usually cached. force to refresh as well.
get it from your directory
Sometimes /favicon.ico helps. Try this though:
<link rel= "shortcut icon" media="all" type="image/x-icon" href="http://URL.tld/favicon.ico" />
<link rel= "icon" media="all" type="image/vnd.microsoft.icon" href="http://URL.tld/favicon.ico" />
This adds IE support.
Based on type's attribute value.
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
1-Create an image folder on yout root directory (the same as index.html) and just put your favicon.ico inside this folder.
2-href="image/favicon.ico"
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" />
First, I should mention that I am hosting on a .vip website. My code is simple:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="icon" href="img/Pic.ico" type="image/x-icon">
</head>
This works when I host locally through MAMP, but neither the title nor the favicon are showing up on Chrome etc. on any desktop I try.
To add to the mystery (which may be related) none of my extensions are appearing on the URL. For example, if I have a link to a page "dj_page.html", whereas on MAMP it does show [SITE]/dj_page.html, and on my website I would like it to show
[SITE].vip/dj_page.html
Instead it just remains at
[SITE].vip
I have cleared the cache on Safari, tried several different computers, but not even the title is showing up properly. Also, does not work if I change the code to, for example,
<link rel="icon" type="image/png" href="http://otranscribe.com/favicon.png">
You can use this:
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
SOLUTION: I was hosting on Heroku and nothing was working. Switched over to Azure and everything worked no problems...
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 been searching everywhere for where to put my favicon. Currently I have it in my document root(/var/www/favicon.ico)(I am using apache2 on ubuntu), and my code looks like this in my index.html (The only other file in /var/www)
<link rel="shortcut icon" href="/var/www/favicon.ico" type="image/x-icon" />
Is it supposed to go in my ServerRoot?
I have tried clearing chromes cache, but every time all I get is the same freenom (My domain name provider's) favicon. When I go to my website http://www.website.cf/favicon.ico, I can see their 16*16 icon.
Sorry if I have botched some terminology, I'm a linux/apache newb. Thanks for any help!
Put it in your web root. This is the default location and web browsers will always look there first. Then you won't need to use a <link> tag but if you do you would use:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Based on your cpode sample above that would be in your /var/www directory.
Put the fevicon icon in root directory(Default Location of website) and use this code:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
<link rel="icon" href="/favicon.ico" type="image/x-icon"/>
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