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.
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 ****** -->
Currently I am having the issue of the favicon not loading on Chrome, after uploading the relevant files and code to the web server.
The code I have to achieve this is as follows:
<link rel="apple-touch-icon" sizes="57x57" href="/cdn/images/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/cdn/images/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/cdn/images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/cdn/images/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/cdn/images/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/cdn/images/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/cdn/images/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/cdn/images/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/cdn/images/favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/cdn/images/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/cdn/images/favicons/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="/cdn/images/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/cdn/images/favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/cdn/images/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/cdn/images/favicons/manifest.json">
<link rel="shortcut icon" href="/cdn/images/favicons/favicon.ico">
Which was kindly generated for me by http://realfavicongenerator.net/
Does anyone know why this wouldn't show?
I have looked through the issues others have but am still puzzled by the favicon not loading in just this browser.
The site is running on HTTPS and the certificate is valid.
Any thoughts welcome.
Try moving the BingMap inputs to the body, as currently they are forcing the favicons into the <body>, hence they are not loading. Once they are moved the favicon displays as below:
Try removing / before cdn or check the URL structure.