Should Themes include favicons?

support
1

A template is not supposed to provide any content (exampleSite is for
that). Media files are considered to be ok - I think. Things like
horizontal patterns (line.png) and so on.

But what about favicons?

Things are easy as long as a theme template just loads one favicon
e.g. favivon.ico. Themes can include this one
(e.g. static/images/favicon.ico), provide the loading in a partial and
a project can overwrite the file with it’s own static/images/favicon.ico.

But

The favicons have gone crazy.

With so many platforms and icons, it’s hard to know exactly what you
should do. What are the dimensions of favicon.ico? How many Touch
icons do I need?

I use https://realfavicongenerator.net/ to overcome this.
But then we can end up with:

static/images/favicons/
├── android-chrome-144x144.png
├── android-chrome-192x192.png
├── android-chrome-256x256.png
├── android-chrome-36x36.png
├── android-chrome-48x48.png
├── android-chrome-72x72.png
├── android-chrome-96x96.png
├── apple-touch-icon-114x114.png
├── apple-touch-icon-114x114-precomposed.png
├── apple-touch-icon-120x120.png
├── apple-touch-icon-120x120-precomposed.png
├── apple-touch-icon-144x144.png
├── apple-touch-icon-144x144-precomposed.png
├── apple-touch-icon-152x152.png
├── apple-touch-icon-152x152-precomposed.png
├── apple-touch-icon-180x180.png
├── apple-touch-icon-180x180-precomposed.png
├── apple-touch-icon-57x57.png
├── apple-touch-icon-57x57-precomposed.png
├── apple-touch-icon-60x60.png
├── apple-touch-icon-60x60-precomposed.png
├── apple-touch-icon-72x72.png
├── apple-touch-icon-72x72-precomposed.png
├── apple-touch-icon-76x76.png
├── apple-touch-icon-76x76-precomposed.png
├── apple-touch-icon.png
├── apple-touch-icon-precomposed.png
├── browserconfig.xml
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon.ico
├── manifest.json
├── mstile-144x144.png
├── mstile-150x150.png
├── mstile-310x150.png
├── mstile-310x310.png
├── mstile-70x70.png
└── safari-pinned-tab.svg

expecting a project to overload all those files.

A “favicon” partial could look like:

<link rel="apple-touch-icon"      sizes="180x180" href="{{ relURL "/images/favicons/apple-touch-icon.png"       }}" />
<link rel="icon" type="image/png" sizes="32x32"   href="{{ relURL "/images/favicons/favicon-32x32.png"          }}" />
<link rel="icon" type="image/png" sizes="192x192" href="{{ relURL "/images/favicons/android-chrome-192x192.png" }}" />
<link rel="icon" type="image/png" sizes="16x16"   href="{{ relURL "/images/favicons/favicon-16x16.png"          }}" />
<link rel="manifest"                              href="{{ relURL "/images/favicons/manifest.json"              }}" />
<link rel="mask-icon"  color="#5bbad5"            href="{{ relURL "/images/favicons/safari-pinned-tab.svg"      }}" />
<link rel="shortcut icon"                         href="{{ relURL "/images/favicons/favicon.ico"                }}" />
<meta name="msapplication-TileImage"           content="{{ relURL "/images/favicons/mstile-144x144.png"         }}" />
<meta name="msapplication-config"              content="{{ relURL "/images/favicons/browserconfig.xml"          }}" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color"             content="#ffffff" />

What do you think:
Should a theme provide all files given in the “favicon” partial

<link rel= ...
<meta name= ...

and an “empty” browserconfig.xml ?

2

FavIcon should be the author or brand’s logo. In that sense, I would make it configurable in config.toml and if the value was blank, present the partial you have now.

For what it’s worth, I had no idea favicons had evolved to this mess level.

3

No. If you include scaffolding for favicons, have it inactive by default, and explain what it is used for and how a person can generate the files they need. But you should not include any favicon files in the theme.

2 Likes
4

OK @maiki, thx. I removed all favicon media from the theme (moved to exampleSite) and added a section in the exampleSite config.toml

 [params.favicon]
  # you may want to use https://realfavicongenerator.net to generate you files
  # used in layouts/partials/head.favicon.html
  # relURL is applied to path 
  enable    = true
  path      = "/images/favicons"
  version   = "a_random_value"
  maskIicon = "#5bbad5" 
  tileColor = "#da532c" 
  themeColor= "#ffffff"

And also giving some hints in the readme…

3 Likes