Favicon Generator
Create a Complete Favicon Package from SVG, PNG or JPG
Turn one SVG, PNG, or JPG logo into favicon.ico, browser PNGs, an Apple touch icon, Android Chrome icons, a site.webmanifest, and ready-to-paste HTML tags. Download the complete package as a ZIP, generated privately in your browser.
Editing defaults for new files
Add a logo to see it at every favicon size.
Output
head-tags.html
<link rel="icon" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Put every file except index.html in the folder your site is served from, then paste these tags into the head of every page.
No files yet. Drop files above or click SELECT FILES.
What is a favicon?
A favicon is the small icon a browser shows next to a page title: in the tab, in bookmarks, in history, and in the results of some search engines. It began as a single 16 × 16 favicon.ico in the site root. Today the same job is done by a set of files at different sizes, because a browser tab, a home-screen shortcut and an install prompt each render the icon at a very different scale.
Why a favicon package instead of one file
A single favicon.ico still works, but it is no longer enough on its own. Browser tabs read the 16 or 32 px entry out of the .ico, Safari asks for a 180 px apple-touch-icon when a page is added to the Home Screen, and Android Chrome reads 192 and 512 px PNGs out of a web manifest for its install prompt and splash screen. Exporting those one at a time means six exports, six chances to crop something differently, and a manifest written by hand. Generating them from one source keeps every size identical and takes one drop.
How to generate a favicon package
- 1
Drop your logo, or click SELECT FILES to add it. SVG, PNG, JPG, WebP, GIF, BMP, AVIF and TIFF all work, up to 40 at a time.
- 2
Set the background, corner radius, padding, scale and alignment, then type the app name and short name that go into the manifest. Every size redraws as you change them.
- 3
Click SAVE ALL to download favicon-package.zip, then paste the four link tags from the HTML tab into the head of every page.
Privacy: your files never leave your browser
Conversion runs locally in your browser using JavaScript and WebAssembly. There is no file upload or server-side conversion, so the files you add stay on your device.
Local processing helps protect confidential logos, internal documents, and unreleased client artwork. Pages and conversion code are cached as you use them, so tools you have already opened can continue working without a network connection.
Frequently asked questions
Which files do I get, and where do they go?
favicon.ico (with 16, 32 and 48 px inside one file), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest and an index.html holding the tags. Copy everything except index.html into the folder your site is served from, then paste the four link tags into the head of every page.
Can I use a PNG or JPG logo instead of an SVG?
Yes. SVG, PNG, JPG, WebP, GIF, BMP, AVIF and TIFF all work. An SVG is still the better source, because every size is drawn from the vectors instead of resampled. A raster logo smaller than 512 px is scaled up for the largest icons and will look soft; the file row warns you when that happens.
Do I still need favicon.ico if I ship PNG icons?
Keep it. It is the file browsers and crawlers request from the site root when no tag points them anywhere else, and it is the only one that carries several sizes in a single file. The PNG entries cover the browsers that prefer them, and the manifest covers the Android install prompt.