{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 冷血范 的问题《Favicons - Best practices》','https://www.manongdao.com/q-1167850.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm trying to get my head around all these different sizes and formats that are needed for Favicons, Touch icons and now Tile icons too.
I've read this post: http://www.jonathantneal.com/blog/understand-the-favicon but I'm still a bit hazy on exactly what to use that will look reasonably good on all devices and browsers >= IE8.
I think I should create the following:
ICO
favicon.ico (32x32)
PNG
favicon.png (96x96)
Tile Icon
tileicon.png (144x144)
Apple Touch Icon
apple-touch-icon-precomposed.png (152x152)
based on this https://github.com/h5bp/html5-boilerplate/issues/1367
...and then use this code to serve 'em up?
<link rel="apple-touch-icon" href="path/to/touchicon.png">
<link rel="icon" href="path/to/favicon.png">
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- or, set /favicon.ico for IE10 win -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">
Am I missing anything?
I'm not clear whether this will cover IE 10?
I was actually asking myself the same question and tried to look for any simple projects out there that could be integrated into a build step or just simplify the creation of the assets and markup required.
I didn't find anything that met my requirements so I created faviconbuild and released it under the MIT license.
The purpose of this project is to create a central, maintainable, and locally runnable cross platform utility to building favicons and supporting markup. It leverages the power of Imagemagick so you would need to download that for your platform or use the ones I provide in my releases. Please feel free to use this in commercial or personal projects, contribute, submit feature requests, or simply use as a source of inspiration for your own utilities.
The project consists of a batch file for Windows and a bash script for Unix / Mac (or Windows via Cygwin). You can get a full list of supported options from the internal help option -h or --help.
ex:
Both scripts parse a simple text file that you can also override with the -p or --parsed option. The file is basically just a template of commands to run so you can more easily customize the output if needed.
I also published a blog post on the development and as a mini tutorial on bash/batch scripting.
Favicon is way more complex than what it sounds. 10 years ago,
favicon.icowas the only needed item. Then, there was the touch icon, then multiple touch icons dues to the various iOS devices screen resolutions, then there was the tile icon for Windows...Some answers here are very comprehensive - and overwhelming (all this, only for a favicon?). Yet, they fail at indicating that the 310x310 tile icon for Windows is recommended to be 558x558. And since they were written a few months ago, they do not mention the recent manifest for Android Chrome M39 or the pinned tab SVG icon for Safari on OS X El Capitan.
Per-platform design is another tough, yet neglected topic. For example, favicon are often transparent. But iOS does not support transparency (for an example of this, compare the SO touch icon and what you get when you add SO to your iPhone's home screen).
For these reasons, what I consider a best practice for favicon is to not create it manually. Instead, use a tool to automate the whole process and enforce platform guidelines.
I advice you to use RealFaviconGenerator. It generates all pictures and HTML code you need to get the job done:
favicon.icoand PNG icons for desktop browsersFor example, it not only generates the
msapplication-TileImagepicture and markup but also the more recentbrowserconfig.xmlfile supported by IE11. It was also updated a few months ago to support the Android Chrome manifest and Safari OS X El Capitan.Full disclosure: I'm the author of this site.
Here is the full (as i know) example of favicon for mobile and tablet:
For IE11, here is a FAQ
There are a number of different icons and even splash screens that you can set for various devices. This answer goes through how to support them all.
Here are some snippets I have used with relevant links to where I gathered the information. See my blog for more information and more information about the ASP.NET MVC Boilerplate project template with all this built in right out of the box (Including sample image files).
Add the following mark-up to your html head. The commented out sections are entirely optional. While the uncommented sections are recommended to cover all icon usages. Don't be scared, most if it is comments to help you.
My browserconfig.xml file. Full explanation above.
My manifest.json file. Full explanation above.
A list of the files in the project (Note that the names of these files are important if you decide to put some of them at the root of your project to avoid using the above meta tags):
Total Overhead
If you take out the comments that's 3KB of extra HTML, if you don't support splash screens that's 1.5KB. If you are using GZIP compression on your HTML content, which everyone should be doing these days, that leaves you with about 634 Bytes of overhead per request to support all platforms or 446 Bytes without splash screens. I personally think its worth it to support IOS, Android and Windows devices but its your choice, I'm just giving the options!
Side Note About The Current Web Icon/Splash Screen/Settings Situation
This situation with vendor specific icons, splash screens and special tags to control the web browser or pinned icons is ridiculous. In a perfect world we would all use a favicon.svg file which could look good at any size and could be placed at the root of the page. Only FireFox supports this at the time of writing (See CanIUse.com).
However, icons are not the only setting these days, there are several other vendor specific settings (shown above) but a favicon.svg file would cover most use cases.
Update
Updated to include the new Android/Chrome version M39+ favicon/theming options. Interestingly, they have gone with a similar approach to Microsoft but are using a JSON file instead of XML.
The simplest solution is to use one(!) PNG image (in 2020).
Simply add this to the head of your document:
The last link is for Apple (home screen), the second one for Android (home screen) and the first one for the rest.
Note that this solution does NOT support 'tiles' in Windows 8/10. It DOES support images in shortcuts, bookmarks and browser-tabs.
The size is exactly the size the Android home screen uses. The Apple home screen icon size is 60px(3x), so 180px and will be scaled down. Other platforms use the default shortcut icon, which will be scaled down too.