favicon / start sreens for all browsers and devices [closed] - html

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I was wondering if i have everything covered to include all favicons / start splash screens for all browsers and devices?
Is this enough? Or what are the main ones I should be covering? Am i missing any below:
<link rel="icon" href="/images/favicons/favicon.png">
<link rel="apple-touch-icon" href="/images/favicons/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="/images/favicons/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="/images/favicons/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/favicons/touch-icon-ipad-retina.png">
<meta name="application-name" content="site">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-square70x70logo" content="/images/favicons/msapplication-tiny.png">
<meta name="msapplication-square150x150logo" content="/images/favicons/msapplication-square.png">
<meta name="msapplication-wide310x150logo" content="/images/favicons/msap plication-wide.png">
<meta name="msapplication-square310x310logo" content="/images/favicons/msapplication-large.png">
Thanks

Classic favicon for desktop browsers
Drop a favicon.ico file in the root directory of your web site. It does not need to be declared and it is expected to contain 16x16, 32x32 and 48x48 pictures.
Modern browsers will also look for PNG icons. You can address most cases with:
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
iOS
If you combine iOS 6 and iOS 7 sizes, iPad and iPhone, and Retina and non-Retina, that gives you 8 Apple touch icons:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
Android
Android Chrome uses the Apple touch icon. But it also documents a 196x196 PNG icon that will replace the touch icon... someday. So:
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">
Windows 8.0 tile picture
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
Windows 8.1 tile pictures
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-square70x70logo" content="/images/favicons/msapplication-tiny.png">
<meta name="msapplication-square150x150logo" content="/images/favicons/msapplication-square.png">
<meta name="msapplication-wide310x150logo" content="/images/favicons/msapplication-wide.png">
<meta name="msapplication-square310x310logo" content="/images/favicons/msapplication-large.png">
or use a browserconfig.xml dropped in the root of your web site (or declared in the head section), with the following content:
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/mstile-70x70.png"/>
<square150x150logo src="/mstile-150x150.png"/>
<square310x310logo src="/mstile-310x310.png"/>
<wide310x150logo src="/mstile-310x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>
The other guys
What about Google TV, Opera Speed dials and others? They expect PNG icons:
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
(...)
Generate these pictures and HTML code
You can generate all these pictures and HTML code at once. Full disclosure: I'm the author of this site.

You can use .ico instead of .png in the first line
<link rel="icon" href="/images/favicons/favicon.ico">

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

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.

Adding Apple Icon To Website

I have tested my site with Woorank and shows a warning about missing of the Apple Icon.
I have searched but I'm not sure how to include this icon, I have found this code
<link rel="apple-touch-icon-precomposed" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-ipad-retina.png" />
Must I include these lines in the head in the same way of the standard favicon? (My website is in HTML5)
What is the resolution of the first images in these lines "apple-touch-iphone.png"
The smallest icon should be 57×57 pixel.
Be aware, that the "-precomposed" states, that the linked icon file is already shiny and in 3D. If you leave out "-precomposed", iOS will add a 3D brilliance effect to the image.
And yes, of course do you need to insert the link-tags to the head.
Example for a complete icon set:
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico">
<link rel="apple-touch-icon" type="image/png" href="icon.57.png"><!-- iPhone -->
<link rel="apple-touch-icon" type="image/png" sizes="72x72" href="icon.72.png"><!-- iPad -->
<link rel="apple-touch-icon" type="image/png" sizes="114x114" href="icon.114.png"><!-- iPhone4 -->
<link rel="icon" type="image/png" href="icon.114.png"><!-- Opera Speed Dial, at least 144×114 px -->
Docs on Apple iOS icons: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/ConfiguringWebApplications/ConfiguringWebApplications.html
Docs on Opera Speed Dial icon: http://dev.opera.com/articles/view/opera-speed-dial-enhancements/