Turn any logo or image into a complete favicon set — from a tiny 16×16 browser-tab icon all the way up to a 512×512 PWA icon, plus the Apple touch icon. Download every size at once as a ZIP and copy the ready-made HTML tags, all generated privately in your browser.
Click to upload or drag & drop
PNG, JPG, WebP or SVG — a square image of at least 512×512px works best.
Why
A favicon is the tiny icon that represents your website everywhere it is referenced — the browser tab, the bookmark bar, the history list, the search-results card, and the home-screen shortcut when someone saves your page to their phone. It is one of the smallest assets you will ever ship, yet it does an outsized amount of work: it is the visual shorthand for your brand in a crowded row of open tabs, and it is the first thing many people consciously look for when they scan for the right tab to switch back to. A site without a favicon shows a generic blank-page icon, which looks unfinished and makes your tab harder to find — and a favicon that is blurry or wrongly sized looks just as unprofessional. Getting it right is a low-effort, high-trust signal that your site is properly built.
The reason you need more than a single file is that modern browsers and operating systems request the icon at many different sizes for many different contexts. A browser tab typically uses a 16×16 or 32×32 image, a Windows taskbar and shortcut want 48×48, Android Chrome pulls 192×192 and 512×512 for installed progressive web apps, and Apple devices look for a 180×180 apple-touch-icon when a page is added to the iOS home screen. If you only provide one large image, smaller renderings are downscaled on the fly and often come out fuzzy; if you only provide one small image, it looks pixelated when it is blown up for a home-screen tile. Supplying a purpose-built file for each size means every surface gets a crisp, correctly-proportioned icon, which is exactly what this generator produces in a single pass.
It also matters that you ship the right markup, not just the right files. Browsers do not magically find every icon — they read the <link> tags in your page head, match the declared sizes attribute against the size they need, and pick the closest fit. Miss the apple-touch-icon tag and iOS falls back to a low-quality screenshot of your page; forget the manifest reference and Android cannot offer an install prompt at all. Because the correct combination of rel, type and sizes attributes is easy to get subtly wrong, this generator writes the tags for you alongside the images, so the icon you preview is exactly the icon a visitor will see. That removes the most common reason a favicon looks broken in production: a perfect image wired up with imperfect HTML.
There is a long-standing tension between the old .ico format and modern PNGs that trips up a lot of people. For years the de-facto standard was a single multi-resolution favicon.ico bundling 16, 32 and 48px frames, and many browsers still automatically request /favicon.ico from your site root even when no link tag points to it. Today, however, PNG icons declared explicitly via link tags give you sharper rendering, alpha transparency and far easier editing. The pragmatic answer most production sites use — and the one this tool follows — is to do both: serve crisp per-size PNGs through link tags for every modern surface, while also shipping a favicon.ico fallback at the root so legacy clients are never left with a blank square.
Doing this work inside the browser is a deliberate privacy choice, not just a convenience. When you select an image, it is decoded onto an HTML canvas, resampled with high-quality smoothing into each required dimension, and packaged into a downloadable ZIP — your file is never uploaded to a server, never stored, and never seen by anyone but you. That local-first approach matters for unreleased logos, client work under NDA, and anyone who simply prefers not to hand their brand assets to a third-party service whose retention policy they have never read. It is also faster, because there is no round-trip to a backend: the moment the image loads, every size is ready, along with the exact HTML link tags and a starter web manifest.
Finally, a favicon generator saves you from a tedious, error-prone manual workflow. Doing this by hand means opening an image editor, exporting ten separate squares at exactly the right pixel dimensions, naming each file to match a convention browsers expect, hand-writing a block of link tags, authoring a JSON web manifest, and remembering the .ico fallback — and then repeating all of it the next time the logo changes. Any mismatch between a filename, a path and a sizes attribute results in a missing or wrong icon that is hard to notice and harder to debug, since browsers cache favicons aggressively. Generating the whole set at once, from a single source image, turns a fiddly half-hour chore into a few seconds and guarantees the files, the names and the markup all agree.
How
Click the dropzone or drag in a PNG, JPG, WebP or SVG. A square image of at least 512×512px gives the sharpest result across every size, because the largest icons are made without any upscaling. A PNG with a transparent background is ideal for logos so the icon blends into any tab color.
Every favicon size — from 16×16 to 512×512, plus the 180×180 Apple touch icon — is generated instantly and shown in a labelled preview grid. Check the smallest renderings carefully: fine detail and thin text often disappear at 16×16, so this is where you confirm the mark still reads as your brand.
Grab the ZIP containing all the PNGs, a favicon.ico fallback and a starter site.webmanifest, then copy the ready-made HTML link tags. Drop the files at your site root, paste the tags into your page head, and do a hard refresh to clear the cached old icon. No watermark, no signup.
Who
Generate the full icon set and matching link tags in one step instead of resizing files by hand and looking up the correct rel, type and sizes attributes for each platform. Drop the files at the root, paste the head markup and move on.
Turn a finished logo into every favicon variant a client needs, with crisp renderings at small sizes, without exposing unreleased brand assets to an external service. Hand off a tidy ZIP that developers can wire up without further questions.
Ship a polished, branded tab icon for a new product or landing page in minutes, including the 192px and 512px PWA icons and web manifest that make an installable app feel complete on a phone home screen.
Replace the default blank-page icon on a personal site, portfolio or store so the brand looks finished in browser tabs, bookmarks and search results — a small touch that makes the whole site read as more credible.
Platforms like WordPress, Shopify, Webflow and Squarespace ask you to upload a site icon or favicon image. Produce a correctly sized square PNG here, then drop it into the theme settings without fighting blurry auto-resizing.
Branded icons show up beyond the browser tab — in app shortcuts, internal dashboards, and link previews. Teams use the generator to keep one consistent mark across every size so the brand looks uniform wherever it appears.
When
Before you go live, add a favicon so the very first visitors see a branded tab instead of a generic placeholder. It is a small detail that quietly signals the site is finished and maintained rather than a half-built draft.
Whenever your logo or brand colors change, regenerate the full icon set so every tab, bookmark and home-screen shortcut reflects the current identity. Remember that browsers cache favicons hard, so a forced refresh helps the new icon appear.
Progressive web apps need 192×192 and 512×512 icons plus a web manifest to be installable; generate them together so the install prompt, splash screen and home-screen icon all look right rather than falling back to a cropped screenshot.
If your current favicon looks fuzzy because a single image is being downscaled on the fly, generate a purpose-built file for each size so the browser can load an exact-fit image instead of resampling a mismatched one.
If users save your page to an iPhone or iPad home screen and get an ugly thumbnail, add the 180×180 apple-touch-icon and its link tag so the shortcut shows a sharp, branded icon instead.
Moving to Next.js, Astro, a static host or a new CMS often drops the old favicon paths. Regenerate the set so the filenames, root placement and head tags line up cleanly with the new project structure.
16×16, 32×32, 48×48, 64×64, 96×96, 128×128, the 180×180 Apple touch icon, and the 192×192, 256×256 and 512×512 icons used by Android and progressive web apps — every common size in one download, plus a favicon.ico fallback.<link> tags in your page head, looks at each sizes attribute, and picks the icon closest to the dimension it needs for that surface — for example the 32px file for a high-DPI tab. If no link tag matches, it may fall back to requesting /favicon.ico from your site root, which is why shipping both is the safest approach.canvas — your image is never uploaded, stored or sent anywhere. This makes the tool both fast and private, which is ideal for unreleased logos, NDA client work, or anyone who simply prefers not to hand brand assets to a third party.apple-touch-icon is the 180×180 image Apple devices use when someone adds your page to their iOS home screen. Including it with the <link rel="apple-touch-icon"> tag gives the home-screen shortcut a sharp, branded icon instead of a screenshot of the page. Unlike tab favicons, it usually looks best with a solid (non-transparent) background.site.webmanifest; edit the name and colors, then reference it with <link rel="manifest">.192×192 and a 512×512 PNG icon. This tool generates both and references them in the starter manifest, so an installed app shows a proper home-screen icon and splash screen rather than a generic placeholder.site.webmanifest) at the root of your site. Then paste the provided <link> tags into the <head> of your HTML. The Copy button copies all of the tags at once. After deploying, do a hard refresh so the browser drops its cached old icon./favicon.ico from your site root even when no link tag points to it. For broad compatibility the ZIP includes a 32×32 PNG saved under that classic filename, so legacy clients and default requests still resolve to a real icon rather than a 404..ico format is an older Windows container that can bundle several resolutions in one file and is requested by default at your site root. PNGs declared via explicit link tags give sharper rendering, full alpha transparency and are far easier to edit. Most production sites use both: PNG link tags for modern surfaces plus an .ico at the root as a safety net.apple-touch-icon, by contrast, is rendered on a rounded tile and tends to look better with a solid background fill, which is why dedicated per-purpose files give a more polished result than one image reused everywhere.Turn any logo or image into a complete favicon set — from a tiny 16×16 browser-tab icon all the way up to a 512×512 PWA icon, plus the Apple touch icon. Download every size at once as a ZIP and copy the ready-made HTML tags, all generated privately in your browser.
Use the Favicon Generator