Favicon Generator from an Image
Create favicon and app-icon image sizes from one source image. Download the outputs and review the generated HTML and manifest examples.
Favicon Generator workspace
Drop your logo or icon here
PNG, JPG, WebP, or SVG · 512×512 or larger recommended · processed locally
All 7 Required Sizes
Generates favicon-16, 32, 48, 96, apple-touch-icon (180), and android-chrome (192 and 512) in one upload. Covers browser tabs, iOS, Android, PWA, and Windows shortcuts.
iOS & PWA Ready
Includes the iOS-specific apple-touch-icon.png (180px) plus the PWA-required 192 and 512 manifest icons. No more "looks fine on desktop but blurry on iPhone" surprises.
HTML & Manifest Snippet
Copy a complete <link> tag block AND a site.webmanifest JSON in one click. Paste straight into your <head> — no missing-tag bugs.
100% Client-Side
All resizing happens in your browser via the Canvas API. No request or analytics event contains the selected image, and no signup is required. Works offline once loaded.
Favicon Generator: One Image to Every Browser, iOS & PWA Size
Create favicon and app-icon image sizes from one source image. Download the outputs and review the generated HTML and manifest examples. Small icons need a source that remains recognizable at low resolution. Inspect the smallest generated sizes rather than judging only the large preview. Place the files at the paths used in your HTML and manifest, then check that the published references resolve.
How to use the favicon generator
- Drop or choose a source image — 512×512 or larger (or a vector SVG) gives the sharpest results across all sizes.
- Pick a Background: transparent for icons that float on the tab, or white, black, or a custom brand hex for a solid plate.
- Drag the Inner Padding slider (0–25%) to breathe space around the artwork — iOS masks corners, so ~10% keeps content clear.
- Review the live previews grouped by Web, iOS, and Android / PWA; the 16 and 32px tiles render pixel-exact so you can judge legibility.
- Click Download All for every PNG, then Copy the HTML snippet and the
site.webmanifestinto your project.
How browsers actually choose a favicon
A favicon is declared with <link rel="icon"> tags in the document <head>. When you supply several, the browser does not load them all — it picks one using the type, media, and sizes attributes, then falls back to the next if that format is unsupported. Per the WHATWG HTML Standard, the tie-breaker is document order:
"If there are multiple equally appropriate icons, user agents must use the last one declared in tree order."— WHATWG HTML Standard, Link type "icon"
Two practical rules follow. First, an accurate sizes attribute matters: Chromium can skip an SVG and grab a .ico if the sizes hints are wrong or missing, because it judges some icons "too large" for a 16–32px tab. Second, order your tags low-to-high so the SVG and largest PNG sit last and win the tie. The HTML snippet from this tool follows that convention. The current minimal stack is an SVG plus a 32×32 PNG fallback, a 180×180 apple-touch-icon, the 192/512 PWA icons, and a site.webmanifest — the seven raster files here cover everything except the optional vector, which you add by hand if your source is vector-clean.
Worked examples: source → output
512×512 PNG logo · transparent · 0% padding
Produces all seven files with crisp downscaling. The transparent alpha is preserved, so the icon floats on light and dark tabs alike.
Vector SVG monogram · white background · 12% padding
The SVG is rasterised at each size with a solid white plate, and 12% inset stops the iOS rounded-corner mask from clipping the mark on the 180px apple-touch-icon.
Non-square 800×400 banner · transparent
The renderer uses a contain fit (Math.min of width/height ratios) and centres the image, so a wide banner is letterboxed inside the square — never stretched or cropped.
Edge case · source smaller than 192px
Upload a 128×128 image and the tool flags "smaller than 192px — large sizes will be blurry". Canvas downscales cleanly but cannot invent detail when upscaling to 512, so the 192 and 512 outputs go soft. Re-export the source at 512×512+ or feed an SVG for sharp results everywhere.
Favicon size reference: what each file is for
These are the exact files this generator outputs, with the filename and target each size serves. Filenames match the conventions the bundled HTML and manifest snippets expect.
| Size | Filename | Used for |
|---|---|---|
| 16×16 | favicon-16x16.png | Browser tab (default) |
| 32×32 | favicon-32x32.png | Browser tab (high-DPI) |
| 48×48 | favicon-48x48.png | Windows taskbar shortcut |
| 96×96 | favicon-96x96.png | Chrome desktop shortcut |
| 180×180 | apple-touch-icon.png | iOS home screen (Apple Touch Icon) |
| 192×192 | android-chrome-192x192.png | Android home screen (PWA manifest) |
| 512×512 | android-chrome-512x512.png | Android splash screen / PWA install |
Favicon formats — when to use each
| Format | What it is | When to use it |
|---|---|---|
| favicon.ico | Multi-resolution Windows ICO container (16, 32, 48 stacked) | Still required by IE and some legacy crawlers — host one at site root. |
| PNG (modern) | Per-resolution PNG files referenced via <link rel="icon"> | Preferred by all modern browsers; sharper at exact pixel sizes. |
| SVG | Single vector file that scales to any size | Supported by Chromium, Firefox, Safari TP. Provide as fallback alongside PNG. |
| apple-touch-icon | iOS-specific 180×180 PNG for Home-Screen shortcut | iOS ignores web favicons here — needs the dedicated file at root. |
| webmanifest | JSON manifest pointing to 192px and 512px icons | Required for PWA installability and Android home-screen quality. |
The detail most favicon tools skip
This generator renders with imageSmoothingQuality = 'high' on a 2D canvas and a contain fit — it scales by Math.min(target/width, target/height) and centres the result, so every output is square and undistorted even from a non-square source. The bundled HTML snippet ships a theme-color meta tag set to #ffffff; change it to your brand hex so the mobile browser chrome matches your icon. And the snippet links 16/32/48 PNGs plus the manifest — it deliberately omits a 96px <link> because no browser requests 96 in markup (it is a shortcut/manifest size only), so adding it would just bloat your <head>.
One real gotcha: Chrome caches favicons for weeks. After changing an icon, append a version query (/favicon-32x32.png?v=2) to each <link href> to force a refresh — bumping a file is not enough on its own.
Designing an icon that reads at 16×16
1. One strong silhouette
At 16×16 you have ~256 pixels to carry one idea. Use a single bold shape — a letter, a monogram, or one icon — not a busy combination mark.
2. High contrast both ways
The icon must read on light and dark tabs. Pure black or pure white fills fail on one side; use brand colours with contrast against both.
3. Avoid thin strokes
Strokes under ~1.5px vanish in the 16×16 raster. If your logo uses thin lines, draw a simplified favicon variant — most major brands do.
4. Padding for iOS
iOS masks the apple-touch-icon with rounded corners. Leave ~10% padding so corners do not clip content — use the padding slider above.
Related design & web utilities
Shrink the source image before you generate
Image to Base64Inline a tiny SVG favicon directly in HTML
Color PickerSample a brand hex for the background plate
Open Graph GeneratorBuild the og: tags that sit beside your favicon
Meta Tag PreviewerPreview how your icon and title show in SERPs
HTML FormatterTidy the <head> snippet before you paste it
HTML Entity ConverterEscape characters in your head markup safely
QR Code GeneratorLinkable site previews for printed material
CSS MinifierCompress the styles that ship with your icon
Aspect Ratio CalculatorCrop a source to a clean square first
Guide: Open Graph Meta TagsHow icons, og:image & head tags fit together
All ToolsBrowse the full Toolk utility hub
Last updated: September 15, 2026 · Runs 100% in your browser — no uploads, tool input is not sent to Toolk.
Frequently asked questions
Why does my favicon look blurry at the large sizes?
Canvas downscaling is clean, but upscaling cannot invent detail — feed a 128×128 source and the tool warns that the 192 and 512 outputs will go soft. Re-export your logo at 512×512 or larger, or supply an SVG that stays sharp at every raster size.
What background should I choose for iOS icons?
Apple rounds the corners of home-screen icons itself, so artwork near the edges gets masked. Transparent keeps the icon floating in browser tabs, while a solid plate with roughly 10% inner padding keeps your mark clear of the rounded-corner mask on the 180px Apple Touch Icon.
How are non-square source images handled?
With a contain fit: the renderer scales by the smaller width/height ratio and centers the result, so an 800×400 banner is letterboxed inside each square canvas rather than stretched or cropped.
Do my uploaded images get uploaded to a server?
No. Resizing happens through the Canvas API after the file is read locally — processed entirely in your browser — and Toolk's page analytics do not receive your images. Tool input is not sent to Toolk.
Which sizes matter most if I only ship two files?
Ship the 32px PNG for browser tabs and the 192px PNG referenced from your site.webmanifest for Android and PWA installs; add the 180px Apple Touch Icon when iOS home-screen shortcuts matter. The bundled HTML snippet lists every tag in the low-to-high order browsers expect.