What a favicon is and why you need one
A favicon is the tiny icon that shows up in a browser tab, in bookmarks, in the history list, and on a phone's home screen when someone saves your site. It's a small piece of visual branding that does a lot of work: it helps people pick your tab out of twenty others and makes a saved site look finished instead of generic. A site without one just shows a blank document icon, which reads as unpolished.
The catch is that "a favicon" is really a whole set of files. Browsers want a 16x16 and 32x32, iOS wants a 180x180 Apple touch icon, Android and PWAs want 192x192 and 512x512 plus maskable versions, and Windows wants tile images. Making all of those by hand is tedious. This guide walks through doing the whole thing at once with the favicon generator, which runs entirely in your browser. Nothing you upload leaves your device, there's no account, and you get back a ready-to-drop-in package.
How to create a favicon
-
Open the favicon generator and pick how you want to start. At the top, choose one of three input modes: Image (upload a logo or icon), Text (one to three letters, like initials), or Emoji (pick from the grid or type your own). Image is best if you already have a logo. Text and emoji are great when you want something clean fast without opening a design app.
-
If you chose Image, upload a square source. Click the drop zone or drag a file in. For sharp results at every size, start with a square image that's at least 512x512 pixels. If your logo is rectangular or too small, resize and crop it first with the image resizer, then come back. If your source is an SVG and you need a raster copy to feed in, the SVG to PNG converter will export one.
-
If you chose Text or Emoji, set the content and look. Type your letters or pick an emoji, then choose a font from the dropdown. A live preview updates as you go, so you can see exactly how it'll look at icon size before generating anything.
-
Style the icon. Under Style Options, pick a shape (square, rounded, or circle), a background (solid color, gradient, or transparent), and the colors. For gradients you get two colors plus an angle slider. Set the Theme Color too; that's the accent color browsers and PWAs use around your icon. For text and emoji you can also adjust padding so the content isn't crammed to the edges.
-
Choose which sizes to generate. The Sizes to Generate card lists every size as a toggle. Leave them all on for full coverage, or use Select All / Select None to fine-tune. The maskable PWA icons are always included so your home-screen icon looks right inside Android's circular and rounded masks.
-
Click "Generate All Favicon Sizes." The tool renders every selected size on the spot. A Browser Preview appears showing your icon in a mock desktop tab and as a phone home-screen icon, including the maskable version, so you can sanity-check readability before you ship.
-
Download the package. In the Download card, click Download All (ZIP). The ZIP contains every PNG size, a
favicon.ico, an SVG favicon (for text and emoji modes), the HTML link tags, asite.webmanifest, and abrowserconfig.xml. You can also grab individual files (justfavicon.icoorfavicon.svg) from the same card if that's all you need. -
Add the files to your site and paste in the tags. Unzip everything into your site's public/root folder. Open the Integration Code card, copy the HTML Tags, and paste them into the
<head>of your pages. The bundle already references the manifest and browserconfig, so once the files sit in the right place, every platform finds its icon.
Tips
- Keep the design simple. At 16x16 there's no room for fine detail. Bold shapes, a single letter, or a clean emoji read far better than a shrunk-down full logo with text.
- Mind the maskable safe zone. Android crops maskable icons, so keep the important part centered with breathing room around it. The mobile preview shows you how the crop lands.
- Match colors to your brand. Set the theme color to your brand's accent so the icon and the surrounding browser UI feel consistent.
- Use the SVG when you can. For text and emoji icons, the generated SVG scales perfectly and stays crisp on any display. If you ever need to turn a raster icon into a vector for other uses, PNG to SVG can trace it.
- Everything stays local. Generation happens in your browser, so your logo is never uploaded. History is saved only to your own browser's storage and you can clear it anytime.
Common problems
- The icon doesn't change in my tab. Browsers cache favicons aggressively. Hard-refresh (Ctrl/Cmd+Shift+R), open the icon URL directly to confirm it loaded, or test in a private window.
- It looks blurry. Your source image was probably too small or got upscaled. Start from at least 512x512; resize a larger original with the image resizer rather than enlarging a tiny one.
- The home-screen icon looks cut off. That's the maskable crop. Re-generate with more padding or a more centered design so nothing important sits near the edges.
FAQ
Do I need every size in the ZIP?
No, but it's the safest default. The full set covers desktop browsers, iOS, Android, Windows tiles, and PWAs. If you're sure you only need browser tabs, the 16x16, 32x32, and favicon.ico are the essentials, but keeping the rest costs almost nothing.
Is a .ico file still required?
A modern PNG or SVG favicon works in current browsers, but a favicon.ico at the site root remains the most universally recognized fallback, so the tool includes one in every package.
Can I make a favicon without a logo or design software? Yes. Use Text mode for initials or Emoji mode for a recognizable symbol. Pick colors and a shape, generate, and you have a complete set in under a minute.
Does my uploaded image get sent anywhere? No. The generator runs fully in your browser with no upload and no sign-up. For more on keeping site images fast and lightweight, see the image optimization guide.
Need to prep a source image first or convert formats? Try the image resizer, PNG to SVG, or SVG to PNG.