What is a favicon?
A favicon (short for favorite icon) is the small icon that appears in the browser tab, the address bar, bookmarks, and on the home screen when users save your site to their phone. Despite its tiny size, the favicon is one of the highest-frequency brand touchpoints on the web — users see it every time they look at an open tab.
A missing or low-quality favicon signals an unfinished site. A crisp, recognizable favicon builds trust and makes your tab instantly identifiable when users have dozens of tabs open.
What is included in the favicon package?
This generator produces everything a modern website needs, in one download:
| File | Dimensions | Used for |
|---|---|---|
favicon.ico | 16 / 32 / 48 px (multi-size) | All browsers, OS shortcuts, IE fallback |
favicon-16x16.png | 16 × 16 | Browser tab (standard resolution) |
favicon-32x32.png | 32 × 32 | Address bar, bookmarks, Retina tabs |
favicon-48x48.png | 48 × 48 | Windows taskbar pinned sites |
apple-touch-icon.png | 180 × 180 | iOS & macOS Safari home screen bookmarks |
android-chrome-192x192.png | 192 × 192 | Android home screen shortcut (PWA) |
android-chrome-512x512.png | 512 × 512 | Android splash screen (PWA) |
site.webmanifest | — | PWA manifest — edit name & short_name |
README.html | — | Copy-paste HTML snippet for your <head> |
How to create a favicon from your logo
- Prepare a square image. Crop your logo to a 1:1 aspect ratio, ideally 512×512 px or larger. Transparent PNG backgrounds work perfectly — they stay transparent at every icon size. If your logo is rectangular, use just the icon mark or symbol, not the full logo-with-wordmark.
- Upload the image. Drop it into the tool above or click to browse. PNG, JPG, WebP, and SVG are all accepted.
- Preview at small sizes. The preview grid shows how your icon looks at 16, 32, 48, and larger sizes. If the 16 px version looks blurry or unclear, consider simplifying your design.
- Download the package. Click "Generate & Download" and you get
favicon-package.zipwith all 9 files ready to deploy. - Deploy. Upload all files to your site root and paste the HTML snippet from
README.htmlinto your<head>.
How to add a favicon to your website
Place all files from the ZIP in your site root (the same directory asindex.html), then add the following to your HTML <head>:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Browsers read the <link> tags in order and pick the best format and size they support. Modern Chrome and Firefox use the PNG variants; Internet Explorer and legacy environments fall back to favicon.ico; iOS Safari usesapple-touch-icon.png; Android and PWA installs read fromsite.webmanifest.
How to add a favicon in Next.js
In Next.js 13+ with the App Router, place icon.ico (renamefavicon.ico) and apple-icon.png (renameapple-touch-icon.png) directly in the app/ directory — Next.js auto-generates the appropriate <link> tags. For fine-grained control, export a metadata object:
// app/layout.tsx
export const metadata = {
icons: {
icon: [
{ url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
{ url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
],
apple: '/apple-touch-icon.png',
},
};How to add a favicon in WordPress
WordPress has a built-in "Site Icon" field: go to Appearance → Customize → Site Identity → Site Icon and upload your square PNG. WordPress generates all the necessary sizes automatically and injects the correct <link> tags. Use the 512×512 PNG from this package for the best quality. Alternatively, upload it as a logo and use the classic favicon.ico in your theme's functions.php.
Favicon size guide: which size for what
| Size | Context | Notes |
|---|---|---|
| 16 × 16 | Browser tab (standard DPI) | Minimum viable favicon; very limited detail |
| 32 × 32 | Address bar, bookmarks, Retina tabs | Best single-size choice for websites |
| 48 × 48 | Windows taskbar pinned sites | Useful for PWAs and desktop shortcuts |
| 64 × 64 | High-DPI browser bars | Included in ICO for 2× screens |
| 180 × 180 | iOS / macOS Safari home screen | apple-touch-icon — required for iOS bookmarks |
| 192 × 192 | Android home screen (PWA) | Listed in site.webmanifest |
| 512 × 512 | Android splash screen (PWA) | Chrome PWA install screen |
ICO vs PNG favicon: which should you use?
Use both. favicon.ico guarantees compatibility with every browser, including Internet Explorer 5+, every version of Windows Explorer, older macOS Finder, and embedded browsers in desktop apps. PNG favicons are smaller, support higher color accuracy, and are preferred by modern browsers. SVG favicons are infinitely scalable and tiny — but not supported everywhere. The combination of ICO (fallback) + PNG (modern) + apple-touch-icon (iOS) covers 100% of common use cases.
Favicon design tips: what works at small sizes
At 16×16 pixels, you have 256 pixels total — roughly a 4×4 grid of legible shapes. Here is what survives the downscale:
- A single bold letter or monogram on a solid background (e.g., Google's G, Notion's N)
- A simple geometric symbol: circle, square, triangle, checkmark
- A solid icon mark with thick strokes and high contrast between foreground and background
What does not survive:
- Thin lines (disappear or aliase at 16 px)
- Multiple colors or gradients (blur together)
- Text with words (illegible below 32 px)
- Detailed illustrations or photography
Many companies use a completely different, simplified mark for their favicon compared to their full brand logo. Figma uses an F, Stripe uses an S, Airbnb uses the Bélo symbol. Design your favicon as a standalone symbol, not a miniature logo.
Privacy
All processing runs in your browser using the Canvas API and JSZip. Your image is never uploaded to any server. The ZIP file is generated and downloaded entirely on your device — we never see your image, and nothing is stored after you close the tab.