Make a favicon that works everywhere
Drop in an image, type a letter, or pick an emoji. You'll get every size a modern browser asks for, a real multi-resolution .ico, and the exact tags to paste into your <head>.
Choose your source
Square works bestStyle it
Updates liveMaking it readable at 16 pixels
- One shape or one letter. A full logo with a wordmark becomes grey mush at tab size — crop to the symbol.
- Push the contrast. Thin strokes disappear entirely. Thicken fine detail or drop it.
- Watch the 16px preview in the panel opposite as you work. That's the size people actually see.
Site details
Used in tags and manifestFour tags cover every browser released in the last several years. Fewer files, less to maintain.
Preview
IN CONTEXT
Download
Paste into <head>
Where files go. Upload everything to the folder in your path setting. With / they sit beside index.html at your site root.
SITE.WEBMANIFEST
After you upload — three things that trip people up
- Browsers cache favicons hard. If the old one persists, open the icon URL directly and force-refresh, or use a private window.
- Check the path. A 404 on the icon is the usual cause of "it didn't work" — visit
yoursite.com/favicon.icoto confirm. - Keep the .ico at the root. Feed readers, older browsers and some tools look there regardless of your tags.
Generated in your browser with the Canvas API — no upload, no server, no tracking.
Every File Is Drawn On Your Own Machine
Nothing here is uploaded. The icon is drawn onto a canvas in your browser at each size a browser actually asks for, exported as PNG, and packed into a real multi-resolution .ico containing the 16, 32 and 48 pixel images in one file — not a renamed PNG, which is what a surprising number of generators hand you. The zip is assembled in the page too, using stored (uncompressed) entries so no library is needed. An image you drop in never leaves the tab, which is also why this works with an unreleased logo you would rather not post to a stranger's server.
What else can you check?
These tools all work on the same connection and address data — pick whichever question you actually have.
Favicon FAQ
Do I still need a favicon.ico in 2026?
Yes, and it is the one file worth keeping at your site root. Browsers request /favicon.ico by convention even when your tags point somewhere else, and feed readers, link-preview bots and older tooling look there regardless. The .ico this page builds is a genuine multi-resolution container holding the 16, 32 and 48 pixel images, so one request serves every small size.
Why does my new favicon not show up?
Almost always one of two things. Browsers cache favicons far more aggressively than other assets, so open the icon URL directly and force-refresh, or check in a private window. If that does not do it, the file is 404ing — visit yoursite.com/favicon.ico and confirm it actually loads from the path in your tags.
What is the safe zone, and what is a maskable icon?
Android crops your icon into whatever shape the launcher uses — a circle, a squircle, a rounded square. A maskable icon is one with enough padding that cropping never cuts into the artwork. The safe-zone toggle draws the circle Android guarantees to keep; anything inside it survives every mask. It needs an opaque background and roughly 20% padding, which the checks panel tells you when you have.
Should I use the SVG icon?
Include it if you have one. An SVG favicon scales perfectly and is what Chrome, Firefox and Edge prefer when offered, but Safari support has been uneven and no SVG is generated when you upload a raster image — there is nothing honest to vectorise. The .ico and PNGs cover every browser either way, so the SVG is a bonus rather than a requirement.
Is my logo uploaded anywhere?
No. The image is read with the browser's own FileReader, drawn onto a canvas, and exported — all inside the tab. There is no request to this server or anyone else's at any point in the process, which you can confirm in your browser's network panel while you use it.