English
Create favicons from an image, text, or emoji — all sizes plus the HTML to paste.
Last updated
#5B8DEF#FFFFFF<link rel="icon" href="/favicon.ico" sizes="any" /> <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" /> <link rel="manifest" href="/site.webmanifest" /> <meta name="application-name" content="Coddy" />
A *favicon* is the tiny icon that appears in browser tabs, bookmarks, history lists, and the iOS / Android home screen when someone saves your site. It is a small thing that has a surprisingly large impact on how a project feels: shipping a real favicon is the difference between a placeholder square and a finished product.
Modern browsers ask for the favicon in a handful of different sizes and formats. Tab and bookmark icons want a 16×16 or 32×32 PNG. iOS Safari wants a 180×180 apple-touch-icon.png. Android's Add to Home Screen wants 192×192 and 512×512 inside a web manifest. Old browsers and some integrations still expect a multi-resolution favicon.ico. Hand-cropping all of those, one at a time, is a lot of busy work — a favicon generator does it in one click.
This generator runs entirely in your browser. The image you upload is decoded into a <canvas> locally, every output size is rendered next to it, and the whole bundle (PNGs, ICO, web manifest, README, and HTML snippet) is packaged into a .zip without ever uploading anything.
favicon.ico is a container format that can bundle several sizes (16, 32, 48) so legacy callers always find what they need.apple-touch-icon.png and entries in a manifest.webmanifest) — both should be present.Use **Text** for a 1-3 character monogram, **Emoji** for a one-glyph icon, or **Image** to drop a PNG, JPEG, or SVG. Image mode is the best starting point if you already have a logo.
Choose a background color (and a text color for monograms). Pick **Square**, **Rounded**, or **Circle** — rounded squares match how iOS clips home-screen icons, so they feel native.
The site name becomes the application-name meta tag and the PWA manifest.webmanifest short_name. Use the brand name users would see in a browser bookmark.
Scroll the preview row to confirm the icon still reads at 16px and 32px (where tabs live). If the design loses readability that small, simplify the source — fewer characters or a tighter crop.
Click **Download favicon bundle (.zip)** to get every output file at once. Drop the files at the root of your site, then paste the HTML snippet into your <head> — you're done.
Every download contains the files below. The HTML snippet wires them up — if you only need a subset, keep the ones that match the platforms you support.
| File | Size | Used by | Notes |
|---|---|---|---|
favicon.ico | 16, 32, 48 | Browser tabs (legacy fallback) | Multi-resolution ICO container — every browser still requests this URL. |
favicon-16x16.png | 16×16 | Browser tab icon | Used on high-DPI displays via <link rel="icon" sizes="16x16">. |
favicon-32x32.png | 32×32 | Browser tab + bookmarks | The main tab icon on retina screens. |
favicon-48x48.png | 48×48 | Windows site tile, taskbar | Bundled inside favicon.ico for legacy callers too. |
apple-touch-icon.png | 180×180 | iOS Safari Add to Home Screen | iOS uses a screenshot fallback if this is missing — always ship it. |
android-chrome-192x192.png | 192×192 | Android home screen | Referenced from the manifest.webmanifest. |
android-chrome-512x512.png | 512×512 | PWA install prompt + splash | Required for installable PWAs. |
site.webmanifest | — | PWA install metadata | Lists icons, name, theme color. Linked via <link rel="manifest">. |
Type 1-3 letters (e.g. **Co**, **C**, or **JS**), pick a brand color, and choose **Rounded** for an iOS-friendly silhouette.
Monograms are the most legible at 16px because there is no detail to lose. Use a bold uppercase letter or a tight two-letter pair, and keep text and background colors high-contrast.
Pick an emoji that matches the project's vibe — 🚀 for a launch, 🧪 for an experiment, 📚 for docs. Set a neutral background.
Emoji favicons feel friendly for personal sites, hackathons, and side projects. Remember the same emoji looks different on macOS (Apple) and Windows (Segoe) — once exported, the bundle freezes the macOS / Linux / Chrome look you see in the preview.
Drop a PNG or SVG of your logo, increase the **Padding** slider to keep the artwork from touching the edges, and turn on **Fill the background color** if your logo has transparent edges.
SVG inputs render crisply at every size. PNG inputs work too but get blurry past their native resolution — start from a source that's at least 512×512.
apple-touch-icon.png. iOS will fall back to a screenshot of the page — which usually looks awful — if no Apple touch icon is declared.<link rel="icon" href="/images/favicon.ico">. That works, but browsers still probe /favicon.ico at the site root. Either put a copy at the root too, or accept the 404s in your access log.favicon.ico (16/32/48), a 32×32 PNG, a 180×180 apple-touch-icon.png for iOS, and 192×192 and 512×512 PNGs declared in a site.webmanifest for Android and installable PWAs. The bundle this tool downloads contains all of them.<link rel="icon" type="image/png">. They also all support a legacy /favicon.ico URL. SVG favicons are supported in modern browsers and let a single file scale crisply at every size — they are great if your logo is already vector, but iOS Safari still needs the PNG fallback.Cmd/Ctrl + Shift + R), clear the site data in DevTools, or bump a query string on the favicon URL (/favicon.ico?v=2). A CDN in front of your site usually also needs a purge./apple-touch-icon.png. The bundle includes it.<canvas>, and every output (PNGs, ICO, ZIP, manifest) is produced locally. Nothing leaves your machine.