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.
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 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">
I store all of my web app icons and favicons in a sub-directory to keep organised:
http://example.com/Images/favicons/example-web-app-icon.png
However when I use this meta data in my markup (generated by NPM package favicons):
<link rel="apple-touch-icon" sizes="57x57" href="/Images/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/Images/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/Images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/Images/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/Images/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/Images/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/Images/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/Images/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/Images/favicons/apple-touch-icon-180x180.png">
My iPhone 6s with iOS 9 does not pick up my icon and instead uses a screenshot of the page.
Is there a size my markup is missing or what? I'd rather not put any of the icons in the root directory.
I'm trying to create a website but have a problem with favicon.
Site: http://apelsinblog.ml
Report: http://realfavicongenerator.net/favicon_checker?site=http%3A%2F%2Fapelsinblog.ml#.Vtx2emCLTIU
I want favicons to work correctly for mobile and Win8/10 platforms, but favicons for these platforms do not work, as you can see from the screenshot.
Please look through HTML. Thank you very much.
Fragment of <head> with favicons:
<link rel="apple-touch-icon" sizes="57x57" href="/fi/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/fi/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/fi/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/fi/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/fi/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/fi/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/fi/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/fi/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/fi/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/fi/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/fi/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="/fi/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/fi/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/fi/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/fi/manifest.json">
<link rel="mask-icon" href="/fi/safari-pinned-tab.svg" color="#fc9700">
<meta name="apple-mobile-web-app-title" content="Апельсин — свежий сайт">
<meta name="application-name" content="Апельсин — свежий сайт">
<meta name="msapplication-TileColor" content="#fc9700">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#fc9700">
Sorry for offtopic. Corrected the question to avoid it.
What is the problem? the favicon is present favicon screenshot
If you don't see the favicon, sometimes only you need to close your browser and open it again or clear your cache.