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.
Related
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.
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 ****** -->
Added favicon files to the github page
and pasted the following code below . It's not working though! I'm on chrome. What could be the problem?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
<link href="fonts.googleapis.com/css?family=Lato:100,300,400,700,900"; rel="stylesheet" />
<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">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
Try to reset cookies in your browser (in Chrome just ctrl+shift+r)
Check in developer console if there is no 404 errors and icons coming through.
Like all you need to have:
<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="apple-icon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="apple-icon-16x16.png">
Your paths in the href attribute are wrong. You are telling the browser they are in the root-directory of your project (which in this case, is the first thing that comes up when you open the page in github, your screenshot as reference)
You have a folder named Favicon.ico (which I would change into something like icons, as .ico is usually associated with a file)
So, in your HTML you have to adjust the paths, so the browser knows in which directory these icons are, e.g.:
<link rel="icon" type="image/png" sizes="32x32" href="/Favicon.ico/favicon-32x32.png">