Favicons - Best practices

Question

Updated question:

What is considered best practise when creating favicons in 2022?

This is the original question asked back in 2013:

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?

For the best answer, take a look on the Apple website: [Apple Developer](https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html) — Ruub, Jun 30 '14 at 07:38
The apple website at the time of writing has incomplete and missing information about the splash screen images and maybe more. — Muhammad Rehan Saeed, Oct 17 '14 at 14:54
WOW - what a lot of detail here. If you want a concise quick easy answer see https://stackoverflow.com/a/45301651/661584 might help. thanks — MemeDeveloper, Jul 25 '17 at 11:18

philippe_b · Answer 1 · 2016-03-23T15:16:27.557

125

Favicon is way more complex than what it sounds. 10 years ago, favicon.ico was 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.ico and PNG icons for desktop browsers
Apple touch icon for iOS and Android devices
Windows 8 tiles
Pinned tab icon for Safari on OS X El Capitan

For example, it not only generates the msapplication-TileImage picture and markup but also the more recent browserconfig.xml file 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.

edited Mar 23 '16 at 15:16

answered May 23 '14 at 08:16

philippe_b

38,730
7
57
59

1

I just used your site, very nice. You should include the msapplication-config meta tag for when it is not in root directory: `` – Rick Davies Aug 21 '14 at 04:21
1

Thanks! About the path to browserconfig.xml: that's already included in the generated code, isn't it? – philippe_b Aug 21 '14 at 06:01
1

The file is generated, but the line of code is not. I just tried. *Thanks for the great service by the way.* – user664833 Sep 12 '14 at 20:01
1

@user664833 Thanks for the feedback :) You mean the line that declares browserconfig.xml? – philippe_b Sep 12 '14 at 20:46
1

@philippe_b - Yes, the line `` was missing from the set of other `meta` lines your services provided - whereas the file itself (`browserconfig.xml`) was provided in `favicons.zip`. – user664833 Sep 12 '14 at 21:41
3

This is done in purpose. `browserconfig.xml` does not need to be declared as long as it is in the root of the site. IE looks for it automatically. In the other cases (when you enter a specific path in the options), the declaration is generated. – philippe_b Sep 12 '14 at 21:45
1

@philippe_b - OK, I did not know that. And I was confused by your earlier comment *"About the path to browserconfig.xml: that's already included in the generated code, isn't it?"* -- Perhaps a mention (near the code that is generated) of this fact that the line is not needed would be helpful to others? Anyway, thanks again! – user664833 Sep 12 '14 at 21:49
1

Good point. I'm afraid that might overload the result page. But I realize there is no entry for this in the FAQ, which is not normal. I'm going to add it. – philippe_b Sep 12 '14 at 21:51
@e-sushi I understand your comment, really. When I re-read my answer, I, too, was surprised by its crudeness. I'm used to more comprehensive answers (see for example http://stackoverflow.com/questions/2268204/favicon-dimensions/23734416#23734416). Then, I recalled what I had in mind when writing this answer. I've just updated it. Would you re-read it and tell me if that makes sense to you? – philippe_b Feb 12 '15 at 12:34
@philippe_b ***Much*** better now. Thanks for understanding what I was pointing at (some people would have jumped into my face instead)… and thanks for updating your answer. **+1** (An aside: nice tool you created there!) – e-sushi Feb 12 '15 at 12:55
@e-sushi No, thank you, really. With hindsight, my first shot was not good at all. – philippe_b Feb 12 '15 at 13:22
Great tool! But, I am missing Android's Chrome browser and iOS's (Safari) browser as well. Adding both to home screen Works well but viewing in browser doesnt. – riahc3 Aug 06 '15 at 10:24
Definitely not normal :( Could you run the compatibility test (http://realfavicongenerator.net/favicon_compatibility_test) with these browsers? – philippe_b Aug 06 '15 at 12:37
Just used your tool ... great. There is something strange with the Android and Apple pngs, they fail to be compressed by PNG Gauntlet ... any ideas? – Ruskin Sep 17 '15 at 21:19
@Ruskin I don't know PNG Gauntlet. But if you ask for, PNG are already compressed by PNGQuant. Also, this might be due to color depth, see https://github.com/RealFaviconGenerator/realfavicongenerator/issues/157 . – philippe_b Sep 18 '15 at 07:40
That would explain the issue - I added a solid background colour. I got good file size improvements using PNG Gauntlet on your versions f.y.i if you are interested. It is recommended by Scott Hanselman – Ruskin Sep 18 '15 at 14:13
@philippe_b Can I use the GD library to generate all of above different kind of favicons? – Chirag Parekh Aug 16 '16 at 08:45
@ChiragParekh I don't really know GD so I can't tell for sure. I think you will be limited in the effects you might want to generate. – philippe_b Aug 16 '16 at 09:51
@philippe_b Can I go with imagemagick? Is it widely supported? – Chirag Parekh Aug 16 '16 at 10:00
@philippe_b, Does it affect include all icon the rendering avobe the fold content? there are several request if include all icons variation in head section. – xzegga Aug 18 '16 at 16:45
@xzegga Yes, there is a known issue regarding Firefox (http://realfavicongenerator.net/faq#troubleshootings) This is one of the reasons why the package generated by RFG has been reduced. – philippe_b Aug 30 '16 at 08:38
WOW ! a lot of chatter, a lot of detail. Why not let someone else do the work for you. see my answer https://stackoverflow.com/a/45301651/661584 a lot easier. might help. thanks – MemeDeveloper Jul 25 '17 at 11:17
1

@MemeDeveloper Did you read my answer? It's exactly the same as yours, just more elaborate. I'm the author of RealFaviconGenerator by the way :) – philippe_b Jul 25 '17 at 17:05
1

Great - well thanks so much. I just wanted to highlight your tool quickly and easily - I found myself reasing a lot of junk about on SO, just wanted to point people straight to it that's all. I think it's top notch. Thanks. ! +1 – MemeDeveloper Jul 31 '17 at 08:26
1

Excellent resource. Thank you. Si je peux, monsieur, l'orthographie correct de « monochrom » est « monochrome » en anglais. – Parapluie Jun 18 '20 at 20:01
@Parapluie Thank you! Oh damn... typo fixed! ;) – philippe_b Jun 19 '20 at 21:05

score 57 · Answer 2 · edited Apr 17 '15 at 12:53

57

Here is the full (as i know) example of favicon for mobile and tablet:

<!-- non-retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon57.png" sizes="57x57">
<!-- non-retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon72.png" sizes="72x72">
<!-- non-retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon76.png" sizes="76x76">
<!-- retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon114.png" sizes="114x114">
<!-- retina iPhone iOS 7 -->
<link rel="apple-touch-icon" href="icon120.png" sizes="120x120">
<!-- retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon144.png" sizes="144x144">
<!-- retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon152.png" sizes="152x152">
<!-- Win8 tile -->
<meta name="msapplication-TileImage" content="favicon-144.png">
<meta name="msapplication-TileColor" content="#B20099"/>
<meta name="application-name" content="name" />

<!-- IE11 tiles -->
<meta name="msapplication-square70x70logo" content="tile-tiny.png"/>
<meta name="msapplication-square150x150logo" content="tile-square.png"/>
<meta name="msapplication-wide310x150logo" content="tile-wide.png"/>
<meta name="msapplication-square310x310logo" content="tile-large.png"/>

For IE11, here is a FAQ

edited Apr 17 '15 at 12:53

Hamza Shezad

35
1
9

answered Sep 27 '13 at 08:32

user2477225

631
4
3

2

Oh-great - new ones for IE11 too! Thanks for posting the info. – Leon Sep 27 '13 at 16:42
4

But this does not include "apple-touch-icon-precomposed.png" and "apple-touch-icon.png" – Peter Apr 04 '14 at 08:01
2

+1 But I'm not sure if this is *best practice*, though it is thorough. For the best practice (IMHO) and more practical approach, see the excellent cheatsheet suggested by Neil Robertson below. – Boaz Aug 21 '14 at 16:21
Any chance you could update the answer so it works with the 6 and 6+ as well? Or should the above code work? – Rvervuurt Oct 08 '15 at 09:05
see my answer https://stackoverflow.com/a/45301651/661584 a lot easier. might help. thanks – MemeDeveloper Jul 25 '17 at 11:18

Muhammad Rehan Saeed · Answer 3 · 2015-03-16T16:36:26.410

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.

<!-- Icons & Platform Specific Settings - Favicon generator used to generate the icons below http://realfavicongenerator.net/ -->
<!-- shortcut icon - It is best to add this icon to the root of your site and only use this link element if you move it somewhere else. This file contains the following sizes 16x16, 32x32 and 48x48. -->
<!--<link rel="shortcut icon" href="favicon.ico">-->
<!-- favicon-96x96.png - For Google TV. -->
<link rel="icon" type="image/png" href="/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="/content/images/favicon-32x32.png" sizes="32x32">

<!-- Android/Chrome -->
<!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory.
    https://developer.chrome.com/multidevice/android/installtohomescreen. -->
<link rel="manifest" href="/content/icons/manifest.json">
<!-- theme-color - The colour of the toolbar in Chrome M39+
    http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
<meta name="theme-color" content="#1E1E1E">
<!-- favicon-192x192.png - For Android Chrome M36 to M38 this HTML is used. M39+ uses the manifest.json file. -->
<link rel="icon" type="image/png" href="/content/icons/favicon-192x192.png" sizes="192x192">
<!-- mobile-web-app-capable - Run Android/Chrome version M31 to M38 in standalone mode, hiding the browser chrome. -->
<!-- <meta name="mobile-web-app-capable" content="yes"> -->

<!-- Apple Icons - You can move all these icons to the root of the site and remove these link elements, if you don't mind the clutter.
    https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//apple_ref/doc/uid/30001261-SW1 -->
<!-- apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. -->
<!--<meta name="apple-mobile-web-app-title" content="">-->
<!-- apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in 'standalone' mode. Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. -->
<!--<meta name="apple-mobile-web-app-capable" content="yes">-->
<!-- apple-mobile-web-app-status-bar-style - default/black/black-translucent Styles the IOS status bar. Using black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. -->
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black">-->
<!-- apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon" sizes="57x57" href="/content/images/apple-touch-icon-57x57.png">
<!-- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="114x114" href="/content/images/apple-touch-icon-114x114.png">
<!-- apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 6 -->
<link rel="apple-touch-icon" sizes="72x72" href="/content/images/apple-touch-icon-72x72.png">
<!-- apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="144x144" href="/content/images/apple-touch-icon-144x144.png">
<!-- apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7. -->
<link rel="apple-touch-icon" sizes="60x60" href="/content/images/apple-touch-icon-60x60.png">
<!-- apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="120x120" href="/content/images/apple-touch-icon-120x120.png">
<!-- apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 7 -->
<link rel="apple-touch-icon" sizes="76x76" href="/content/images/apple-touch-icon-76x76.png">
<!-- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="152x152" href="/content/images/apple-touch-icon-152x152.png">
<!-- apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS = 8 -->
<link rel="apple-touch-icon" sizes="180x180" href="/content/images/apple-touch-icon-180x180.png">

<!-- Apple Startup Images - These are shown when the page is loading if the site is pinned https://gist.github.com/tfausak/2222823 -->
<!-- apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5 -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-320x460.png - iOS 6 iPhone -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">

<!-- Windows 8 Icons - If you add an RSS feed, revisit this page and regenerate the browserconfig.xml file. You will then have a cool live tile!
     browserconfig.xml - Windows 8.1 - Has been added to the root of the site. This points to the tile images and tile background colour. It contains the following images:
     mstile-70x70.png - For Windows 8.1 / IE11.
     mstile-144x144.png - For Windows 8 / IE10.
     mstile-150x150.png - For Windows 8.1 / IE11.
     mstile-310x310.png - For Windows 8.1 / IE11.
     mstile-310x150.png - For Windows 8.1 / IE11.
     See http://www.buildmypinnedsite.com/en and http://msdn.microsoft.com/en-gb/library/ie/dn255024%28v=vs.85%29.aspx. -->
<!-- application-name - Windows 8+ - The name of the application if pinned to the start screen. -->
<!--<meta name="application-name" content="">-->
<!-- msapplication-TileColor - Windows 8 - The tile colour which shows around your tile image (msapplication-TileImage). -->
<meta name="msapplication-TileColor" content="#5cb95c">
<!-- msapplication-TileImage - Windows 8 - The tile image. -->
<meta name="msapplication-TileImage" content="/content/images/mstile-144x144.png">

My browserconfig.xml file. Full explanation above.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/Content/Images/mstile-70x70.png"/>
      <square150x150logo src="/Content/Images/mstile-150x150.png"/>
      <square310x310logo src="/Content/Images/mstile-310x310.png"/>
      <wide310x150logo src="/Content/Images/mstile-310x150.png"/>
      <TileColor>#5cb95c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

My manifest.json file. Full explanation above.

{
    "name": "ASP.NET MVC Boilerplate (Required! Update This)",
    "icons": [
        {
            "src": "\/Content\/icons\/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/Content\/icons\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/Content\/icons\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ]
}

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):

favicon.ico
browserconfig.xml
Content/Images/
    android-chrome-144x144.png
    android-chrome-192x192.png
    android-chrome-36x36.png
    android-chrome-48x48.png
    android-chrome-72x72.png
    android-chrome-96x96.png
    apple-touch-icon.png
    apple-touch-icon-57x57.png
    apple-touch-icon-60x60.png
    apple-touch-icon-72x72.png
    apple-touch-icon-76x76.png
    apple-touch-icon-114x114.png
    apple-touch-icon-120x120.png
    apple-touch-icon-144x144.png
    apple-touch-icon-152x152.png
    apple-touch-icon-180x180.png
    apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    apple-touch-startup-image-1536x2008.png
    apple-touch-startup-image-1496x2048.png
    apple-touch-startup-image-768x1004.png
    apple-touch-startup-image-748x1024.png
    apple-touch-startup-image-640x1096.png
    apple-touch-startup-image-640x920.png
    apple-touch-startup-image-320x460.png

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.

This is too much. (Not you're answer, but the fact that the browser vendors have so much requirements :)). — jor, Jul 28 '16 at 09:08
@jor Totally agree, it's a silly situation. svg favicons would solve 90% of the issue. — Muhammad Rehan Saeed, Jul 28 '16 at 09:35
see my answer https://stackoverflow.com/a/45301651/661584 a lot easier. might help. thanks — MemeDeveloper, Jul 25 '17 at 11:17
You mention that the names of the files are important. I didn't quite understand what you were referring to. My question is, can I rename all the files so they are prefixed with `favicon-`... - if I update the names in the manifest and in `` tags in the html document `head`? — SherylHohman, Mar 12 '20 at 06:19

Mr. Hugo · Answer 4 · 2020-01-05T18:53:12.973

9

The simplest solution is to use one(!) PNG image (in 2020).

Simply add this to the head of your document:

<link rel="shortcut icon" type="image/png" href="/img/icon-192x192.png">
<link rel="shortcut icon" sizes="192x192" href="/img/icon-192x192.png">
<link rel="apple-touch-icon" href="/img/icon-192x192.png">

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.

edited Jan 05 '20 at 18:53

answered Feb 06 '18 at 16:06

Mr. Hugo

11,887
3
42
60

1

Just wondering where the 196 pixel size comes from. Is that a spec for a specific device or a standard? – bluesixty Apr 25 '18 at 19:45
It is the Android home screen spec: https://www.emergeinteractive.com/insights/detail/The-Essentials-of-FavIcons/. In the beginning, it was a 196×196 icon. I re-read the specs, something I had not done for a while. I realize there was a change: 196×196 became 192×192. https://realfavicongenerator.net/blog/android-chrome-and-its-favicon/ – Mr. Hugo Jan 05 '20 at 18:36

Matthew Sanders · Answer 5 · 2015-11-04T02:39:50.613

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:

./faviconbuild.sh -h

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.

Favicons - Best practices

5 Answers5

Linked