Favicon Generator
Make a complete favicon pack from an image, text, or emoji — runs in your browser.
Mac: Ctrl+Cmd+Space · Windows: Win+. · Linux: Ctrl+. (varies)
Add an image, text, or emoji to download.
HTML for your <head>
Everything runs in your browser. Nothing is uploaded.
What is favicon generator?
A favicon is the small icon a browser shows next to a page title — in tabs, in bookmark bars, in history lists, in search results, and on the home screen when a user installs a site as a progressive web app. Modern web browsers and mobile platforms each expect specific files at specific sizes, which is why a single image is no longer enough. This generator produces the canonical 2026 favicon pack: a multi-resolution favicon.ico, two standalone PNGs (16×16 and 32×32), an apple-touch-icon.png at 180 pixels, two larger PNGs for Android and PWA installs (192 and 512 pixels), and a site.webmanifest that ties them together.
Three input modes cover the most common starting points. Image mode accepts an existing logo (PNG, JPG, WebP, SVG, or GIF up to 10 MB), with a Cover option that center-crops to a square and a Contain option that letterboxes a non-square image with padding-color fill. Text mode lets you compose a 1–4 character monogram from ten bundled fonts — Inter, Roboto, Space Grotesk, Playfair Display, JetBrains Mono, Caveat, Merriweather, Bebas Neue, Bungee, and Pacifico — covering the common archetypes (modern sans, tech-startup, editorial serif, mono, handwritten, retro display). Emoji mode renders any single emoji from your operating system’s emoji set onto the icon, with the result rasterized to PNG so visitors all see the same export.
Common controls apply across all three modes. The shape selector clips the icon to a square, a 16%-radius rounded rectangle, or a circle. A background color picker sets the fill behind the foreground content; a padding slider (0–25%) gives you space between the foreground and the icon edge. A live preview at 16, 32, 180, and 256 pixels shows exactly what visitors see — pay attention to the 16-pixel preview, because that is the size most users actually encounter most of the time.
The output is delivered as a single ZIP file built entirely in your browser using a homegrown ZIP encoder (no third-party dependency). The seven files inside are sized per the standard favicon recommendations that have settled in around 2025–2026 and are accepted by every major framework, hosting platform, and browser. Below the download button, a copy-paste HTML snippet lists the five <link> tags you paste into your site’s <head>. The snippet is deliberately small — five lines covers all modern browsers and platforms, replacing the dozen-plus lines that legacy favicon services still produce for mstile-150x150.png, browserconfig.xml, and safari-pinned-tab.svg (none of which are honored by any browser shipped after 2022).
Like the other tools on sometools.com, the favicon generator runs entirely client-side. Your image, text, or emoji never leaves the browser tab — the canvas API rasterizes the design, the homegrown ZIP and ICO encoders package the bytes, and the result downloads through a Blob URL. You can verify this by opening browser dev tools and watching the Network tab while you generate and download a pack: zero requests fire after the page loads its bundled fonts.
When to use a favicon generator
- Launching a new site or app — Drop in your logo and walk away with a ZIP that covers every browser and platform — favicon.ico for desktop tabs, apple-touch-icon for iOS home screens, 192/512 PNGs for Android and PWAs, and a web manifest. Paste five <link> tags into your <head> and you are done.
- Replacing a missing or blurry favicon — If your tab icon looks fuzzy on a Retina display, you are probably serving a single 16×16 image. Re-export from this tool to get a multi-resolution favicon.ico (16/32/48) plus the larger PNGs every modern browser actually picks up.
- Designing a quick monogram favicon — No logo yet? Type one or two letters, pick a font and brand color, and the tool gives you a clean monogram favicon in every size. Useful for early-stage projects, internal tools, hackathon submissions, and personal sites.
- Using an emoji as your favicon — Pick an emoji from your OS picker, set a background color, and download the pack. The exported PNG is a rasterized snapshot of the emoji as your device renders it — your visitors all see the same image regardless of their own platform.
How to use the Favicon Generator
- Pick an input mode — Click the Image, Text, or Emoji tab depending on what you want to start with. The default is Text mode with the letter 'S' on a blue rounded background — a usable favicon already.
- Design the icon — Tweak the text, font, weight, and foreground color (Text mode) or upload an image and choose Cover/Contain (Image mode) or pick an emoji (Emoji mode). Adjust the shape (square, rounded, or circle), background color, and padding to taste. The preview updates live at 16, 32, 180, and 256 pixels.
- Download the favicon pack — Click Download favicon pack — your browser saves a ZIP containing seven files: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, and site.webmanifest.
- Copy the HTML snippet into your <head> — Open the 'HTML for your <head>' section, click Copy snippet, and paste the five <link> tags into your site's <head>. Upload the seven files to your site root next to index.html (or the equivalent location for your framework — Astro / Next / Vite / Rails / Django all serve a public/ or static/ directory at the URL root).
- Edit site.webmanifest with your real site name — Open site.webmanifest in a text editor and change the 'name' and 'short_name' fields from 'My Site' to your actual site name. The manifest controls how your icon appears when installed as a PWA on Android or added to the home screen.
Worked examples
Monogram from text
Input: Text 'AB', Bebas Neue Bold, white on #ff5f1f, rounded shape, 8% padding
Output: favicon.ico (16/32/48 multi-res) + favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180), android-chrome-192/512.png, site.webmanifestTotal ZIP size ≈ 12–18 KB depending on the design's complexity.
Logo upload, contain fit
Input: Image 800×400 wordmark PNG, Contain fit, white background, 10% padding
Output: Same 7-file pack; the wordmark is letterboxed into a square with white padding above and below so it remains legible at 16 px.Use Contain when your logo is wider than tall; Cover crops to a square instead.
Emoji favicon
Input: Emoji 🚀, no text, navy background #0b0f1a, circle shape, 10% padding
Output: Pack with the rocket emoji centered on a navy circle. Apple Color Emoji on Mac, Segoe UI Emoji on Windows — once exported the PNG is identical for every visitor.Frequently asked questions
What favicon files do I actually need in 2026?
favicon.ico (a multi-resolution container with 16, 32, and 48 pixel images for desktop browser tabs, bookmarks, and history); apple-touch-icon.png at 180×180 (iOS home-screen icon); android-chrome-192x192.png and android-chrome-512x512.png (Android and PWA install); and site.webmanifest (PWA metadata that points at the two PNGs above). This generator also includes favicon-16x16.png and favicon-32x32.png as standalone PNGs because some build systems and crawlers prefer them over the multi-resolution ICO.Do I still need an ICO file?
favicon.ico is the single file every browser checks first — Internet Explorer, older Edge, server logs, link-preview crawlers, and feed readers all look for /favicon.ico by name even when no <link rel="icon"> tag exists. A modern .ico contains multiple PNG-encoded resolutions inside it so a single file covers crisp 16, 32, and 48 pixel renderings.What size should an apple touch icon be?
Why does my favicon look blurry?
favicon.ico with 16, 32, and 48-pixel images, plus a 32×32 standalone PNG referenced via <link rel="icon" sizes="32x32">. This generator emits both.Do I need android-chrome-192x192.png?
What is site.webmanifest?
<link rel="manifest" href="/site.webmanifest">. After downloading the pack, open it in a text editor and replace the placeholder name with your real site name.