Favicon Generator
One image in — favicon.ico, Apple and Android icons, a web manifest and the HTML tags out.
Runs in your browser. Your logo is never uploaded.
Drop your logo to make a full favicon set
A square PNG or SVG of at least 512 × 512 px works best. Or paste an image with Ctrl+V.
Preview
Browser tabs, light and dark
Files
Paste into your <head>
Upload every file in the ZIP to / on your site, then add these tags to each page.
What each file is for
| File | Size | Used by |
|---|---|---|
favicon.ico | 16, 32, 48 px | Browser tabs, bookmarks, Windows taskbar, and any tool that looks for /favicon.ico |
favicon-16x16.png | 16 px | Browser tab |
favicon-32x32.png | 32 px | Browser tab, high-DPI |
apple-touch-icon.png | 180 px | iPhone and iPad home screen |
android-chrome-192x192.png | 192 px | Android home screen |
android-chrome-512x512.png | 512 px | Android splash screen and install |
maskable-icon-512x512.png | 512 px | Android adaptive icon |
site.webmanifest | — | Tells Android and installable web apps which icons, name and colours to use |
Designing an icon that survives 16 pixels
At tab size a favicon is 16 pixels square — smaller than a single letter of this sentence. Wordmarks and fine detail turn to mush, so the strongest favicons are a single bold shape or initial with high contrast. Check the tab previews above in both light and dark: a dark logo on a transparent background can vanish against a dark browser theme, which is when a solid background or a circle earns its place.
Padding matters more on the large icons. Home screens place icons side by side, and a logo that touches every edge looks cramped next to the system apps. Around 10% of padding usually looks right; the Android maskable icon adds its own safe-zone padding automatically.
Frequently asked questions
Which favicon files does a website actually need?
A favicon.ico for browser tabs and older browsers, a 180 × 180 apple-touch-icon.png for iPhones and iPads, 192 and 512 pixel PNGs listed in a site.webmanifest for Android and installable web apps, and a theme-color tag. This generator makes all of them, plus a maskable icon for Android's adaptive shapes and the exact HTML tags that link them.
What size should my source image be?
Square, and at least 512 × 512 pixels, since that is the largest icon produced. A smaller image still works, but the large icons are upscaled and look soft. A non-square image is centred with space around it rather than cropped. An SVG is ideal: it is sharp at every size and is also shipped as favicon.svg for browsers that support it.
Where do I put the files?
Upload everything in the ZIP to the root of your website, next to your home page, and paste the HTML tags into the
of every page. If you keep icons in a folder such as /icons/, set the icon path in the settings first and every tag and manifest entry will point there.What is a maskable icon?
Android launchers crop app icons into circles, squircles or rounded squares depending on the phone. A maskable icon is drawn full-bleed with the logo kept inside a central safe zone, so whatever shape the launcher cuts, nothing important is lost. The generator adds that padding automatically.
Why is the Apple touch icon square with a solid background?
iOS rounds the corners of home-screen icons itself and fills any transparency with black. Giving it a square, opaque icon avoids a black box around a transparent logo, so the Apple icon always uses your background colour — white if you left the background transparent.
Can I paste an image instead of uploading it?
Yes. Copy an image or take a screenshot and press Ctrl+V (⌘V on a Mac) anywhere on the page. On a phone or tablet, use the Paste image button.
Is my logo uploaded anywhere?
No. Every icon is drawn and packaged in your browser. Nothing is sent to a server, which is also why generation is instant.