I can’t think of a single thing that actually uses it at that size any more, and it doesn’t scale evenly to 32×32, which is used much more. I admit that my approach is a bit extreme, but most sites would benefit from something similar. I made this icon specifically to have a tiny footprint (176 byte 32px favicon, 785 byte 192px icon) and to look good at just about any resolution when downscaled from the original, even on an e-ink display. Of course, I tested it to make sure it looked good when downscaled. This is why it's important to design icons that look good when passed through a variety of downscaling algorithms, and to test with other browsers/devices to make sure the icon comes out right.Ĭlients that download multiple icons can re-use cached icons with the same URL, which is why I re-used the 192px icon as the apple-touch-icon and re-used the mask-icon as the webmanifest's monochrome icon. Icons are rarely rendered at their intended size there's a good chance that your browser doesn't render favicons at exactly 16px/32px, and a slim minority of Android phones have homescreen icons that are exactly 192px/500px. My current webmanifest is generated from. Although it isn't exactly an icon, I also added an Open Graph image for all the programs that use it. Since that commit, I added a monochrome icon (same as mask-icon) and 512px icon (since not all programs handle svg well).

I recently gave this a spin on my own site. Some RSS readers show thumbnails they will only use ``, and select the higher-res icon if it's available.Ĭhromium DevTools has an 'Application' pane that lets you preview your icon in the minimal safe clipping area if it looks too crowded, you can specify an alternate maskable icon (unrelated to mask-icon) in your application's webmanifest with `purpose: maskable`. all parse and display icons, and not all of them support SVG. Fancy messengers (Signal, Element, Discord, iMessage, WhatsApp), bookmarking clients, search engines, social media widgets, etc.

It's important to remember that you're not just targeting browsers lots of other software needs to parse site icons. Most sites should just need one low-res (32px) and one high-res (192px) icon re-use the high-res icon as an apple-touch-icon (it's supposed to be 180px, but 192px is close enough) and you're good to go.

How to make a favicon work