I am having an issue with my favicon on safari for macOS. For all other browsers it works fine, but in safari it has a white border around it:
I have supplied three different sizes for this icon and my code is as follows:
<link rel="icon" type="image/svg+xml" href="/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/svg+xml" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/svg+xml" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon-180x180.png" sizes="180x180" />
What am I doing wrong here? (Note I have cleared the favicon cache in Safari each time I test this)
Related
Can you tell me what is the difference of creating the image in these two codes?
<link href="img/favicon.ico" rel="icon" type="image/png">
versus
initiating using the simple <img /> tag
I'm just trying to understand what is the difference
The <img> tag embeds an inline image in your document. The <link> tag tells the browser the entire document is associated with an external resource. In this case, your document is associated with img/favicon.ico and the relationship is "icon" -- it's the icon for the document.
<link href="img/favicon.ico" rel="icon" type="image/png">
This code is for favicon. Favicon is the image top of your browser. You can create favicons using "https://www.favicon-generator.org" this kind of website. And also you can create favicons for different devices. It will look like:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
In the code above; "apple-touch-icon" is for ios devices to set favicon in safari and the images is going to be used for app icons also. "icon" for android and going to be used for chrome. "msapplication-TileImage" is for edge in windows. "manifest" is to define path for android. "theme-color" is just the app color if you enable PWA.
In a website's source code, there are several icons linked:
<link rel="icon" type="image/png" sizes="192x192" href="mysite.net/assets/icons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="mysite.net/assets/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="mysite.net/assets/icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="mysite.net/assets/icons/favicon-16x16.png">
How can I check specifically which icon is used as a favicon and displayed in a browser's tab?
There is no other <link rel="icon" ...> in the source code.
None of these seem to work. It works for tabs, but not bookmarks bar
<link rel="shortcut icon" type="image/png" href="/favicon/favicon-196x196.png" />
<link rel="image/x-icon" type="image/png" href="/favicon/favicon-196x196.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
Try using absolute path instead of relative path.
<link rel="shortcut icon" href="http://example.com/favicon.ico" />
Favicon is set in the divi template. However, it is only displayed in the backend. In the source code is visible too, so probably its not cache problem:
<link rel="icon" href="https://example.com/wp-content/uploads/2017/11/cropped-smiling-sun-1.png" sizes="32x32" />
<link rel="icon" href="https://example.com/wp-content/uploads/2017/11/cropped-smiling-sun-1.png" sizes="192x192" />
<link rel="apple-touch-icon" href="example.com/wp-content/uploads/2017/11/cropped-smiling-sun-1.png" />
Any ideas on how to fix this? Site is example.com
I added to child theme to header file:
<link rel="icon" href="https://example.com/wp-content/uploads/2017/11/cropped-smiling-sun-1.png" sizes="32x32" />
<link rel="icon" href="https://example.com/wp-content/uploads/2017/11/cropped-smiling-sun-1.png" sizes="192x192" />
<link rel="apple-touch-icon" href="example.com/wp-content/uploads/2017/11/cropped-smiling-sun-1.png" />
Seems, it work now.
I'm confused about what's the simplest way to get favicons working on the majority of handsets and browsers.
1) Some sites suggest that it is enough to use:
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-180x180.png">
That will work for iOS 8, and should be picked up by Android, BlackBerry, Windows, etc.
2) Other sites insist that every single possible favicon must be explicitly specified:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
3) This answer says that you just need:
<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">
Which of the above is going to cover the most browsers / handsets with the minimum amount of effort?
The code in solution 3 is correct but outdated. Precomposed Touch icons were deprecated in iOS 7 and Android Chrome does not support 196x196 icons anymore, but 192x192 (it really won't use anything above 192x192; full disclosure: I'm the author of this article).
So:
<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="/path/to/favicon.ico"><![endif]-->
<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 192x192 pixels in size. -->
<link rel="icon" href="/path/to/favicon.png">
If you can place favicon.ico in the root of the web site, you can even skip its declaration, since IE looks for /favicon.ico by convention.