How to Create a Complete Favicon Set (2026)
Generate every favicon variant your site needs: browser tabs, home screen icons, PWA manifests, and social media tiles.
- Generate every favicon variant your site needs: browser tabs, home screen icons, PWA manifests, and social media tiles.
- The Complete Favicon File List.
- Creating Source Artwork.
- Generating All Sizes.
- Implementing the HTML.
The Complete Favicon File List
A ‘favicon’ in 2026 is actually 6–10 files: 32×32 browser tab icon, 16×16 for older browsers, 180×180 Apple Touch Icon for iOS, 192×192 and 512×512 for PWA manifests, an SVG for modern browsers (scales perfectly, supports dark mode), an optional Windows tile, and OG images at 1200×630. Most sites are missing several of these, resulting in blurry or missing icons on some platforms.
Creating Source Artwork
Start with a 1024×1024 PNG with your mark centered. The design must be recognizable at 16×16 — which means dramatic simplification. If your full logo doesn’t work tiny, use an initial, monogram, or abstract mark. Avoid thin lines, small text, fine details. Use bold shapes with high contrast. Test at 16×16 and 32×32 before generating all sizes. For SVG, use media queries for prefers-color-scheme to adapt for dark mode.
Generating All Sizes
Use the Favicon Generator to produce all sizes from your source. You need: favicon.ico (16+32), favicon-32x32.png, favicon-16x16.png, apple-touch-icon.png (180), favicon-192x192.png, favicon-512x512.png, and optionally favicon.svg. Place SVG in root for maximum benefit — browsers get perfect scaling and dark mode. The site.webmanifest references 192 and 512 sizes for PWA installs.
Implementing the HTML
Add link tags to your HTML head on every page: <link rel="icon" type="image/svg+xml" href="/favicon.svg"> for modern browsers, PNG fallbacks, and <link rel="apple-touch-icon"> for iOS. Place favicon.ico at root — some tools request it regardless of link tags. Verify by adding your site to your phone’s home screen and checking icon quality.