What you get in the ZIP
One click downloads a complete favicon kit covering every modern browser, iOS, Android, and PWA install screen:
favicon-16x16.png,favicon-32x32.png,favicon-48x48.png— classic browser tab faviconsfavicon-96x96.png,favicon-192x192.png,favicon-512x512.png— high-DPI displays + Android home screenapple-touch-icon.png(180×180) — iOS Safari home screenmanifest.json— required for Progressive Web App install promptinstall.html— copy-paste <link> tags ready for your <head>
How to install
Unzip into your site's /public or /static folder, then paste this into your <head>:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.json">
Pro tips for a great favicon
- 16×16 is everything. Most users see your favicon at this tiny size in a tab. Test it. If it's unreadable, simplify.
- Avoid thin lines. They disappear at small sizes. Bold shapes win.
- One letter or one symbol usually beats a logo squashed into 16 pixels.
- High contrast with both light and dark browser themes — test both.
FAQ
Why no .ico file?
Modern browsers (since 2015) accept .png as favicon. Skipping .ico keeps the kit smaller and avoids legacy-format compatibility issues. If you specifically need .ico for old IE compatibility, rename favicon-32x32.png to favicon.ico — most servers serve it correctly.
Is the manifest.json the right one for my framework?
The bundled manifest follows the W3C spec and works as-is for static sites, Vercel, Netlify, GitHub Pages. Frameworks like Next.js or Vite auto-detect it from /public.