Favicon Generator

A favicon is the small icon that shows up in a browser tab, bookmarks list, and search results next to your site's name, and it's one of the few branding touches that appears everywhere a visitor sees your site outside the page itself. This favicon generator builds a full set of favicon sizes from either a short piece of text or emoji, or an image you already have, without needing any design software.

There are two starting points: type one or two characters (a letter, initials, or an emoji) and pick a background color, text color, and text size to generate a simple icon on the spot, or upload an existing logo or image to turn it into a properly sized favicon set. Either way, you get a live 64x64 preview before generating, so you can see roughly how the icon will read at real browser-tab size.

Everything is drawn using the HTML canvas element directly in your browser — no image is uploaded anywhere, and generation happens instantly. You get a real multi-resolution favicon.ico alongside PNGs at 16, 32, 48, 64, 180, 192, and 512 pixels, downloadable individually or as a single ZIP, plus the exact HTML link tags and a ready-made site.webmanifest to wire the files into your site.

Different places a favicon appears expect different pixel sizes: 16x16 is the classic browser tab size, 32x32 is used for higher-density displays and desktop shortcuts, 180x180 is what iOS grabs when a page is added to an iPhone or iPad home screen, and 192x192 and 512x512 are what Android and PWA manifests request for home screens and splash screens. This generator produces all seven sizes in one pass — 16x16, 32x32, 48x48, 64x64, 180x180, 192x192, and 512x512 — from a single upload or text input.

The files are named the way the rest of the web expects them: favicon-16x16.png and favicon-32x32.png for the browser sizes, apple-touch-icon.png for the 180, and android-chrome-192x192.png and android-chrome-512x512.png for the manifest entries. That means the generated HTML snippet and site.webmanifest work as-is once the files are in your site root, with no renaming step.

• 16x16 and 32x32 — standard browser tab and bookmark icons
• 48x48 and 64x64 — higher-density displays and desktop shortcuts
• 180x180 — Apple touch icon for iOS home screens
• 192x192 — Android home screen and standard PWA manifest icon
• 512x512 — larger PWA splash/manifest icon
• favicon.ico — 16, 32 and 48 bundled into the one file browsers request by default

The text mode is the fastest path to a usable favicon when you don't have a logo ready: type one or two characters, pick a background color and text color, and adjust the font size slider until the live preview looks balanced. This produces a clean, rounded-square icon built entirely from color and type, which works well for a brand initial or a short abbreviation and reads clearly even at 16x16.

Image mode is the better choice once you have an actual logo or icon graphic, since it preserves your existing branding rather than approximating it with text. For the cleanest result, start from a square image — ideally at least 192x192 pixels so it doesn't need to be enlarged — since a non-square source gets stretched to fit each square favicon canvas rather than cropped.

After generating your favicons, the tool prints the exact block to paste into your <head>: the favicon.ico link, the 16 and 32 PNG links, the apple-touch-icon link, and the manifest link. This is the step most people get wrong — declaring only one PNG, forgetting the Apple touch icon so iOS home screens show a blurry screenshot instead, or linking a manifest that doesn't exist. A second copy button gives you a matching site.webmanifest containing the 192 and 512 entries, so that link resolves to a real file.

Copy both blocks, paste the link tags inside the <head> section alongside your title and meta tags, and put every downloaded file plus site.webmanifest in your site's root folder. The generated tags assume the files sit at the root of your domain (a path like /favicon-32x32.png). If your project serves static files from a different folder — a public/ or static/ directory that maps to a subpath, for example — adjust the href values in the copied tags to match where you actually place the downloaded files, or the browser won't find them.

Modern browsers fully support PNG favicons declared through individual link tags with explicit sizes attributes, and those tags are what most of your visitors' browsers will actually use. But browsers, crawlers, feed readers, chat previews, and link unfurlers still request /favicon.ico from your domain root whether or not you declare it, so a site without one logs a steady trickle of 404s and occasionally shows a blank icon where a tool didn't read your link tags.

This generator builds a genuine multi-resolution favicon.ico containing the 16, 32, and 48 pixel icons in one file. The ICO container is written byte by byte in your browser — a 6-byte ICONDIR header, a 16-byte directory entry per image recording its dimensions, byte length and offset, then the image payloads — with PNG data embedded inside, which every browser in use today accepts. Download it, drop it at your site root, and the fallback request resolves correctly.

A favicon has to work at an extremely small size, so anything that looks fine on a full logo can turn into an unrecognizable smudge at 16x16 pixels. Simple shapes, a single bold letter, or a recognizable silhouette hold up far better than detailed illustrations, thin lines, or small text beyond a single character or two.

High contrast between the background and foreground colors matters more at this size than subtle color choices, since low-contrast combinations tend to blur together once scaled down. When using text mode, keep the character count to one or two and push the font size slider up toward 70-80% so the character fills most of the available space rather than looking small and lost in the middle.