Cleanup favicons

[geeqla]

trafficstars

What does this PR change? What problem does it solve?

Hello @adityatelange

Just a small contribution to modernise / cleanup favicons for PaperMod.

I have followed this article "How to Favicon in 2022: Six files that fit most needs" as the best practice. Long story short, all we need are just 2 images to cater for desktop and 3 resizes to cater for mobile (Apple and Android).

Desktop:

1. Modern (vector) icon in SVG format
2. Legacy "favicon.ico" in ICO format (a "pack" of three images 16x16, 32x32 and 48x48)

Mobile:

1. Apple devices: "apple-touch-icon" image in PNG format (180×180)
2. Android devices: two images in PNG format (192x192 + 512x512). Images should be served via site.webmanifest file. Same file can also be used to turn the whole site into a Progressive Web App (PWA)

All raster images (ICO and PNG) can be created as resizes of the (vector) SVG icon. Once you have the SVG icon, the rest is very easy.

Image optimisation:

• SVG: run npx svgo --multipass icon.svg
• PNG: via https://squoosh.app

There is no need to create additional resizes for Windows tiles. A static browserconfig.xml file referencing 512x512 icon will do just fine. Also, there is no need to cater for "Safari Pinned Icon" as even Apple does not care about it anymore.

Sample icons (full set):

• https://www.geeqla.com/icon.svg
• https://www.geeqla.com/favicon.ico
• https://www.geeqla.com/apple-touch-icon.png
• https://www.geeqla.com/icon-192.png
• https://www.geeqla.com/icon-512.png
• https://www.geeqla.com/site.webmanifest
• https://www.geeqla.com/browserconfig.xml

Default files can be changed via variables in config under Params:

• site.Params.assets.icon
• site.Params.assets.favicon
• site.Params.assets.apple_touch_icon
• site.Params.assets.webmanifest

Note: it is not a good practice to rename some favicon files. We should consider dropping some (or all) these variables.

Validation via "favicon checker" (please compare):

• https://realfavicongenerator.net/favicon_checker?protocol=https&site=www.geeqla.com
• https://realfavicongenerator.net/favicon_checker?protocol=https&site=adityatelange.in

Was the change discussed in an issue or in the Discussions before?

No.

PR Checklist

• [ ] This change adds/updates translations and I have used the template present here.
• [x] I have enabled maintainer edits for this PR.
• [x] I have verified that the code works as described/as intended.
• [ ] This change adds a Social Icon which has a permissive license to use it.
• [x] This change does not include any CDN resources/links.
• [x] This change does not include any unrelated scripts such as bash and python scripts.
• [ ] This change updates the overridden internal templates from HUGO's repository.

[sonarqubecloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[adityatelange]

Hello @geeqla, thank you for the analysis, I agree with most of your points. I also did the validation test by Validation via "favicon checker".

While the points mentioned in blog are true, many favicon generators recommend the way we have implemented.

Take a look at html generated by "favicon checker" validator website:

What we want to have in PaperMod is to support wide range of devices and browsers(even old ones). https://github.com/adityatelange/hugo-PaperMod/blob/d3d90be8a4ea04433d95d02a1dc07b0014c5b8b8/layouts/partials/head.html#L105-L112

site.webmanifest was removed thinking it was necessary only for PWA, I think I was wrong https://github.com/adityatelange/hugo-PaperMod/commit/a276a5dfd155d8165b00ad38fdef6cc921f98e0a

What I think we should go with is:

• Re-add site.Params.assets.webmanifest https://github.com/adityatelange/hugo-PaperMod/commit/a276a5dfd155d8165b00ad38fdef6cc921f98e0a and site.Params.assets.webmanifest.
• Add another variable site.Params.assets.browserconfig.
• Add icon.svg for modern browsers along with site.Params.assets.iconsvg.

[adityatelange]

Added these changes to my site, can be verified by https://realfavicongenerator.net/favicon_checker?protocol=https&site=adityatelange.in