How to Create a Favicon From an Image (Full Set)
Updated 2026-06-21
To create a favicon, upload one square image (at least 512×512 works best), generate the standard icon sizes, and download a favicon.ico plus PNG versions for browsers, iOS, and Android. Then paste a few link tags into the head of your HTML. The Favicon & App Icon Generator does all of this locally in your browser — your image is never uploaded.
What a complete favicon set actually contains
A single favicon.ico is not enough anymore. Different platforms ask for different files:
- favicon.ico — the classic file, packing 16, 32, and 48 px versions into one multi-resolution icon. Browsers and the address bar use it.
- 16×16 and 32×32 PNG — sharp tab and bookmark icons for modern browsers.
- 180×180 apple-touch-icon.png — what iOS uses when someone saves your site to their home screen.
- 192×192 and 512×512 PNG — the icons referenced by a PWA web manifest, used when Android installs your site as an app.
The generator produces every one of these from your single source image in one pass, so you do not have to resize anything by hand in an image editor.
Step by step
- Start with a square image. A PNG, JPG, WebP, or SVG all work. Aim for at least 512×512 so the largest icon stays crisp; a simple, high-contrast mark reads better at 16 px than a detailed photo.
- Open the Favicon & App Icon Generator and drop in your file.
- Preview every size at once. Each icon is contain-fit and centered on a square canvas, so nothing gets cropped or stretched.
- Download the full set as a zip — all the PNGs, the multi-resolution favicon.ico, an optional site.webmanifest, and a ready-to-paste HTML snippet. You can also grab just the favicon.ico on its own.
Embedding it in your site
Put the icon files in your site root and add these tags inside the head of your HTML (the tool gives you the exact snippet):
- A link rel="icon" pointing to favicon.ico with sizes set to any.
- Two more link rel="icon" tags for the 16×16 and 32×32 PNGs.
- A link rel="apple-touch-icon" for the 180×180 PNG.
- A link rel="manifest" pointing to site.webmanifest so Android and PWA installs find the 192 and 512 icons.
Common pitfalls
- Forgetting the Apple touch icon. Without it, iOS home-screen shortcuts show a blurry screenshot instead of your logo.
- A non-square source. The contain-fit keeps your image intact, but a non-square logo leaves padding — start square for edge-to-edge icons.
- Skipping a cache-busting refresh. Browsers cache favicons aggressively; do a hard reload to see the new one.
Drop your logo into the Favicon & App Icon Generator and get the whole set plus the embed code in seconds — entirely in your browser, with no uploads or signup.