What Is a Favicon?
A favicon (favorite icon) is the tiny image that appears in browser tabs, bookmarks, and address bars. It's your website's visual identity in the browser UI.
Users with many tabs open recognize sites by favicon. A distinctive favicon makes your site memorable and professional.
Favicon Formats and Sizes
Modern websites need favicons in multiple sizes and formats:
| Format | Size | Usage |
|---|---|---|
| favicon.ico | 16x16, 32x32, 48x48px | Browser tab (legacy) |
| PNG | 192x192, 512x512px | Android home screen |
| Apple Touch Icon | 180x180px | iOS bookmark, home screen |
| Manifest Icon | 192x192, 512x512px | PWA web app icon |
| SVG | Scalable | Modern browsers (best quality) |
Why Different Sizes?
Different devices and contexts need different sizes. A 16x16px icon is unreadable at 512x512px. Providing multiple sizes ensures your favicon looks sharp everywhere.
Browser Tab
16x16 or 32x32px. Tiny and needs to be recognizable even that small.
Mobile Home Screen
192x192 or 512x512px. Larger, used by Android and iOS when bookmarking.
Address Bar
16x16px. Must be recognizable at tiny size.
How to Generate a Favicon Online
Step 1: Choose Your Image
Start with an image (logo, icon, or simple design). PNG or JPG is fine. Ideally square (1:1 aspect ratio).
Step 2: Upload to Generator
Use EazyStudio's Favicon Generator. Upload your image or paste a URL.
Step 3: Customize (Optional)
Most generators let you:
- Adjust colors
- Add padding/margins
- Set background color
- Preview on different devices
Step 4: Generate
The generator creates multiple sizes and formats automatically. Download as a ZIP file.
Step 5: Add to Your Website
Extract the ZIP and add favicon files to your website root or assets folder. Add HTML references:
Favicon Best Practices
Keep It Simple
At 16x16px, complex details disappear. Use solid colors and simple shapes. Test your design at actual size.
Use Your Brand Colors
Make your favicon instantly recognizable by using your brand colors.
Avoid Text
Text becomes unreadable at tiny sizes. Use symbols or logos instead.
Test on Multiple Browsers
Favicon rendering varies slightly between browsers. Check Chrome, Firefox, Safari, and Edge.
Include Transparency
If your background is transparent, the browser or device will add its own. Design accordingly.
High Contrast
Ensure your favicon contrasts well with browser chrome and device home screens.
Common Favicon Mistakes
- Using text: Illegible at small sizes. Use symbols instead.
- Too complex: Details disappear. Keep it minimal.
- Poor contrast: Favicon merges into background. Use high-contrast colors.
- Only providing .ico: Mobile users need PNG and Apple touch icons too.
- Not testing at actual size: Always preview at 16x16 and 32x32px.
Favicon File Checklist
A complete favicon package includes:
- favicon.ico (16x16, 32x32, 48x48px)
- favicon-16x16.png
- favicon-32x32.png
- apple-touch-icon.png (180x180px)
- android-chrome-192x192.png
- android-chrome-512x512.png
- manifest.json
A good favicon generator creates all of these automatically.
How Favicons Appear on Different Devices
| Context | Device/Browser | Size | Format Used |
|---|---|---|---|
| Browser Tab | Chrome, Firefox, Safari | 16-32px | .ico or PNG |
| Bookmarks | All browsers | 16-32px | .ico or PNG |
| Home Screen | iOS | 180px | Apple touch icon |
| Home Screen | Android | 192/512px | PNG from manifest |
| Web App | PWA | Various | PNG from manifest |
Summary
A favicon is a small but important part of your brand identity. Generate one from your logo in multiple sizes automatically, add it to your site with a few HTML lines, and test across browsers. Modern generators handle all the complexity—you just upload an image and download the complete package.
Try Favicon Generator — Free
No account, no upload to server. Runs entirely in your browser.
Open Favicon Generator