Favicon Generator
Generate favicons in all standard sizes from any image. Download as a ZIP with all sizes included.
Drop an image or click to upload
PNG, JPG, SVG, any size
What Is a Favicon?
A favicon (favourite icon) is the small icon that appears in browser tabs, bookmarks, and mobile home screens next to your website's name. It's one of those tiny details that makes a website look professional — without one, browsers show a generic blank icon that makes your site look unfinished.
Modern websites need favicons in multiple sizes: 16×16 for browser tabs, 32×32 for taskbar shortcuts, 180×180 for Apple devices, and 192×192 or 512×512 for Android PWAs. This generator creates all standard sizes from a single source image, packaged in a ZIP for easy deployment.
Required Favicon Sizes
| Size | Used For | HTML Tag |
|---|---|---|
| 16×16 | Browser tabs, address bar | link rel="icon" sizes="16x16" |
| 32×32 | Taskbar shortcuts, retina tabs | link rel="icon" sizes="32x32" |
| 48×48 | Windows site pinning | link rel="icon" sizes="48x48" |
| 180×180 | Apple Touch Icon (iOS) | link rel="apple-touch-icon" |
| 192×192 | Android Chrome, PWA manifest | manifest.json icons |
| 512×512 | PWA splash screen, large displays | manifest.json icons |
What this means for you: At minimum, you need a 32×32 favicon.ico and a 180×180 apple-touch-icon. For PWAs, add the 192 and 512 sizes to your manifest.json.
Tips for Great Favicons
Keep It Simple
At 16×16 pixels, fine details disappear. Use a bold, recognisable shape — a single letter, geometric logo, or simplified icon. Text-heavy logos won't work at this size.
Use a Square Source
Start with a square source image (at least 512×512). Non-square images get squashed during generation. Crop to square before uploading for best results.
Test on Dark Mode
Many browsers show favicons on both light and dark backgrounds. Ensure yours has enough contrast to be visible in both. Consider adding a subtle border or background if needed.
PNG Over ICO
Modern browsers support PNG favicons. ICO format is only needed for legacy IE support. Use PNG for crisp rendering on high-DPI screens.
Favicon Formats Compared
| Format | Browser Support | Transparency | Best For |
|---|---|---|---|
| .ico | All browsers (including IE5+) | Yes | Maximum compatibility |
| .png | All modern browsers | Yes | Crisp rendering on retina |
| .svg | Chrome, Firefox, Edge | Yes | Scalable, supports dark mode media query |
| .webp | Limited | Yes | Not recommended for favicons |
The modern best practice is to use an SVG favicon as the primary (it supports dark mode via CSS media queries inside the SVG), with a 32×32 PNG fallback for Safari and older browsers.
Related Tools
Image Resizer
Resize images to exact dimensions
Image Compressor
Reduce image file sizes
Image to PNG
Convert images to PNG format
Placeholder Image Generator
Create sized placeholder images
Colour Palette Generator
Generate colour schemes for branding
Meta Tag Generator
Generate meta tags including favicon links
How to use this tool
Upload an image or logo to use as your favicon
Preview it at multiple sizes (16×16, 32×32, 192×192)
Download the favicon package with all required formats
Common uses
- Creating browser tab icons for new websites
- Generating PWA icons in all required sizes
- Producing Apple Touch icons for iOS home screens
- Converting logos to ICO format for legacy browser support
Share this tool