Favicon GeneratorEvery size, and the head block to go with it.
Drop in a logo and get a real multi-resolution favicon.ico, the PNG sizes browsers ask for, an apple touch icon, the Android maskable icon and a filled-in site.webmanifest. Everything is generated in this tab, your image is never uploaded.
Drop your logo here
Or tap to pick a file. A square image of 512px or more works best.
PNG, JPG, WebP, SVG, ICO or GIF
Your image is read, resized and packaged inside this tab. It is never uploaded, and there is no server involved at any point.
What favicon sizes do you actually need in 2026?
Far fewer than the twenty-file bundles most generators still hand out. Five surfaces cover every browser and operating system that matters, and everything past them is weight in your <head> for no gain.
favicon.ico, 16 and 32 and 48
Still the file a browser looks for at the root of your domain before it has parsed a single line of HTML. One container holds all three sizes, which is why this favicon converter builds a real .ico rather than renaming a PNG. 16px is the tab, 32px is the retina tab and the bookmarks bar, 48px is Windows shortcuts.
favicon.svg, when you have a vector
A vector favicon is sharp at any size and can even respond to the system dark mode with a media query inside the file. Browsers that understand it prefer it over the .ico. If you upload an SVG here it stays vector, it is never rasterised and handed back as a fake.
apple-touch-icon.png, 180Ă—180
The icon iOS uses when someone adds your site to their home screen. One file is enough: iOS has downscaled a single 180px icon since iOS 8, so the old pile of apple-touch-icon-57x57 through 152x152 is dead weight. This apple touch icon generator writes one, and makes it opaque.
android-chrome 192 and 512, plus maskable
Referenced from site.webmanifest rather than from a link tag. 192px is the home screen, 512px is the splash screen and the install prompt. The maskable variant is the one Android crops to whatever shape the launcher uses, so its artwork needs a real margin.
mstile-150x150.png, cheap to keep
Windows pinned sites still read it. It costs one small PNG and two meta tags, so it is included, but nothing breaks if you delete it. That is the honest answer, and it is why it is last on this list rather than presented as essential.
Why does a .ico file contain several images?
Because .ico is a container format, not an image format. Understanding that is the difference between a favicon that renders everywhere and one that quietly fails on Windows and in feed readers.
It is a directory, then the images
The file opens with a six-byte header saying how many images follow, then one sixteen-byte entry per image giving its width, height, byte length and its offset in the file, and only then the image payloads. Everything is little-endian. That structure is why a PNG renamed to .ico is not an .ico.
The consumer picks the size it wants
A browser drawing a 16px tab reads the directory, finds the 16px entry and decodes only that one. Give it a single 512px image and it downscales at draw time, with a cheap sampler and a blurry result. Give it a purpose-made 16px and it uses that.
The payloads can be PNG
The original format embedded BMP with an upside-down pixel order and a separate one-bit transparency mask. Every browser and every Windows since Vista also accepts PNG inside the container, which is what this ico converter writes: smaller files, real alpha, no legacy encoder.
The 16px is where quality shows
Downscaling a 1024px logo straight to 16px samples too few source pixels and gives you a grey smudge. This tool halves the image on intermediate canvases, 1024 to 512 to 256 and so on, so every pixel contributes. It is the single reason a small favicon stays legible.
Do I still need an apple-touch-icon?
Yes, and it is the one file where the rules differ from every other icon in the bundle. Two things to know, both handled for you above.
iOS throws away your transparency
Safari composites the home screen icon onto black rather than onto the wallpaper, so a logo you carefully exported with a transparent background arrives as a shape floating on a black tile. That is why this tool always writes the apple-touch-icon with an opaque background, white by default, even when you picked transparent for everything else. It also stops applying its own gloss since iOS 7, so what you supply is what people see.
Android crops, it does not pad
An Android launcher takes a maskable icon and cuts it to its own shape, a circle, a squircle or a rounded square depending on the phone. Only the middle 80% is guaranteed to survive, so a logo that fills its canvas edge to edge loses its extremities. The maskable file here keeps a 20% margin whatever you set the padding slider to, and the circular preview shows you exactly what the launcher will keep.
How do I add a favicon to my site?
Two steps, and the second is where most of the mistakes happen. Copy the block the tool generates rather than writing it from memory.
Put the files at the root
Drop favicon.ico and the rest next to your index.html, so they answer at yoursite.com/favicon.ico. Browsers request that exact path on their own, without being told to, which is why the root placement matters more than the link tag.
Paste the head block on every page
Not just the homepage. A visitor who lands on a deep page and bookmarks it should get the right icon. If your site is a template or a framework, the block belongs in the shared layout.
Declare the .ico without a size
Use rel="icon" href="/favicon.ico" sizes="any". The sizes are already inside the container, and hardcoding one in the markup stops the browser reaching for the others. The SVG line comes first so browsers that understand vector take it.
Then hard-refresh, twice
Favicons are cached aggressively and separately from the page, so your old icon can survive a normal reload for days. Open the file directly at yoursite.com/favicon.ico to confirm the new one is really being served before concluding anything is broken.
Want to check what an existing QR code or short link really points to? Decode it with the QR code resolver
Need a short link to go with the new site? Make one with the free link shortener
The icon is the small half of a first impression.
A favicon is what people see once they are already on your site. The link that got them there is doing the harder job, and it is usually the part nobody measures. If that is useful to you, LinkScale is what we build.
See where the visit came from
Clicks, countries, devices and what happened next, for every link you hand out, rather than a number in someone else’s dashboard.
Change the destination later
Point a printed or posted link somewhere else after the fact, without asking anyone to update what they saved.
One page for everything
A link in bio page that holds the shop, the booking form and the socials, so the single link you are allowed goes further.
Favicon generator questions
Still have questions?
OnlineReal humans, usually replying in a few minutes.
It is free, with no account, no watermark and no limit on how many files you generate. Your image is never uploaded: it is read with the browser’s own FileReader, drawn on a canvas and packaged into Blobs, all inside the page. There is no endpoint behind this tool, so nothing to send it to. You can confirm it by opening your browser’s network tab while you use it, or by disconnecting from the internet after the page has loaded.
Go further with LinkScale
Favicon done. The link that brings people in is the other half.
LinkScale is a link platform for people who want to know what happens after the click, and change where it goes without reprinting anything.
Free 14-day trial on every plan