Favicon Generator
Short answer
Create favicon.ico, Apple touch and web app icons, plus the HTML tags, from one image.
iOS shows transparent parts of the Apple touch icon as black, so these two icons get a solid background. The other icons keep transparency.
What It Does
Creates a favicon set from one image: favicon.ico with 16, 32 and 48 px icons, a 180 px Apple touch icon, 192 and 512 px icons for the web app manifest, a 512 px maskable icon, and the HTML tags to add to your pages. An uploaded SVG is included as icon.svg too.
Why It Matters
Browsers show the favicon in tabs and bookmarks, phones use the touch icon on the home screen, and Google Search can show the favicon next to your pages in results. Google shows it only when the icon is square, at least 8×8 px (larger than 48×48 px is recommended) and crawlable, along with the home page.
How It Works
-
Choose a square image, ideally an SVG or a PNG of at least 512×512 px
-
Pick a background colour for the Apple touch icon and the maskable icon
-
Your browser draws each size and packs the small ones into favicon.ico
-
Download the files, copy the HTML tags and test the result with the favicon checker
Sample input + output
image: logo.svg background: #ffffff
favicon.ico 16, 32, 48 px apple-touch-icon.png 180 px icon-192.png 192 px icon-512.png 512 px icon-512-maskable.png 512 px icon.svg original SVG manifest.webmanifest manifest icons <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest">
Who Uses This
-
Small business owner
Turn a logo into all the icon files a new website needs.
-
Web developer
Generate the icon set and the manifest icons for a progressive web app.
-
Designer
See how a logo looks at 16 px before handing it over.
Frequently Asked Questions
Which files do I need?
Most sites use favicon.ico, an Apple touch icon, and 192 and 512 px icons for the web app manifest. An SVG icon is optional; browsers that support it can use it at any size.
Why does the ICO file contain PNG images?
The ICO format can store PNG images, and every current browser reads them. The file holds 16, 32 and 48 px versions so each browser can pick the size it needs.
What is a maskable icon?
An icon with extra space around the logo, so Android can crop it to a circle or another shape. The tool keeps the whole image inside the safe zone, so nothing is cut off.
Why do the Apple touch icon and the maskable icon get a background colour?
iOS shows transparent parts of the touch icon as black, and a maskable icon has to fill its whole shape, so both get the colour you choose. The other icons keep transparency.
Is my image uploaded?
No. The icons are drawn in your browser, and the image never leaves your device.