[HN Gopher] How to Favicon in 2021: Six files that fit most needs
___________________________________________________________________
How to Favicon in 2021: Six files that fit most needs
Author : iskin
Score : 117 points
Date : 2020-12-23 18:44 UTC (4 hours ago)
(HTM) web link (evilmartians.com)
(TXT) w3m dump (evilmartians.com)
| WA wrote:
| 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)
| micahjm wrote:
| 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).
| iskin wrote:
| Yeap, size=any works for the case when you do not have other
| PNG images as I recommend
| jonathankoren wrote:
| > 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.
| youngtaff wrote:
| You also always need a favicon.ico in the root folder as many
| things will look for it -- bookmarking services, crawlers etc.
| locallost wrote:
| > 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.
| simongr3dal wrote:
| At least on macOS Safari's icon cache is VERY long-lived
| jimnotgym wrote:
| Another example of the www getting worse every year.
| sabellito wrote:
| Care to expand? Just negativity is not very useful for
| conversation.
| CraigRood wrote:
| I have a somewhat similar feeling. Why has favicon.ico been
| made into a 10 page mess? It just feels like there's too much
| going on for something that should be so simple.
| eplanit wrote:
| I think the point is look at all the BS complexity just to
| display a non functional icon.
| acdha wrote:
| You have an interesting definition of "non functional"
| describing a UI component seen daily by billions of people
| which is, well, an iconic part of your site's branding.
|
| As for the rest, welcome to distributed systems. Any time
| you're working on something which involves multiple
| codebases on different schedules you're going to have a
| crossover period. For the web that period is measured in
| years since it has many clients and billions of users.
|
| The article covers this but if you look at the data
| (https://caniuse.com/link-icon-svg) there are really only
| two things you need:
|
| 1. An SVG icon for modern browsers 2. favicon.ico for
| everyone else
|
| If you want to support higher resolution icons for Safari's
| pinned tabs or iOS/Android you can add those as well but
| that's an optimization for new way to interact with web
| apps which those device makers added and isn't necessary
| unless you expect lots of people to use that feature and
| your existing icon color scheme clashes with the system UI.
| nik_0_0 wrote:
| The favicons are certainly functional - as a sufferer of
| 'too many tabs' syndrome, at the very moment, the only
| information I have about each of the ~30 tabs currently
| open in my Chrome browser is the favicon.
|
| This packs _far_ more information into the 48x48 (or
| whatever resolution) then trying to squeeze in a title like
| "Am" or "Ha" for Amazon or HN.
|
| (Totally agree on the complexity, seems like it followed
| the iOS Store model of interface design!)
| bamboleo wrote:
| 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.
| mchusma wrote:
| SVGs are such a better choice for favicons that I hope they
| become so dominant that we can drop the rest.
| strombofulous wrote:
| > Tip: the ico can just be a renamed PNG file
|
| 6+ years of webdev and I just learned this now. So many wasted
| "convert png to ico" Googles...
| runarberg wrote:
| It takes me a few minutes from getting an favicons from an
| SVG using Inkscape and Imagemagick, rasterizing it with:
| inkscape -o icon-48x48.png -w 48 -h 48 icon.svg
|
| ...plus the other dimensions required and generating an ico
| with convert icon-48x48.png favicon.ico
| NeutronStar wrote:
| Or: mv icon-48x48.png favicon.ico
| silverwind wrote:
| 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
| iskin wrote:
| Not 88%. Partial support on this Can I Use page is about
| different icon type in Safari.
|
| SVG icon will cover only 70%.
| silverwind wrote:
| Yeah, seems one has to provide a png fallback for Safari,
| otherwise it will not render a icon at all.
| nelgaard wrote:
| My use case is mainly that I get tired of seeing that request
| for a non-existing ico file in debuggers and logs when I
| develop. So if it is supported by my browser, it is a good
| start.
| cblconfederate wrote:
| I never got the point of multiple favicon.png. I only use one,
| won't it be used by default for all purposes?
| yread wrote:
| On my website the favicon doesn't appear when I try to create a
| shortcut on Android home screen - looks like the manifest is
| necessary for that?
| cblconfederate wrote:
| I just tried and it did for me. From Chrome
|
| with just <link rel="shortcut icon" href="/favicon.png" />
| varajelle wrote:
| I'm only serving one single favicon.ico on my website. I guess
| I'm doing it wrong.
| recursive wrote:
| 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.
| iskin wrote:
| Small 48x48 icon in favicon.ico will not work on browser recent
| websites page (which is pretty popular feature)
| recursive wrote:
| Are you talking about browser history? Because it seems to
| work just fine. If you're talking about something else, it
| can't be _that_ popular. I 've never heard of it, and a
| search is not very illuminating either.
___________________________________________________________________
(page generated 2020-12-23 23:00 UTC)