Advertisement
Guide
About the Favicon Generator
A favicon is the small icon that represents your site in browser tabs, bookmarks, history, and mobile home screens. Doing it properly means more than one file — browsers and devices want several sizes, plus an Apple touch icon and a web manifest for Android. This generator takes a single image — or just a letter or emoji — and makes the modern set: favicon.ico, an SVG favicon, the Apple touch icon, Android icons including a maskable one, and the HTML and manifest to wire them up.
Round the corners, add padding, choose a background, and see the result in a browser tab and on a phone home screen. Everything is rendered in your browser with the Canvas API — your image is never uploaded.
Which favicon sizes you actually need
- favicon.ico — one file holding 16, 32 and 48 px, for every browser and for tools that only ever request
/favicon.ico. - favicon.svg — sharp at any size; modern browsers prefer it. Made for text and emoji icons, or kept from an SVG upload.
- apple-touch-icon.png (180×180) — iOS home screens. It must be opaque: iOS shows transparent areas as black, so the tool fills them.
- 192 and 512 px, plus a maskable 512 — referenced by the web manifest. Android crops maskable icons to circles and squircles, so the artwork is kept inside the safe zone.
Start from a square, high-resolution image
Favicons are tiny, so simple, high-contrast artwork reads best — fine detail disappears at 16×16. Feed the generator a square image at 512×512 or larger so every downscaled size stays sharp. If your logo isn't square, use the padding and background options to frame it cleanly rather than letting it stretch.
How to use it
- 1Drop, paste or browse for an image — or type a letter or emoji.
- 2Adjust corners, padding, fit and background, and check the previews.
- 3Download everything as a ZIP, or click any file to save it alone.
- 4Paste the HTML into your <head> and upload the files and manifest.
Frequently asked questions
What image should I use for a favicon?
A square, high-resolution image (512×512 or larger) with simple, high-contrast artwork. Fine detail is lost at small sizes, so bold shapes work best.
Which favicon files do I need?
A favicon.ico (16, 32 and 48 px in one file), optionally an SVG favicon, a 180×180 Apple touch icon, and 192 and 512 px PNGs plus a maskable icon for the web manifest. This tool makes all of them.
Can I make a favicon from an emoji or letters?
Yes. Choose “From text or emoji”, type up to a few characters, and pick the font, colours and corner radius. You also get an SVG favicon, which stays sharp at every size.
What is a maskable icon?
Android launchers crop app icons into circles, squircles or rounded squares. A maskable icon fills the whole square and keeps the important part inside a central safe zone so nothing is cut off.
Does it work with Next.js?
Yes. With the App Router you can skip the HTML: put favicon.ico in app/, rename the Apple icon to app/apple-icon.png (and favicon.svg to app/icon.svg), and Next adds the tags.
What is the web manifest for?
It tells Android and progressive web apps which icons to use for the home screen and app switcher. The generator provides a ready-to-use manifest snippet.
Can I make a circular or rounded favicon?
Yes. Drag the corner slider from square to fully round. Padding, a background colour and the fit option frame non-square logos cleanly.
Is my image uploaded?
No. All rendering uses the browser Canvas API, so your image never leaves your device.