Inspiration from article How to Favicon in 2025: Three files that fit most needs.
Image sizes:
- .svg
- 32x32
- 180x180
- 192x192
- 512x512
- .ico
HTML head:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">web manifest file manifest.webmanifest:
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}Start with SVG at 512x512 as you can rasterize this image and then downscale it for everything else.
Your HTML page should have a <link> tag in its <head> with rel="icon", type="image/svg+xml" and with the href containing a link to the SVG file as attributes. You can make .svg file with Inkscape https://inkscape.org/about/.
You must have /favicon.ico at the root of the website. Minimum 32x32 but you should support sizes 16-512. You can make .icon files with GIMP. See https://neerajjaiswal.hashnode.dev/how-to-convert-png-to-ico-using-free-tool-gimp.
Your HTML page should have <link rel="apple-touch-icon" href="apple-touch-icon.png"> tag inside <head> pointing to an image 180x180. Apple touch icon will look better if you place 20px padding around the icon and add some background color.
The manifest should have an icon field that links to three icons: 192×192, for display on the home screen, a 512×512 maskable icon for different Android launchers, and a 512×512 which will be used as a splash screen while the PWA is loading.