Notes: Favicon in 2021
Summary of a wonderful article published about favicon.
Recently, i came across an articles which explains what type and sizes of images can be used as favicon (favourite icon that shows in browser tab) which supports modern browsers. I would recommend the article for details explanation.
Notes from the article
As modern browsers have evolved so much, we only need 5 icon of different size and one web manifest JSON file to handle favicon on all devices and browsers.
<!-- In HTML -->
<link rel="icon" href="/favicon.ico"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">// manifest.webmanifest JSON file
{
"icons": [
{ "src": "/192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/512.png", "type": "image/png", "sizes": "512x512" }
]
}Browsers download fav-icon in background.
favicon.ico are supported by legacy browsers. /favicon.ico url should return a favicon.ico image fo 32x32 size.
Modern browsers supports SVG as favicon. Place a <link> tag in <head> with rel=”icon”, type=”image/svg+xml” and href with path to SVG file.
Use 180x180 size PNG image for supporting add shortcut to home screen in Apple devices. Place <link> tag in <head> with rel=”apple-touch-icon” and href with path to PNG file.
It would look good if you give 20px padding around actual icon. So logo size will be 140x140 plus 20px padding, which makes the complete size as 180x180
Use 192x192 and 512x512 size PNG images for supporting install website as PWA on android devices.
The bigger image size 512x512 is displayed as splash screen when PWA is loading.
Steps to prepare favicon
Create a square SVG of your logo.
Open SVG in editor (any text editor to edit the XML) and add style to support light and dark mode theme
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<style>
@media (prefers-color-scheme: dark) {
.a { fill: #f0f0f0 } /* any CSS style*/
}
</style>
<path class="a" fill="#0f0f0f" d="…" />
</svg>Create ico icon of size 32x32 from SVG image by exporting it as ico using 32bpp, 8-bit alpha, no palette setting
Create 192x192, 512x512, 180x180 size PNGs from SVG file.
Optimize Images
Optimise SVG by SVGO
npx svgo --multipass icon.svgOptimise PNG image with Squoosh web app. Change setting to 0xiPNG, enable “Reduce palette“ and set 64 colors
Include favicon in HTML
If any templating engine is used or webpack plugin is used to generate index.html then it could be good to have separate icon for dev and prod.
process.env.env === 'production'? '/favicon.ico': '/favicon-dev.ico'webpack-pwa-manifest plugin can be used to generate manifest file.
Click here to read the complete article.