I am working on building a website using GitHub Pages and am having a bit of trouble getting the favicon to display properly. My understanding is that, due to compatibility concerns, you need to add various custom bits of code to make sure that your favicon displays correctly across different browsers.
I am currently using Safari 14.0.3 and Google Chrome to test this.
I have included the following HTML code to display my favicon:
<link rel="apple-touch-icon" sizes="60x60" href="/images/favicon_2.png">
<link rel="icon" href="/images/favicon_2.png">
The only problem with this is that it is not displaying on the tab bar in Safari. It correctly displays on Google Chrome and in the search bar at the top of Safari, but not in the tab bar. I have included images below for reference:
Where it is showing correctly in Safari:
Where it is not showing in Safari:
Note: I am trying to get the globe favicon to display.
I have read some similar questions that have talked about clearing cache etc., but none of these seem to have worked.
What I have tried so far:
Clearing all of my Safari Cache (clearing all of the history)
Emptying all of the Cache
Deleting all of the files in the Safari Favicon Cache folder on my Mac
When I did two, and then initially launched Safari, the correct favicon briefly displayed in the tab bar before switching back to the other one.
I am a little bit unsure of what to do here. Does anyone have any ideas? Do I need to add additional code? Any links to any examples or resources would be greatly appreciated. Also, as a side note, are there any links to documentation where I can read further about what all of the different rel="" do here?
Thanks.
you can try use this tool:
https://realfavicongenerator.net/
it's worked for me
I figured it out -
There are two different lines of HTML code required to make favicons display on Safari properly. Changing the line:
<link rel="icon" href="/images/favicon.ico?v=M44lzPylqQ">
will make the favicon display in the top search bar on Safari as well as on Google Chrome.
The favicon displayed on a Safari tab is managed differently. This requires the use of HTML code for the Apple mask-icon for Safari Pinned Tabs. Consequently, this requires the editing the following code below:
<link rel="mask-icon" href="{{ base_path }}/images/safari-pinned-tab.svg?v=M44lzPylqQ"
color="#000000">
Editing this line will allow for the favicon to be displayed on the Safari tab.
Note: Both lines are necessary for the favicon to display in both the Safari search bar and the Safari tabs.
First, check that there aren’t any other web pages on your site that are setting the favicon. If there aren’t it is just a little safari bug.
I have had a similar issue and it seems that safari will hold onto the favicon for extended periods of time even if the code is changed. Unfortunately, you may just have to wait.
For me, the problem was that Safari doesn't support SVG. I should have known not to trust W3schools when it said that Safari supports it (I've submitted a page correction). Based on https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7 which I found via https://caniuse.com/link-icon-svg, the correct method for having an SVG icon (in supported browsers) while still supporting old Safari users appears to be:
<link rel="icon" href="/icon.png" type="image/png">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
Unless you've already got an .ico file, in that case you might as well use that file instead of a PNG. Note that you must now use sizes=any to trick Chrome into doing the right thing and using the SVG which it supports.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
Related
I'm fairly new to html and I've noticed that the favicon that I want to display on my site is not showing up on Safari but showing up on Google Chrome. I was wondering if I could get any help on this?
I know this is a pretty basic question, but I have tried all the basic stuff like emptying my Safari's browser cache as well as the favicon cache on my mac. Here is the syntax I used to link the png. I enclosed this under the <head> </head> section of my code.
<link rel="shortcut icon" type="image/png" href="../MP1/images/icon.png"/> <link rel="apple-touch-icon" type="image/png" href="../MP1/images/icon.png">
I've tried both standard favicon sizes 16x16 and 32x32 px but neither show up on my Safari browser. Thank you in advanced for the help!
Safari uses "apple-touch-icon" and not just "icon". Also, you will have to specify the icon for all Apple devices if you want it to show up in all of them.
Refer this article : https://css-tricks.com/favicon-quiz/
I am trying to create favicon for my website (it is not live yet.) Favicon shows on Chrome but not on Safari 14. I have the setting to see websites' favicon turned on. I also tried cleaning Safari's favicon cache. I am using an PNG photo. What shows on Safari is more like a dull/flat representation. Safari Chrome
I tried these websites:
https://favicon.io
https://www.favicon-generator.org
https://realfavicongenerator.net
They all work on Chrome but not on Safari.
I solved it. So, instead of deleting files in ~Library/Safari/Favicon Cache, I had to empty the entire Safari cache from Develop menu or using this keyboard shortcut ⌥⌘E
You would need to have two links,
<link rel="shortcut icon" type="image/png" href="yourfavicon.png"/> (for chrome)
<link rel="apple-touch-icon" href="yourfavicon.png"> (safari)
Just place both tags in the <head> section of your HTML. Here's the link if you want to read more: https://css-tricks.com/favicon-quiz/
I have done a lot of digging, but I can't seem to get a favicon working for IE11. I can get one working in Chrome and Firefox though.
Here is the head of my file:
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../jquery.min.js"></script>
<script src="../levelOneImports.js"></script>
<link rel="shortcut icon" href="../Iconleak-Cerulean-Science-chemistry.ico" type="image/x-icon">
</head>
Here are the different approaches I've tried:
I have a favicon (ico and png) that I created, but after I couldn't get it to work,
I just tried downloading ones to test off of the internet (here is
one).
I read in another post that IE11 should support png
favicons, so I tried using a png file rather than an ico file.
I read in another post that the image should not be in a subfolder, so I changed the location and put it in the root.
I read that the image needed to 16x16, so I tried creating a ico file that had those dimensions. I also tried downloading a png file with those dimensions.
I tried clearing the IE cache. I also tried clearing the cache and restarting the browser.
The latest code solution is the one I tried above (from this post here).
I also tried this: <link rel="icon" type="image/png" href="../logo.png"> using the solution from the post here.
I am not sure what I could be doing wrong. Any suggestions? If you could provide an example of some code where it works in IE too, that would be great.
Don't know if this helps, but I'm not too concerned with anything prior to IE11.
Even if you cleared the cache, IE11 might still use the cached version. This is an unfortunate, well known-behavior.
A non-exhaustive checklist:
In IE11, open the developer console and look for errors. You might typically discover a 404 error while accessing the icon.
Version the icon by adding a query string to the URL. For example, in your HTML code, change the icon path to ../Iconleak-Cerulean-Science-chemistry.ico?v=2. This should force IE11 to reload the icon.
Test your site with the favicon checker. Full disclosure: I'm the author of this service.
You can change it with JavaScript. It may not be the best answer, but it should work. Be sure to check the link below and their example. Let me know how this works for you:
How to force ie11 to request a new favicon?
I can not get my favicon to display on chrome. url is http://www.videobtc.com.
I read other posts on the same question, the best solution was to use
I proceeded to use this and I am still getting nothing. Help would be greatly appreciated.
This is how I have my favicon set up.
<link rel="shortcut icon" href="unipartisan_favicon.gif" />
...in the header
unipartisan-favicon.gif is in the htdocs directory(XAMPP) which is the same directory as my .php files that link to it. Perhaps your file type is not correct.
This has worked on both Chrome and Firefox, which are the only ones I have tested on.
Edit: I think it may also be imperative that the file you are using as a favicon has an equal pixelation ie. 300x300, 20x20, 489x489, or in my case 2156x2156px. The browsers have automatically re-sized my favicon to fit properly.
Update
I have just tried "Pinning" my site to the Taskbar again (after removing it) but when I clicked and held down the mouse button on the 16x16px icon inside the address bar (see pic below), you can see my favicon being dragged around with the mouse - so internet explorer has found and got the icon - it's just not displaying it in all the right places! Also updated code below:
As the title suggests, I can't get my favicon to display; in any version of any browser. There is 1 exception, though - which isn't good enough:
IE 9 and IE 10 -
As you can probably see in the screenshot above, the only time I get to see my favicon is after I've added it to my Favorites folder and opened the Favorites Bar. The favicon does not display in the Tab (next to the page title), it does not display in the Taskbar area, and it does not display up the top-left of the browser window if I have "Pinned" my site to the Taskbar.
In every other browser, it simply does not display at all.
I have tried every possible "solution" that I could find online.
Here's the code I have:
<link rel="icon" type="image/x-icon" href="http://www.mysite.com/favicon.ico"><!-- Major Browsers -->
<!--[if IE]><link rel="shortcut icon" href="http://www.mysite.com/favicon.ico"/><![endif]--><!-- Internet Explorer-->
I have also tried all common sizes for the favicon; 16x16, 32x32, 64x64, 128x128 and 256x256 - and I've even tried saving all sizes within the same *.ico file.
I have tried deleting the cache file for *.ico files.
Nothing has worked. The exact same code has previously worked on other sites that I've made. I don't get it. What gives?
I've edited this answer, leaving only solution to problem presented in question.
Use: <link rel="shortcut icon" href="{ICONURL}"/>
Instead of: <link rel="icon" href="{ICONURL}"/>
I had the same problem with my site just now. Drove myself crazy trying to get an favicon.ico file to work. What finally got it working correctly for me in IE 11 (on Windows 7), was to dump the favicon.ico file completely and go with a PNG instead:
<link rel="shortcut icon" href="/favicon-32x32.png" type="image/png"/>
I used a PNG file with a transparency layer. Once I did this and uploaded my page, IE began displaying the icon correctly in the Tabs (and the shortcuts/bookmarks) on the very next page refresh. I double checked and it looks like Chrome and Firefox are cool with this as well.
I use
<link rel="icon"
type="image/ico"
href="Link Goes Here">
If putting the favicon in a folder:
<link rel="icon"
type="image/ico"
herf="Folder/Subfolder"
Make sure the code is in the head tag.
Make sure the image is in the .ico format; It won't work otherwise.