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/
Related
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">
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/
Unsolved
I want the proper png to show up in the browser tab while still maintain the app I use to connect my website with uses the gif favicon
So I'm using metamask as an extension and it automatically looks for the first favicon so thus my first favicon is a gif for an animation. But while firefox automatically uses the png version of my favicon, how do I get a browser like Chrome to use the png version as well in the browser tab menu?
So the HTML goes like this...
<link rel="icon" href="%PUBLIC_URL%/animation.gif" type="image/gif" >
<link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/favicon144.png" />
The first is the gif which I need to be first due to metamask and the second is the png version which chrome skips over.
I am currently using Chrome version 79.0.3945.117. Using this code in HTML, it correctly displays the PNG icon.
Code:
<link rel="icon" href="animation.gif" type="image/gif" >
<link rel="shortcut icon" href="favicon.png">
There doesn't seem to be any problems or interferences with my case.
For debugging, I recommend that you check for any 404 errors finding the image, or in other words, the wrong href route. Also, try clearing the cache of your browser and reload.
Glad to answer.
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.
I have put in code using html5. In Firefox, the Favicon is showing as blank. In Internet Explorer, the favicon is showing as intended.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="http://www.bunchofus.com/Bicon.ico" />
Tried the below as well.
<link rel="shortcut icon" href="http://www.bunchofus.com/Bicon.ico" />
I tried clearing the cache and restarting the browser and neither worked. I would appreciate the help as to why this is happening.
Thanks.
I recommend that you rename the icon favicon.ico, which normally means you don't need to hint the favicon path to browsers.
Additionally, check that the format of your image is correct and try regenerating the .ico from your original source as browsing directly to it in some browsers doesn't show the red "B", which suggests an issue with the image.