Favicon howto

Posted Sunday, Nov 15, 2020

When rebuilding this page with Hugo I noticed the favicon was missing. Poor me, I thought it was just one favicon.ico file.

Apparently not anymore. To summarize (from realfavicongenerator.net):

File	Description
`favicon.ico`	The classic favicon unique file
`favicon-16x16.png`	The classic favicon, displayed in the tabs
`favicon-32x32.png`	For Safari on Mac OS
`android-chrome-48x48.png`	For Android Chrome M39+ with 1.0 screen density
`mstile-70x70.png`	For Windows 8 / IE11
`apple-touch-icon-57x57.png`	iPhone and iPad users can turn web pages into icons on their home screen. Such link appears as a regular iOS native application. When this happens, the device looks for a specific picture. The 57x57 resolution is convenient for non-retina iPhone with iOS6 or prior.

And many, many more!!

Some browsers will search for the good old /favicon.ico file. Some browsers will look into the classic HTML code:

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

Some other will try to read /browserconfig.xml or site.webmanifest or whatnot.

This is just crazy.

So I finally used favicon.io to create some of those, downloaded the generated files:

and copied all those in the root folder of the site (static directory of hugo folder).

Does it work? To be honest, I couldn’t care less. However, favicon checker says some of them are there. So be it.

Update