Modern favicon best practices
Modern favicon setup is simple: use SVG as the primary icon, add PNG/ICO fallbacks, and include Apple Touch + PWA icons. This generator outputs the full set in one download.
SVG keeps icons crisp at any size, while PNG/ICO provide compatibility and reliable rendering in search results and legacy contexts. Keep files lightweight and use high-contrast shapes for small sizes.
Why this setup works
- Scales cleanly from 16×16 to 512×512
- Compatible with modern browsers and fallbacks
- Dark mode ready with light/dark colors
- Search-result friendly with a 96×96 PNG
- Lightweight assets for fast load
Browser support (modern browsers)
| Browser |
SVG Support |
Dark Mode |
Recommended Format |
| Chrome / Edge (modern) |
✅ Full |
✅ Yes |
SVG + PNG fallback |
| Firefox (modern) |
✅ Full |
✅ Yes |
SVG + PNG fallback |
| Safari (recent) |
✅ Good |
⚠️ Limited |
SVG + PNG fallback |
| Legacy / embedded |
⚠️ Limited |
— |
ICO or PNG |
Recommended favicon file set
This file set works across modern frameworks and static sites. Place it in your root or /public folder and use the generated HTML snippet.
Perfect File Structure
/public
├── favicon.svg # Primary icon (modern browsers)
├── favicon.ico # Fallback (IE/Safari/Shopify/Webflow)
├── favicon-96x96.png # Google SERP fallback (96×96)
├── apple-touch-icon.png # 180×180 (iOS standard since iOS 8)
├── icon-192.png # 192×192 (Android/PWA)
├── icon-512.png # 512×512 (PWA splash screens + WordPress Site Icon)
└── site.webmanifest # PWA configuration
Essential Favicon Sizes (Priority Order)
| Size |
Purpose |
Priority |
Notes |
| SVG |
Modern browsers, scalable, dark mode |
High |
Keep lightweight |
| 16×16 |
Browser tabs, bookmarks |
High |
Keep lightweight |
| 32×32 |
Retina tabs, Windows taskbar |
High |
Keep lightweight |
| 96×96 |
Search results / fallback |
Recommended |
Keep lightweight |
| 180×180 |
Apple touch icon (iOS/iPadOS) |
High |
Keep lightweight |
| 192×192 |
Android home screen, PWA |
High |
Keep lightweight |
| 512×512 |
PWA splash screens + WordPress Site Icon |
High |
Keep lightweight |
Platform support guide
Different platforms have slightly different requirements. Use this quick guide to pick the right file and placement.
Platform-Specific Favicon Requirements
| Platform |
Required Files |
Upload Method |
Notes |
| WordPress |
icon-512.png |
Settings → Site Icon |
Upload the 512×512 PNG. WordPress generates the rest. |
| Webflow |
favicon.ico + icon-512.png |
Project Settings → Favicon |
Upload ICO for browsers, PNG for dashboard display |
| Wix |
Any square PNG |
Site Settings → Favicon |
Wix converts uploads. Use a square PNG for best quality |
| Shopify |
favicon.ico |
Online Store → Themes → Customize |
Use favicon.ico for broad compatibility |
| Squarespace |
Any square PNG |
Design → Browser Icon |
Upload a square PNG; Squarespace converts |
| Next.js / React |
All files from ZIP |
Drop in /app or /public |
Place files in /app or /public. Add the HTML snippet when needed |
| Static HTML |
All files from ZIP |
Copy files + paste HTML snippet |
Use the HTML snippet from the download for compatibility |
| PWA (Progressive Web App) |
icon-192.png + icon-512.png + site.webmanifest |
Root directory + manifest link |
Include the manifest and both icon sizes |
Next.js / React quick setup
For Next.js (App Router), place files in /app or /public. For Vite/React, place files in /public and add the HTML snippet to index.html.
Next.js Quick Start:
- Download the ZIP from this Favicon Generator
- Place files in
/app or /public
- Add the snippet if your setup does not auto-detect icons
Next.js App Router (metadata):
import type { Metadata } from 'next';
export const metadata: Metadata = {
manifest: '/site.webmanifest',
icons: {
icon: [
{ url: '/favicon-96x96.png', type: 'image/png', sizes: '96x96' },
{ url: '/icon-192.png', type: 'image/png', sizes: '192x192' },
{ url: '/favicon.svg', type: 'image/svg+xml', sizes: 'any' },
],
shortcut: '/favicon.ico',
apple: [{ url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' }],
},
themeColor: [
{ media: '(prefers-color-scheme: light)', color: '#ffffff' },
{ media: '(prefers-color-scheme: dark)', color: '#0f172a' },
],
};
Vite/React Projects:
- Place all favicon files in
/public directory
- Use absolute paths:
/favicon.svg not ./favicon.svg
- Copy the HTML snippet from this generator into
index.html
PWA Requirements:
Installable PWAs expect both 192×192 and 512×512 icons in the manifest. This generator includes both.
Dark mode-ready icons
Dark mode is common across browsers and OS themes. Provide light and dark colors so your favicon stays readable in tabs, bookmarks, and search results.
The SVG output can include light/dark styles via CSS media queries, and the HTML snippet sets theme-color for each mode.
Dark mode tips
- Use high contrast at 16×16 and 32×32 sizes.
- Test both themes in your browser.
- Keep shapes simple for clarity at small sizes.
AI & CLI Automation
AI tools can help you draft a simple SVG quickly. Generate a clean icon, then paste it into the SVG tab or code editor to produce the full favicon package.
AI Prompt Examples (Copy & Use These)
For Claude Code / AI Agents:
"Use the Favicon Generator at [your-url] to create a complete favicon package. I need an SVG with dark mode support, colors #6366f1 (light) and #93c5fd (dark), letter 'A', Inter font, with all PNG sizes for Next.js deployment."
For Design Generation:
"Create a minimalist SVG icon representing [your concept], suitable for a 32×32 favicon, with bold shapes and high contrast. Output as optimized SVG code."
For CLI Automation:
npx sharp-cli input.png -o favicon-{size}.png --resize {size}
curl -X POST https://your-favicon-api.com/generate \
-d '{"text":"A","colors":{"light":"#2563eb","dark":"#93c5fd"}}'
If you already automate design assets, this generator can be the final packaging step for web-ready favicon files.
Performance & SEO
Favicons do not directly change rankings, but they improve recognition in tabs, bookmarks, and search results. A clear, consistent icon helps users find your site quickly.
Keep assets lightweight and simple. Small, optimized files load fast and render crisply at tiny sizes.
Tip: SVG and PNG should be optimized. The generator outputs lightweight files by default.
Helpful references
If you want to dive deeper, these resources cover favicon and PWA guidance:
- W3C - Web standards
- MDN Web Docs - Favicon and manifest docs
- Next.js Docs - App Router metadata
- web.dev - Performance and PWA guidance
- WHATWG - HTML specifications
- Can I Use - Browser compatibility
Ready to ship?
Favicon setup should be quick. Use the generator above, download the ZIP, and drop the files into your project. The HTML snippet is ready to paste.
Need guidance for a specific platform? Check the tutorials for step-by-step instructions.
Ready to create your favicon? Scroll up and use the generator.