I've been tinkering with support for dark-mode by using a media query in my svg favicon. This is visible on my website.
<link href="favicon.svg" rel="icon" type="image/svg+xml">
<link href="favicon.ico" rel="alternate icon" type="image/x-icon">
Comparison between dark and light mode with Firefox
However, when using a Chromium based browser (Google Chrome version 84), it uses the favicon.ico.
When I remove the ico completely, the browser does show the svg favicon, so I know it works and the browser supports svg favicons. However, the browser seems to pick the .ico if it's got the option to do so.
Can I force Chromium based browsers to pick the svg favicon, while maintaining support for older browsers by including the ico format? It should be noted none of these are stored on the root of my website.
Maybe try putting the SVG image after the ICO image.
Related
This is how I have set up the icon-links in my header.
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="/screen/favicon.png" sizes="192x192">
My 16x16 favicon.ico shows a simplified version of my logo, which looks much better than a downscaled version of a larger PNG. For the touch-icons on mobile devices I have created a 192x192 png of my original logo. Since I added that larger PNG to my header, it is not only used (correctly) as a touch-icon, but also replaces the 16x16 favicon.ico. Thus on the browsers the downscaled png-version is display. I dislike it, cause the ico-version looks better.
Is there any way, to force the display of the ico-version of my favicon in browsers?
If the reason of your high-resolution image/png icon is Android, then you should declare it via a web manifest.
This is what RealFaviconGenerator does: it only declares low-resolution image/png icons in the HTML. So desktop browsers only pick those, whereas Android get the high resolution icons it expects. Even if you don't plan to use the service, you can generate a fake set of icons and adapt the generated code and files to your needs.
Full disclosure: I'm the author of this service.
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.
I've noticed that some favicon's for web-pages (including my own) does not display correctly and transparency is ignored.
For example:
Feel free to test my web-page favicon out using IE/Edge and it will display similar results. I have made sure that transparency has been exported (in the alpha layer) using GIMP. An image is attached below for reference.
Does anyone see anything wrong with either my header coding for a favicon or an issue with the image?
<link rel="icon" type="image/x-icon" href="./favicon.ico?v=1.0">
The issue pictured above appears to be a bug for the dark theme of Microsoft Edge, as the favicon shows up as expected on the light theme.
However internet explorer's issue (displaying a document icon underneath the favicon) was resolved by adding the following line of code:
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="./favicon.ico?v=1.0">
IE supports ico as favicon, you need to generate an ico from your png image. IE 11 supports PNG for Favicons.
This question already has answers here:
What is the best practice for creating a favicon on a web site? [closed]
(4 answers)
Closed 1 year ago.
What is currently the best way to get a favicon to display in all browsers that currently support it?
Please include:
Which image formats are supported by which browsers.
Which lines are needed in what places for the various browsers.
I go for a belt and braces approach here.
I create a 32x32 icon in both the .ico and .png formats called favicon.ico and favicon.png. The icon name doesn't really matter unless you are dealing with older browsers.
Place favicon.ico at your site root to support the older browsers (optional and only relevant for older browsers.
Place favicon.png in my images sub-directory (just to keep things tidy).
Add the following HTML inside the <head> element.
<link rel="icon" href="/images/favicon.png" type="image/png" />
<link rel="shortcut icon" href="/favicon.ico" />
Please note that:
The MIME type for .ico files was registered as image/vnd.microsoft.icon by the IANA.
Internet Explorer will ignore the type attribute for the shortcut icon relationship and this is the only browser to support this relationship, it doesn't need to be supplied.
Reference
I use .ico format and put the following two lines within the <head> element:
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
To also support touch icons for tablets and smartphones I prefer the approach of HTML5Boilerplate
More information on touch icons can be found in this article.
With the current status of browser-support you don't even have to add the HTML tag for the favicon in your document. The browsers will search automaticly a list of files, see this example for iOS:
If no icons are specified in the HTML, iOS Safari will search the
website’s root directory for icons with the apple-touch-icon or
apple-touch-icon-precomposed prefix. For example, if the appropriate
icon size for the device is 57 × 57 pixels, iOS searches for filenames
in the following order:
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-57x57.png
apple-touch-icon-precomposed.png
apple-touch-icon.png
My advise is to not include a favicon in your document, but have a list of files ready in the root website:
apple-touch-icon-114x114-precomposed.png
apple-touch-icon-144x144-precomposed.png
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-precomposed.png
apple-touch-icon.png (57px*57px)
favicon.ico HiDPI (32x32px)
When you download a template from html5boilerplate.com these are all included, you just have to replace them with your own icons.
Wikipedia to the rescue
IE6 cannot handle PNGs correctly, be warned.
Favicon must be an .ico file to work properly on all browsers.
Modern browsers also support PNG and GIF images.
I've found that in general the easiest way to create one is to use a freely available web service such as favicon.cc.
There is also a site where you can check how the favicon of any page is made
getfavicon.org
There you can see a tutorial about making favicons, image types and resolutions, it's nice!
Having a favicon.* in your root directory is automatically detected by most browsers. You can ensure it's detected by using:
<link rel="icon" type="image/png" href="/path/image.png" />
Personally I use .png images but most formats should work.
The answer to this question has become complicated enough that the best way is to just use a tool like RealFaviconGenerator, which lets you upload a png/jpg and then generates favicons and code to cover all the platforms for you: https://realfavicongenerator.net/