Favicon Generator: ICO and PNG Icons from Image or Text
Make a favicon from an image, from 1 to 3 letters or from an emoji. Get favicon.ico, the Apple touch icon, Android icons, site.webmanifest and the HTML snippet in one ZIP. Square, rounded or circle. Nothing is uploaded.
Drag files here, paste, or choose files
PNG, JPEG, WebP, GIF, AVIF or SVG, up to 50 MB and 32 megapixels. Images stay on this device.
Icons are linked from /
HTML snippet for your page's head
<link rel="icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
About the Favicon Generator
The Favicon Generator makes every icon a website needs from one source: an image such as your logo, one to three letters such as your initials, or a single emoji. Choose the shape, the background and, for text, the font and colour, and the preview updates at 16, 32, 48 and 180 px. Download favicon.zip saves the complete set, ready to unzip into your site, and the HTML snippet to paste into your pages.
Nothing is uploaded; every icon is drawn in your browser and never leaves your device.
How to use it
From an image
Drop or choose a PNG, JPEG, WebP, GIF (its first frame), AVIF or SVG file of up to 50 MB and 32 megapixels. Contain fits the whole image inside the icon, with padding from 0 to 25 percent around it; Cover fills the icon with the centre square of the image. A source smaller than 512 px on its shorter side still works, with a note that the large icons are upscaled and may look soft. SVG files are cleaned of scripts and outside links first, then drawn at full size.
From text or an emoji
Text takes one to three characters, counted as you would count them, so an accented letter or a family emoji is one character. Pick a sans-serif, serif or monospace system font, regular or bold; the font size is the largest that fits the letters into 80 percent of the icon. The page shows the contrast of the text colour on the background and warns below 3:1, the WCAG 2.x minimum for graphics. Emoji are drawn with your device's emoji font, so they look different on each device.
Shape and background
The icon can be square, rounded with corners of 20 percent, or a circle. The background is any colour, in any notation such as #336699 or rgb(51 102 153), or transparent.
What the ZIP holds
Every icon is drawn once as a 512 px master and scaled down from it with a high-quality filter. The archive holds, in this order:
favicon.icowith PNG-compressed icons of 16, 32 and 48 px, which Windows Vista and every current browser read.apple-touch-icon.pngat 180 px. It always has a solid background, white when yours is transparent, because iOS shows transparency as black.android-chrome-192x192.pngandandroid-chrome-512x512.png.site.webmanifest, with your site name, short name, both Android icons and your background colour as the theme colour.favicon-snippet.html, the three<link>tags for your page's head.
The path prefix, / by default, is put in front of every file in the manifest and the snippet. It must start with /, and a trailing / is added for you, so /assets links to /assets/favicon.ico.
Related tools
Resize the source image first with the image resizer, turn a vector logo into a PNG with the SVG to PNG converter, or check two colours with the colour contrast checker.
Frequently asked questions
Which favicon files do I need?
The ZIP holds favicon.ico with 16, 32 and 48 px icons for browser tabs, apple-touch-icon.png at 180 px for iPhone and iPad home screens, Android icons at 192 and 512 px, site.webmanifest that points to them, and the three link tags to paste into your page's head.
Where do I put the files?
Unzip them into the folder your site serves at its root, or into another folder and type that folder in Path prefix, such as /assets. The manifest and the snippet then point to that folder. Paste the snippet inside the head element of every page.
Why is the Apple touch icon never transparent?
iPhone and iPad show a transparent home-screen icon on a black square, which rarely looks intended. The Apple touch icon therefore always gets your background colour, or white when you chose a transparent background. The other icons keep their transparency.
Why does my emoji favicon look different on another phone?
Emoji are drawn with the emoji font of the device that makes the icon, such as Apple Color Emoji on a Mac or Noto Color Emoji on Android. The finished PNG files then look the same everywhere, but making the icon on another device gives that device's style.
How large should my source image be?
At least 512 px on its shorter side, because the largest icon is 512 px. A smaller image still works, but the page warns that the large icons are upscaled and may look soft. SVG files are drawn at full size, so they always stay sharp.
Is my logo uploaded to make the icons?
No. The image, text or emoji is drawn on a canvas in your browser, scaled down in the page and zipped there too. Nothing is sent to a server, so unreleased logos and brand work stay private.