Source
Drop a square image here
512×512 or larger, PNG or SVG
0%
HTML to paste in your head
site.webmanifest
Turn one square image into a full favicon set: the PNGs, the .ico, the apple-touch-icon, the HTML and the web app manifest. A canvas in your browser renders every size, so a logo you have not launched yet stays on your machine. Click Upload Image or drop a file to start, then Copy HTML to grab the link tags for your head element.
Drop a square image here
512×512 or larger, PNG or SVG
Many favicon generators produce thirty files and a wall of link tags,
most of it for browsers that no longer exist. The set you need is
small: a 32×32 PNG for the
browser tab, a 180×180 apple-touch-icon for iOS home
screens, 192 and 512 for Android and the manifest, and an
.ico because browsers request
/favicon.ico whether you reference it or not.
An SVG favicon is a useful extra: one file, sharp at any size, and it can follow the user's dark mode with a media query inside the SVG itself. Chrome, Firefox, Edge and Safari 26 or later support it. Safari 18 and earlier fall back to the PNG.
Draw a simplified mark for the favicon. A wordmark that reads at 200px is a gray smudge at 32. Use the symbol from your logo or a single letter instead.
iOS puts the apple-touch-icon on a rounded square with no margin of its own, so artwork that runs to the edge gets clipped. Adding 10 to 15% padding usually fixes it.
Browser tabs are light in one theme and dark in the other. A dark icon with no background disappears in dark mode; fill the transparency if that is a risk.
The previews here are shown at actual size. Check the 16 and 32 before you ship, not the 512.
Without a site.webmanifest, adding your site to an
Android home screen produces a screenshot of the page rather than
your icon. The manifest supplies the name, the theme color and the 192
and 512 icons Chrome looks for. It is a short JSON file, and the tool
generates it above.
If the old icon keeps showing after you deploy, the browser cache is the cause, not your markup. Favicons are cached hard, sometimes past a normal refresh. Check in a private window, and add a query string to the href while you are iterating.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#6366f1">
<!-- That is the whole list. The thirty-file sets you see elsewhere
are for browsers that no longer exist. -->{
"name": "My Site",
"short_name": "My Site",
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
],
"theme_color": "#6366f1",
"background_color": "#ffffff",
"display": "standalone"
}Without this, adding the site to an Android home screen produces a screenshot of the page rather than your icon.
<!-- icon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #0f172a; }
@media (prefers-color-scheme: dark) {
path { fill: #f8fafc; }
}
</style>
<path d="M4 4h24v24H4z"/>
</svg>
<!-- One file, sharp at any size, and it adapts to the browser theme.
Safari 18 and earlier ignore it and fall back to the PNG. -->An .ico file is not a special image format. It is a small header followed by, in the modern form, complete PNG files embedded whole. That is why a browser can decode one at all, and why generating it in JavaScript is a matter of writing about twenty bytes of header per size and concatenating the PNGs.
This tool follows the specifications below. Read them when you need the exact normative wording, for example to settle an edge case between two implementations.
Far fewer than the thirty-file sets many generators still produce. A 32x32 PNG, a 180x180 apple-touch-icon, a 192 and a 512 for Android, and ideally an SVG. The other sizes only serve browsers that are no longer in use.
Only for very old browsers, but it costs one file and browsers request /favicon.ico whether you reference it or not. Including it keeps that 404 out of your logs.
Square, at least 512x512, with the detail large and central. A logo with fine text is unreadable at 32 pixels; make a simplified mark for the favicon rather than shrinking the full logo.
Favicons are cached hard, sometimes past a normal refresh. Try a private window, or add a query string to the href while you are testing.
The web app manifest tells Android and Chrome which icons to use when someone adds your site to their home screen, along with the name and theme color. Without it, Android can fall back to a low-resolution icon or a screenshot of the page.
Five lines in the head element: a link rel="icon" to favicon.ico, a second one to an SVG icon, a link rel="apple-touch-icon", a link rel="manifest" and a theme-color meta tag. The Copy HTML button copies exactly that block, and Download all includes it as head.html. Put the files at the site root, because the tags use root-relative paths such as /favicon.ico.
PNG, JPEG, WebP, GIF or SVG. Click Upload Image, Choose a file, or drag the file onto the drop zone. Use a square raster of 512x512 or larger, because the tool scales down and never up. An SVG is rasterized once at 1024 pixels, so it is always sharp, and it is also shipped as icon.svg with a matching link tag. A non-square image is letterboxed inside the square rather than stretched, and the Source header warns you when it is not square or under 512 pixels.
If you start from a vector, run it through the SVG optimizer first. For other resizing and format work, use the image converter, and the meta tag generator covers the rest of what goes in your head element.