Favicon - add apple-touch-icon for google search

[sam327]

Enhancement request

In theme.liquid (at line 10), there's only one size of favicon. whatever you icon you put in gets resized down to 32x32.

{%- if settings.favicon != blank -%}
  <link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
{%- endif -%}

But according to this google page - https://developers.google.com/search/docs/appearance/favicon-in-search?hl=en

Google will pick up your favicon, and show it in search results. But at 32x32, it ends up being blurry. The help page says:

Your favicon must be a multiple of 48px square, for example: 48x48px, 96x96px, 144x144px and so on (or SVG with a 1:1 (square) aspect ratio).

So, I want a big version of the favicon here too.

And if we want to keep the 32x32 size, that's fine. It'd be good to add a larger version for apple-touch-icon, so that google (and everything else) can use it.

It may be as simple as this:

{%- if settings.favicon != blank -%}
  {%- assign favicon = settings.favicon -%}
  <link rel="icon" type="image/png" href="{{ favicon | image_url: width: 32, height: 32 }}">
  <link rel="apple-touch-icon" type="image/png" href="{{ favicon | image_url: width: favicon.width, height: favicon.height }}">
{%- endif -%}

Alternatives

I've made my own favicon snippet, with a bunch of different apple-touch-precomposed sizes, non-apple-sizes, and even windows sizes. And surely not all these are important anymore. View here: https://gist.github.com/sam327/14cfc61d29463daab2ea185737226040

I don't know if those precomposed sizes are actually necessary. Is it worth the few extra cycles to resize them in advance? Or just give the various devices the big version and let them figure it out themselves?

[rosskevin]

To match our site, which tests well with (and assuming an SVG file is used), we only need these:

      <link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
      <link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 192, height: 192 }}">
      <link rel="apple-touch-icon" href="{{ settings.favicon | asset_url }}" />
      <meta name="msapplication-TileImage" content="{{ settings.favicon | asset_url }}" />

I'm no authority on it, but based on our primary site testing - I'm going with this.