That tiny icon in the browser tab? It does more than you think. A favicon (short for "favorites icon") helps users identify your site in a sea of open tabs, makes bookmarks recognizable, and — here is something most people miss — it shows up in Google search results on mobile. A missing favicon screams "this website was not finished."
The annoying part is that you do not need just one favicon — you need about 10 different sizes for different devices and browsers. Seriously, it is a mess: ICO for legacy browsers, PNG for modern ones, Apple Touch Icon for iPhones, and a web manifest for Android. We have set up favicons on dozens of sites and the number of formats still surprises us. This guide covers every format, the exact sizes you need, how to add them to your HTML, and the common mistakes that make favicons blurry or invisible.
Generate Favicons — All Sizes, One Upload
ICO, PNG, Apple Touch Icon, Android Chrome. Download complete package.
Every Favicon Size You Need (Complete List)
| File | Size | Used By |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Legacy browsers, address bar |
| favicon-16x16.png | 16×16 | Browser tabs |
| favicon-32x32.png | 32×32 | Browser tabs (retina) |
| apple-touch-icon.png | 180×180 | iPhone/iPad home screen |
| android-chrome-192.png | 192×192 | Android Chrome, PWA |
| android-chrome-512.png | 512×512 | Android splash screen, PWA |
| mstile-150x150.png | 150×150 | Windows Start tiles |
| safari-pinned-tab.svg | SVG | Safari pinned tabs (monochrome) |
Do you really need all of these? For most websites, generating favicon.ico (multi-size), 32×32 PNG, and 180×180 Apple Touch Icon covers 95% of use cases. Our generator creates all sizes from a single upload so you do not have to worry about it.
How to Create and Add a Favicon
- Prepare your source image: Start with a square image at least 512×512px. Your logo or a simplified version works best. Simple shapes and bold colors look better at tiny sizes.
- Generate favicons: Upload to ToolsArena Favicon Generator — it creates every size and format automatically.
- Download the package: You get a ZIP with all files.
- Upload to your site: Place files in your website root directory (where index.html lives).
- Add HTML tags: Paste these in your
<head>section:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Designing Favicons That Work at Tiny Sizes
Your detailed logo probably looks terrible at 16×16 pixels. Here is how to make favicons that work:
- Simplify ruthlessly: Use only the icon mark or a single letter of your logo. If your logo is "TechCorp" with a detailed rocket icon, just use the rocket or the letter T.
- Bold colors: Subtle gradients disappear at small sizes. Use solid, contrasting colors — dark icon on light background or vice versa.
- No text (except initials): Text is unreadable below 32px. A single bold letter works; words do not.
- Test at actual size: Design at 512px, then zoom out to 16px. If you cannot recognize it, simplify more.
- Consider dark mode: Your favicon should be visible on both light and dark browser chrome. Pure white icons disappear in light mode; pure dark icons disappear in dark mode. Add a subtle background or border.
Adding Favicons to Next.js, WordPress, and Other Platforms
Next.js / React
Place favicon.ico in the /app directory (App Router) or /public directory. Next.js automatically serves it. For other sizes, add link tags in your root layout.
WordPress
Go to Appearance → Customize → Site Identity → Site Icon. Upload a 512×512 image. WordPress generates all sizes automatically.
Shopify
Settings → Online Store → Themes → Customize → Theme Settings → Favicon. Upload 32×32 PNG.
Static HTML
Place files in root directory and add link tags in <head> as shown above.
Squarespace / Wix
Both have favicon settings in their site configuration. Upload a 512×512 square image and the platform handles resizing.
Favicon Not Showing? Common Fixes
- Browser cache: The #1 reason. Favicons are aggressively cached. Clear cache or try incognito mode. On Chrome: Ctrl+Shift+Delete → Cached images and files.
- Wrong path: If your favicon is at
/images/favicon.icobut your HTML says/favicon.ico, it will not load. Check the path matches. - Missing ICO format: Some older browsers only read .ico files. Always include a favicon.ico in addition to PNG files.
- Not square: Favicons must be perfect squares. A 200×180 image will be stretched and look distorted.
- Too detailed: If your favicon looks like a blurry smudge, the source image is too complex for small sizes. Simplify it.
- CDN caching: If you use Cloudflare or another CDN, purge the cache after uploading new favicons. CDNs can serve the old favicon for hours or days.
How to Use the Tool (Step by Step)
- 1
Upload a square image
At least 512×512px. Logo or icon works best.
- 2
Generate all sizes
ICO, PNG, Apple Touch Icon, Android Chrome — automatic.
- 3
Download package
ZIP with all files and HTML code.
- 4
Add to your website
Upload files, paste link tags in HTML head.
Frequently Asked Questions
What is a favicon?+−
A favicon is the small icon that appears in browser tabs, bookmarks, and search results next to your website name. It is usually 16×16 or 32×32 pixels. The name comes from "favorites icon" because it originally appeared in browser bookmark (favorites) lists.
What size should a favicon be?+−
You need multiple sizes: 16×16 and 32×32 for browser tabs, 180×180 for Apple devices, and 192×192 and 512×512 for Android/PWA. Start with a 512×512 source image and our generator creates all sizes automatically.
What format should my favicon be in?+−
ICO for maximum compatibility (required for some older browsers), PNG for modern browsers, and optionally SVG for scalable quality. Having both favicon.ico and PNG files covers every browser and device.
Why is my favicon not showing up?+−
Most likely browser caching — try clearing your cache or opening in incognito. Other common causes: wrong file path in HTML, file not uploaded to root directory, or non-square image. Check browser dev tools Network tab to see if the favicon file is loading.
Can I use my logo as a favicon?+−
If your logo is simple and recognizable at 16px — yes. If it is detailed or has text, use just the icon mark or a single letter. Most companies use a simplified version of their logo for the favicon. Google uses just the G, not the full word.
Do I need the Apple Touch Icon?+−
If any iPhone or iPad users might add your site to their home screen, yes. Without it, Apple devices use a screenshot of your page as the icon, which looks terrible. The Apple Touch Icon is 180×180px and makes your site look like a proper app on iOS.
How do I add a favicon in WordPress?+−
Go to Appearance → Customize → Site Identity → Site Icon. Upload a 512×512 square image. WordPress automatically generates all the sizes it needs. No code editing required.
Can I use an emoji as a favicon?+−
Technically yes — with an SVG favicon you can embed an emoji. But emojis render differently across platforms, so your favicon will look different on Windows vs Mac vs Android. For a consistent brand experience, use a custom icon.
Generate Favicons — All Sizes, One Upload
ICO, PNG, Apple Touch Icon, Android Chrome. Download complete package.
Generate Favicons →Related Guides
Meta Tag Generator Guide
Master title tags, meta descriptions, Open Graph, Twitter Cards, and canonical tags — with exact character limits and 2026 Google best practices.
Schema Markup Generator Guide
Generate JSON-LD schema markup for articles, products, FAQs, events, and more — boost your Google rich results without coding.