I'm hosting a website using Github Pages. I connected Cloudflare to the website because of SSL. When i finally added favicon.ico to my website and the following code in <head> to make the favicon show up, it still doesn't show up. What can i do?
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
(english is not my native language)
Edit: Seems like other people can see the favicon, except me. But why?
I have had the exact same problem. I was able to solve it by including a ? in the end.
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
I am not exactly sure why adding in ? works but the code below does not.
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
Adding a question mark at the end of the path is one workaround.
<link rel="shortcut icon" type="image/png" href="coin.png?">
Try also using a URL from a site that has the image, it might work.
<link rel="shortcut icon" type="image/x-icon" href="./Images/favicon.ico?">
if you did something like this , then go to your github.io page and hard reload.
You can use
ctrl/cmd + shift + r
to hard reload the page . That will clear your cache .
If you've deployed a project created using npm to Github Pages and if your build files are in a separate sub-directory, you'll have to define the path to the favicons like this (note the dot).
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
Add the icon path correctly
<link rel="icon" href="./favicon.ico"/>
Related
I'm building a website in HTML, and hosting it via GitHub Pages. You can take a look of it here: http://marcuscodes.me/
It has previously shown normally with this code:
I also tried using favicons:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
I have tried adding a ? to my path as shown here:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
However, it still does not show.
I have tried these steps:
Refreshing browser cache
Using different browser
using different device
You can view the full source code here. https://github.com/inkthought-labs/website
Thanks for any help!
In your index.html, you used this to supposedly create the favicon:
<link rel="icon" href="https://i.ibb.co/SBX2vY1/inkthoughtinvis.png">
However, you forgot the type attribute. It should be:
<link rel="icon" type="image/png" href="https://i.ibb.co/SBX2vY1/inkthoughtinvis.png" />
Additional note: If permitted by copyright licenses, it is best that you download the image to your local storage and then set the location into the href attribute. In the scenario that the website host removes the image, it will not display.
<link rel="icon" type="image/png" href="https://i.ibb.co/SBX2vY1/inkthoughtinvis.png" />
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" />
New to web dev. I have a favicon that works locally but doesn't want to behave on server. The following is my favicon tag in the head tag:
<link rel="icon" type="image/png" href="../favicon/microphone-icon-192783/microphone-icon-16-192783.ico"/>
Am I missing something for the server?
Old question but for anyone who experienced the same issue as me..
Spent about an hour trying to figure out why i was experiencing the same problem. Clearing history, updating code didnt work.
Restarted chrome browser and worked straight away ahah
Just upload the favicon to your root directory and give it the name "favicon.ico". By putting it in your root directory, you'll have a default favicon for all the pages in your domain.
Depending on the browser you use, you can add the following two lines into the head section of your pages.
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
Make an PNG file and set it as the favicon in an index.html page so the cache is overwritten:
<html><head><link rel='icon' type='image/png' href='favicon.png' /></head></html>
It works.
Try uploading the icon somewhere on the web, and link it to that image url. I remember having issues with accessing a background-image on local machine, but if I was trying to link it from the web, I had no problems. I think this should do the trick. Didn't use it though.
You could try removing the ../ like this.
<link rel="icon" type="image/png" href="favicon/microphone-icon-192783/microphone-icon-16-192783.ico"/>
but could we have the file path according to the server root if this doesnt soleve it? its easier to find a solution that way :)
You could try <link href="/favicon.ico" rel="shortcut icon">, where '/' stands for absolute root path... (root direcory)
Make sure the folder having the icon image on the server has the permissions set to 0755.
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
If this still won't update the favicon on the webpage, RESTART THE BROWSER
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