How to properly set favicon for iPhone? - html

I have generated favicon on realfavicongenerator.net, but the favicon is not displayed in Safari on iPhone 6S. I have cleared history and website data, but it doesn't help. Here is my HTML code:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon-precomposed.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="194x194" href="/favicon-194x194.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="icon" type="image/x-icon" href='/favicon.ico' />
<link rel="shortcut icon" type="image/x-icon" href='/favicon.ico' />
As you see, I added rel="icon" and rel"shortcut icon" and also precomposed favicon, but nothing helps. I have looked on the Internet and couldn't find a solution. Is there anything else I can do?

Full disclosure: RealFaviconGenerator's author speaking.
First, you should run the favicon checker against your site, to spot errors such as invalid URLs.
If the test is positive, you can be confident that your touch icon is configured correctly. You probably have a caching issue, even if you have cleared your browser cache. As a workaround, you can try with another device or wait for a few hours and retry.

Related

My Favicon is not showing I have tried everything possible

vscode snapshot of html code
It is Not working on any browser Brave,chrome,firefox
A favicon is a graphic image (icon) associated with a particular Web page and/or Web site. Many recent user agents (such as graphical browsers and newsreaders) display them as a visual reminder of the Web site identity in the address bar or in tabs.
The format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors.
Usually a common name for a favicon image is favicon.ico
<link rel="icon"
type="image/x-icon"
href="/somewhere/favicon.ico" />
With the introduction of smartphone tablet and other devices, things have changed, and to get a correct and complete solution that works on any device is really time-consuming.
Thus, websites such as https://www.favicon-generator.org/ were born and create all the necessary
<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">
Since you uploaded a screenshot, it is difficult to see where the problem lies. Whether in the image size or a path problem

favicon not working for one (token) page in chrome

I have a problem with my favicon in Chrome. It won't show in one page.
I don't really know why but I guess it's because it works with a token, so if the token is different it takes other stuff from my database. in other words the page is never the same. I also tried some other stuff from stackoverflow but it wouldn't work either. Somehow it will work in Microsoft Edge.
this is what I tried so far (header.php):
<link rel="icon" type="image/png" href="/healtywavezicon.png">
<link rel="shortcut icon" type="image/png" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="57x57" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="60x60" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="72x72" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="76x76" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="114x114" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="120x120" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="144x144" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="152x152" href="/healtywavezicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/healtywavezicon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/healtywavezicon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/healtywavezicon.png">
<link rel="icon" type="image/png" sizes="96x96" href="/healtywavezicon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/healtywavezicon.png">
I also tried to put it directly in the index.php:
<head>
<link rel="icon" type="image/png" href="/healtywavezicon.png">
<link rel="shortcut icon" type="image/png" href="/healtywavezicon.png">
</head>
If your favicon does not work on Chrome but works on Edge, Firefox and others, this may be because your header contains a body-only markup.
If you put that in index.PHP then you should make sure that they're in header tags rather than in tags. otherwise,check the image urls
Since you have a leading / in your href, you are referencing a file that will be in the root folder. In case you have your page in a folder on your computer, not serving it from a local web server, the leading / will tell the browser to look in the root folder of your filesystem. So the browser expects the file to be at C:/favicon.ico or similar, which is probably not what you've expected.
If you have the favicon.ico in the same folder as the web page, you could just remove the leading slash, and the icon should be visible.
<link rel="shortcut icon" href="favicon.ico" />
Update:
As a debug option, you could try to add a tag that you know works. I borrowed this snippet from the StackOverflow source. Try replacing your link tag with this and see if you get the SO logo as your favicon.
<link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">
Update 2:
It appears that there is a bug reported on Chromium where the favicon isn't displayed if the file is loaded locally, without being served through a web server.

Website icon (rel=icon) not appearing in chrome for android

I have this code on every page of my website.
<link rel="icon" sizes="192x192" href="http://compesh.com/assets/graphics/touch-icon-chrome.png" />
Yet when I go to my website on Chrome for Android and tap "Add to home screen" my icon never shows up in the dialog. My image is of the correct size and exists.
What is going on?
I have used this documentation from Google.
Update
My website is http://compesh.com
Look at the page source and see if I've made any mistakes.
It works in Firefox for Android but not Chrome for Android and Chrome for Windows. I see this in Firefox WebIDE
2nd Update
Firefox for Windows is not showing my favicon image in the tab. Instead it is showing the wrong image and scaling it down to 16x16 pixels, instead of using my 16x16 favicon I specified in my web page.
hey try this one just go to https://www.favicon-generator.org
and choose your file and click on create favicon.
Now Download the rar file and extract where your project file is and then copy below code
<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">
now refresh the browser or try in another browser
You have placed below div (maybe mistakenly)
<div style="display: none;">
tag right after
<meta name="viewport" content="width=610">
in your head tag, that's why browser is closing your head tag before that div and favicon not showing. Remove that div from your head and everything will be fine.
buddy you are using html 4, why don't you use html 5.
and in href="/" it's not necessary to give full path/link. in your code
just do some minor change. i hope it will help you.
i guess #sarvesh has explain you everything
<link rel="icon" type="image" href="assets/graphics/favicon.png" sizes="16x16">
Since you are using a png file as your high res icon, can you try adding the type attribute, like so:
<link rel="icon" type="image/png" href="http://compesh.com/assets/graphics/touch-icon-chrome.png" sizes="192x192" />
This helps distinguish it as a png file and not a regular favicon.ico file.
Try this in your href :
http://compesh.com/assets/graphics/touch-icon-chrome.png?v=2
You see the "?v=2" for clearing cache directly
Try this:
<link href="https://compesh.com/assets/favigen/favicon-96x96.png" rel="icon" sizes="96x96" />
Works fine on my android phone.
I tested it on
http://helledussen.com/test
I looked into this as well, and a solution I found was to make 4 different sizes and link to them with rel="apple-touch-icon". It has been tested on iPhone, iPad, Android, and Blackberry:
<link rel="apple-touch-icon" sizes="57x57" href="../images/YourIconName57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="../images/YourIconName.png" />
<link rel="apple-touch-icon" sizes="114x114" href="../images/YourIconName.png" />
<link rel="apple-touch-icon" sizes="144x144" href="../images/YourIconName.png" />

What are the valid favicon types for IE10+?

By type I mean file extension.
My favicon works for FF, Chrome, and Safari, and someone suggested in might be the favicon type that is causing the issue.
More generally is there a good resource online that would give me this information?
I am more interested in finding accurate documentation than simply trying different types.
I would prefer to use a .svg file if possible an not a raster image. Also, I do not have a way to generate .ico files as I'm using Inkscape.
<link rel='shortcut icon' href = '../images/favicon.png'>
Research
https://mathiasbynens.be/notes/rel-shortcut-icon
favicon not working in IE
Please note that I don not want to put it in the root folder.
According to the spec I'm breaking the spec so IE will work.
In actuality I'm breaking the spec for IE to work and it still does not work.
Why does it hate me?
This are the favicon types you can use everywhere:
<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />
<link rel="icon" type="image/png" href="http://example.com/favicon.png" />
<link rel="icon" type="image/gif" href="http://example.com/favicon.gif" />
A complete list of favicons can be something like this:
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="/favicon-128.png" sizes="128x128" />
<meta name="application-name" content="Site"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="/mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="/mstile-310x310.png" />
See more info here
Go to enter link description here Once you upload a 260px X 260 px image the site creates all the various favicons and code. Then on tablets and moobile devices when you save the bookmark it looks like an app icon on your device
example https://realfavicongenerator.net/favicon_checker?site=http%3A%2F%2Fnationalkitchencabinets.com%2F&ignore_root_issues=on#.V0yL-77PSSo
The page will give you code like this to post in the '' top section of your page. Then place ALL the icons it gives you into the root of the website.
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.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-32x32.png" sizes="32x32">
<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="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
ICO file format is represented by Microsoft in the first versions of Windows and is generally not a format for images, but a container for BMP and PNG images. So it actually is supposed to contain BMP/PNG images inside, well, at least one.
Source: https://en.wikipedia.org/wiki/ICO_%28file_format%29
You can find a table of supported image formats for "Favicon" here:
https://en.wikipedia.org/wiki/Favicon
SVG is supported on FF 41.0+ only. ( on theory )
The main idea behind the ISO format is to pack the image icons in different sizes: 16x16px ( which is the main, used as Favicon in the browsers) , 32x32, 64x64 and so on into one file, so this "ICO"n to look nice on different resolutions. You can easy find tons of online tools which convert almost any format to ICO, but almost all of them will create only one image in most cases 16x16px.

What other icons are there besides `favicon.ico` nowadays?

I'm not following all the latest webdev trends so I've a question about what other icons besides favicon.ico a modern website should provide?
My current HTML looks like this:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
My favicon.ico is 32x32 PNG file.
What other icons should I be providing for my new website? I guess there are icons for Android, OSX, Facebook (when you share your website?) and others.
Favicons in multiple sizes:
<link rel="icon" sizes="16x16" href="favicon.png">
<link rel="icon" sizes="32x32" href="favicon-l.png">
<link rel="icon" sizes="64x64" href="favicon-xl.png">
Note: 16x16 and 32x32 are the most common ones; other sizes are unlikely to be used by major browsers.
iOS icons:
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
Note 1: these are also used by Android.
Note 2: use rel="apple-touch-icon-precomposed" if you don't want iOS to apply the "glass-effect" and just show your image as-is.
Microsoft Windows 8.1 Tiles
<meta name="application-name" content="My Site"/>
<meta name="msapplication-TileColor" content="#000000"/>
<meta name="msapplication-square70x70logo" content="/ms-tiny.png"/>
<meta name="msapplication-square150x150logo" content="/ms-square.png"/>
<meta name="msapplication-wide310x150logo" content="/ms-wide.png"/>
<meta name="msapplication-square310x310logo" content="/ms-large.png"/>
Note: these are also used on Windows phones.
Webpage thumbnail (used by Facebook for example)
<meta property="og:image" content="http://example.com/preview-100x100.png" />
See also this great article.