A favicon is the small icon that appears in browser tabs, bookmarks, and on phone home screens. It is a tiny detail that makes a site feel finished. The Favicon Generator turns any image into the full set of sizes you need and gives you the HTML to wire them up.
Why you need multiple sizes
Different contexts request different icon sizes: browser tabs use 16 and 32 pixels, Apple devices use a 180-pixel touch icon, and web app manifests reference 192 and 512-pixel icons. Providing each size means your icon looks crisp everywhere instead of being awkwardly scaled.
- 16×16 and 32×32 — browser tabs and bookmarks
- 180×180 — Apple touch icon for iOS home screens
- 192×192 and 512×512 — Android and PWA manifests
Creating a favicon set from one logo
- Drag in or select a square image or logo (512×512 or larger is ideal).
- The tool renders every common size and previews each.
- Download the sizes you need.
- Copy the provided HTML link tags into your page’s <head>.
Generate, download, paste the tags, and your site has a polished icon across every browser and platform.
A sizing cheat sheet for real browsers
| Target | Size | Used by |
|---|---|---|
| favicon.ico | 16×16 (and 32×32 inside) | Address bar (legacy) |
| favicon-32.png | 32×32 | Tab + taskbar |
| favicon-16.png | 16×16 | Tiny contexts |
| apple-touch-icon.png | 180×180 | iOS home screen |
| android-chrome-512.png | 192×192 / 512×512 | PWA install prompt |
Testing your favicon before launch
- Open the site in a fresh incognito window, not a cached tab.
- Pin the tab and check both light and dark browser themes — some favicons vanish on dark chrome.
- Squint at a 16×16 render: a busy logo becomes a blob; simplify the mark.
- Bookmark-on-desktop check catches missing/misplaced tags.
From a logo to a 16px mark
What reads beautifully at 512px becomes noise at 16px, so the favicon is its own design exercise. The reliable recipe: one distinctive shape, one strong color, high contrast against both light and dark chrome, and generous padding. A silhouette of the logo beats a full-color miniature; a circle or square anchor survives rounding better than spikes and fine strokes that dissolve into a pixel.
- Simplify to the one shape people recognize, then drop the rest.
- Reuse the exact file for 16 and 32 so the icon does not visually shift between contexts.
- Test in the tab, on the taskbar and after a bookmark — three layouts decide your success.
