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.
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.
I'm running a react / webpack application and the favicon does not show when loading any route of my app other than the index ("/").
/public/app-bundle.js --> react/webpack bundle
/public/favicon --> directory with favicon assets
/public/index.html --> see below
<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"
/>
<link rel="manifest" href="./favicon/site.webmanifest" />
<link
rel="mask-icon"
href="./favicon/safari-pinned-tab.svg"
color="#5bbad5"
/>
<link rel="icon" href="./favicon/favicon.ico" />
Please consider the page will request pages from the server, not from the filesystem
So remove "." before on hrefs.
<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"
/>
<link rel="manifest" href="/favicon/site.webmanifest" />
<link
rel="mask-icon"
href="/favicon/safari-pinned-tab.svg"
color="#5bbad5"
/>
<link rel="icon" href="/favicon/favicon.ico" />
Remember if starting with slash ("/") means get from server root if not relative where baseUrl is.
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" />
In my project, I add a favicon as shown here:
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.png' %}"/>
In my image editor, I change the size of this graphic, which I want to use as my favicon, to 225x225px from the original size (172x158px).
However, when I try to use the updated graphic as my favicon, (the one which the dimensions are 225x225), it stays at its original size.
Does anybody know how to resolve this issue so I can use a bigger graphic for my favicon? Thank you.
Actually, the favicons are supposed to be 16x16, 32x32 and 48x48 pictures in ICO format. (According to Microsoft)
You could try to simply add the size of your icon to the tag and also check, if that size is supported by your browser and purpose. For example:
<link rel="icon" type="image/png" sizes="196x196" href="{% static 'favicon.png' %}"/>
Not every size (neither the .png format) is actually supported by every browser! I would recommend, to add all sizes you would like to support.
If you want to support all the formats for the most common browsers, here is a nice favicon generator: http://faviconit.com/en
Here is the code of what faviconit would give you (next to the images):
<!-- ****** faviconit.com favicons ****** -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
<!-- ****** faviconit.com favicons ****** -->
<link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png">
<link rel="mask-icon" href="./icons/safari-pinned-tab.svg">
I added this code.
But the icon does not apply.
The file structure is
test
└icons
└safari-pinned-tab.svg
└favicon-16x16.png
└favicon-32x32.png
└apple-touch-icon.png
└index.html
Try this.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="icons/apple-touch-icon.png" type="image/x-icon">
<link rel="icon" type="image/png" sizes="32x32" href="icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/apple-touch-icon.png">
</head>
<body>
<!-- DO NOT touch the -->
</body>
</html>