from Hacker News

How to Favicon in 2021: Six files that fit most needs

by iskin on 12/23/20, 6:44 PM with 82 comments

• by bamboleo on 12/23/20, 9:21 PM

  Unless you have a PWA, you only need a /favicon.ico and the touch PNG icon. The browser will fetch them automatically, no tags required.

  Tip: the ico can just be a renamed PNG file.

  I wish people stopped cluttering their sites with a thousand useless variations.

  The SVG favicon part is interesting and maybe that requires the 2 rel=icon tags.

• by amelius on 12/24/20, 12:53 AM

  At the current speed at which the Web Standards are "progressing", I'm predicting we'll have full HTML, CSS and JavaScript inside the favicon area any moment now.

• by WA on 12/23/20, 9:54 PM

  Nice writeup. I used this a few times and cam recommend it if you want to have everything auto-generated: https://realfavicongenerator.net/

  (Not affiliated with the author, just like the tool)

• by chrismorgan on 12/24/20, 5:17 AM

  The 48×48 recommendation is bogus. 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 recommend sticking to a single 48×48 image, unless the one you have doesnt downscale well to 16×16 and 32×32 (becomes blurry, for instance)”, quoth the article; 32×32 will become blurry from a 48×48 downscale every single time.) That recommendation from Microsoft to include a 48×48 icon is from about ten years ago. The current recommendation from Microsoft is not to use IE.

  16×16 and 32×32 are far more important as they’re used far more—most notably, tab bars normally show icons at 16×16, which is commonly 32×32 on high-DPI displays (assuming a scaling factor of 2×). And those small sizes are also where you want to be the most careful about the rendering.

  I like to craft precise 16×16 and 32×32 icons, and then generally jump straight up to 256×256 or 512×512 and let anything that wants larger than 32×32 downscale from that. (I used to go for /favicon.ico containing 16, 32 and 256, even though that bloated the file size by a handful of kilobytes, but now I’m more likely to go for /favicon.ico containing 16 and 32, and a PNG containing 256 or 512 or perhaps just shifting to SVG at this point.)

  Fun fact: just as the ICO format lets you have completely distinct images for distinct sizes, an SVG file can contain multiple images for different sizes by the use of media queries; for example, you could show a tweaked icon at 16×16 and another at 32×32, and something else at all other sizes, while omitting some tiny detail below 64×64, and replacing the icon with icon-and-brand-name above 128×128. Just be aware that the media query will be matching device pixels rather than CSS pixels, which may or may not be what you’d like.

  Caution should also be exercised with the prefers-color-scheme media query on SVG icons. It does not reflect whether the icon is being displayed on a light or dark background. (prefers-color-scheme: dark) hints that your icon is probably being displayed against a dark background, but it could easily still be being displayed against a light background; and with (prefers-color-scheme: light) it will be quite common for the icon to be being displayed against a dark background. You need to carefully design your icon so it works well against almost any background colour.

• by micahjm on 12/23/20, 8:38 PM

  Careful with sizes=“any” on the SVG favicon. I found a few months ago that it caused Chrome to select a known size PNG favicon over the smaller SVG (with dark mode support).

• by superkuh on 12/23/20, 11:23 PM

  >browsers download favicons in the background, so a bigger favicon image does not affect website performance;

  I get what he's saying. He's saying the browser won't wait on it before displaying actual page elements. But bandwidth is bandwidth. And bandwidth used downloading a bunch of big favicons is bandwidth not used downloading something else.

• by locallost on 12/23/20, 9:39 PM

  > Even Apple, which always had some aesthetic beef with icons that don’t come from Cupertino and downplayed favicons in Safari for years, had finally given up and now displays them properly across all of its devices.

  sadly, no. we spent this year (and I think last) days and days trying to figure out why the icon is not getting displayed correctly in the iOS bookmarks. We thought multiple times we had figured it out, but no, not really.

• by varajelle on 12/23/20, 9:51 PM

  I'm only serving one single favicon.ico on my website. I guess I'm doing it wrong.

• by mawise on 12/24/20, 2:02 AM

  If you have imagemagick installed and an svg icon, you can use the following to generate the other 4 types:

  convert -resize 48x48 icon.svg favicon.ico convert -resize 180x180 icon.svg apple.png convert -resize 192x192 icon.svg 192.png convert -resize 512x512 icon.svg 512.png

• by silverwind on 12/23/20, 9:22 PM

  A single SVG icon will get one to 88% browser support, which depending on use case may just be good enough.

  https://caniuse.com/link-icon-svg

• by unicornporn on 12/24/20, 7:17 PM

  > Instead of serving dozens of icons, all you need is just five icons and one JSON file.

  Oh, only six files to to serve a freaking favicon. Thanks, that made me feel more optimistic about the contemporary www...

• by recursive on 12/23/20, 9:53 PM

  I don't see much point providing anything but the first.

  <link rel="icon" href="/favicon.ico" />

  I'd remove that slash too. HTML isn't XML. If there are any user agents that don't support this, I'd consider that their problem.

  Unless branding is like super important, I pretty much refuse to go any farther than this. I see no reason why it can't just be this simple.

• by davemateer on 12/24/20, 8:03 AM

  Thank you for the article. It is certainly alluring to reduce the number of generated images linked in the <head> in PWA apps.

  I use https://github.com/onderceylan/pwa-asset-generator to generate assets for PWA's(have left a message on this repo to read your article!)

• by Sephr on 12/24/20, 1:35 AM

  I usually just throw emoji favicon toolkit[1] at this problem and subset to a random rotation of relevant emoji. Client-side-generated and cached favicons are possible with canvas and service workers.

  1. https://github.com/eligrey/emoji-favicon-toolkit

• by everydaypanos on 12/24/20, 5:59 AM

  Nice guide and love that it included WebPack for modern development.

  I think the SVG with prefers media queries is not covering all cases, for example Chrome Anonymous dark “theme” and other user selected “themes” are impossible to check how they paint the background of the favicon area. So..the perfect solution in my view is still somewhere out there..

• by youngtaff on 12/23/20, 10:01 PM

  You also always need a favicon.ico in the root folder as many things will look for it — bookmarking services, crawlers etc.

• by cblconfederate on 12/23/20, 10:42 PM

  I never got the point of multiple favicon.png. I only use one, won't it be used by default for all purposes?

• by Aardwolf on 12/24/20, 2:22 AM

  Question: do apple devices support favicon.ico (the old style one, a single file named favicon.ico, no pngs or json or anything else). Or do they ignore it?

  I tried to search the answer online but all results were articles about the png ones instead. Thanks!

• by toastal on 12/24/20, 6:25 AM

  If you also find these code blocks with ligatures hard to read or understand, you can use a user style with `code, kbd, pre, samp { font-feature-settings: normal !important }` (might be a good places to set a default `tab-width` too).

• by jimnotgym on 12/23/20, 9:16 PM

  Another example of the www getting worse every year.

• by jonathankoren on 12/23/20, 10:23 PM

  > Currently, frontend developers have to deal with 20+ static PNG files just to display a tiny website logo.

  I’m sorry, but what? Seriously. What? I don’t get this. Why is this even a thing worth optimizing, the umber of times this even seen by someone has to be near infinitesimal.

• by avipars on 12/24/20, 3:43 PM

  Just used a website to generate all the files... not a lot of work

• by 1cvmask on 12/24/20, 5:25 AM

  A map of Favicons by Internet footprint:

  https://faviconmap.shodan.io/

• by academi on 12/24/20, 3:22 AM

  Could we just have a single fav icon and use a better algo to simplify it?