How to Generate a Favicon for Your Website
A favicon is the small icon that appears in browser tabs, bookmarks, and search results. In 2026, websites need favicons in multiple sizes and formats for different devices and contexts — browser tabs, iOS home screen, Android PWA icons, and Windows tiles. Generating all of them from a single source image is the standard workflow.
- Create favicons in all required sizes and formats.
- Covers required favicon sizes in 2026.
- Covers preparing your source image.
- Covers html meta tags for favicons.
- Covers testing your favicon.
Required Favicon Sizes in 2026
The minimum set for full coverage: favicon.ico (32×32, for legacy browsers), favicon-32x32.png (modern browsers), favicon-16x16.png (small tab contexts), apple-touch-icon.png (180×180, iOS home screen), favicon-192x192.png (Android Chrome), favicon-512x512.png (PWA splash screens). The Favicon Generator produces all of these from a single upload.
Preparing Your Source Image
Start with a square image at least 512×512 pixels. SVG is ideal — it scales without quality loss. PNG works well at 512×512 or higher. The icon must be recognizable at 16×16 pixels, which means simple shapes and high contrast. Detailed logos, thin lines, and small text won't survive the reduction. Test your design at 16×16 before committing.
HTML Meta Tags for Favicons
Add these to your
:background-size animation or @property registered custom properties instead.The site.webmanifest file references the 192×192 and 512×512 icons for Android PWA installation.
Testing Your Favicon
After deployment, check: the browser tab shows the correct icon, iOS 'Add to Home Screen' shows the apple-touch-icon, Google Search results show the favicon next to your URL, and the favicon appears in bookmark lists. Clear your browser cache if you've updated an existing favicon — browsers aggressively cache favicons.