Processed locally in your browser — nothing is uploaded.
Favicon Generator
Quick answer
Turn one source image into the full set of icon files a modern site actually needs, from a multi-resolution favicon.ico down to an apple-touch-icon and a ready-to-paste link snippet.
What the favicon generator does
Upload a single image and the tool generates the whole family a browser or an operating system might ask for: a favicon.ico containing several resolutions bundled together, individual PNGs at 16, 32, 48, 64, 96, 128, 180, 192, 256 and 512 pixels, a 180-pixel apple-touch-icon for iOS home screens, and a site.webmanifest file that lists the icons for Android and PWA install prompts. A small HTML block with the correct link tags for each file is generated alongside them, ready to paste into the head of a page.
The source matters more here than in most resizing tasks. Starting from a square SVG or a PNG at least 512 pixels on a side gives every generated size clean, sharp downscaling; a small or non-square source forces upscaling or letterboxing, which shows up as blur or awkward padding.
The detail people miss most often is that a favicon has to read at 16 by 16 pixels, roughly the size of a grain of rice on a laptop screen. A full logo with a wordmark, fine serifs, or more than one or two colors turns into an indistinct smudge at that size. A single bold letterform or a solid geometric mark holds up far better; if your brand only works as a full lockup with text, design a simplified version for the favicon rather than shrinking the whole logo down.
How to use it
Upload a source image
A square SVG or a PNG of at least 512 by 512 pixels gives the sharpest results across every generated size.
Preview at small sizes
Check how the icon looks at 16 and 32 pixels specifically, since that is where legibility problems show up first.
Generate the set
The tool produces favicon.ico, the full range of PNG sizes, the apple-touch-icon, and site.webmanifest in one pass.
Download and copy the snippet
Download the icon files as a package and paste the generated link tags into your page head.
Your images never leave your device
A startup finalizing branding ahead of a public launch, or an agency building a client site before the client has announced the redesign, both need working favicons long before the logo is public. Because every resize and container-packing step happens locally in the browser, an unreleased logo never has to sit on a third-party server just to get turned into an icon set.
- No file is ever uploaded to a server
- Works offline after the first visit
- No account, no watermark, no limits
Format and quality tips
Simplify before you shrink
If your logo includes a wordmark, crop it down to just the mark or a single initial for the favicon specifically. Trying to preserve the full logo at 16 pixels almost always looks worse than a deliberately simplified version designed for that size.
Keep some background contrast
Browser tab bars can be light or dark depending on the users system theme. A mark that is pure black or pure white with a fully transparent background can disappear against a matching tab color; a thin contrasting edge or a solid background square avoids that.
Frequently asked questions
What is the difference between favicon.ico and the PNG files?
favicon.ico is a single container file holding several icon resolutions together, which some older browsers and Windows itself expect by that exact filename; the individual PNGs are used by modern browsers, mobile home screens, and PWA manifests that reference a specific size directly.
What size should my source logo be?
A square image at least 512 by 512 pixels, or better yet an SVG, gives every generated size a clean downscale; smaller or non-square sources need upscaling or padding that shows up as blur or awkward borders.
Why does my favicon look blurry or unclear in the browser tab?
Most often the source logo has too much fine detail, like a wordmark or thin serifs, to survive being shrunk to 16 by 16 pixels. Simplifying the mark to a single bold shape or letter usually fixes it.
Do I need the apple-touch-icon if I already have a favicon.ico?
Yes, iOS home screen bookmarks specifically look for the apple-touch-icon size rather than falling back to the standard favicon, so skipping it means a blank or default icon on iOS.
What is the site.webmanifest file for?
It lists your app name, theme colors, and available icon sizes in one JSON file, which Android and installable web apps read to decide what icon and name to show when a user adds your site to their home screen.
Can I generate a favicon from a photo instead of a logo?
Technically yes, but a photograph rarely reads clearly at 16 pixels; a simple graphic mark or a single letter almost always communicates better at favicon sizes than a photographic image.
Further reading
- How to Watermark Photos: A Practical GuideA watermark buys you attribution and friction, not protection. Here is how to place, size and batch one so it actually reads — and an honest look at what metadata credit can and cannot do.6 min read
- How to Blur Faces and Redact Photos ProperlyA blur only protects you if the hidden pixels are gone from the exported file — and if the blur is strong enough that nobody can rebuild what was under it. Here is how to get both right.7 min read
- Favicon Sizes and Formats: A Complete GuideYou need fewer favicon sizes than most generators produce, but the ones you need are specific. Here is what each size is for, the exact HTML and manifest, and why a full logo turns to mush.6 min read