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.
Related
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
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.
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" />
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.
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">