Favicon Generator turns a single logo into every icon a website needs: favicon.ico for browsers that ask for it by name, an Apple touch icon for iPhone home screens, Android icons, a web manifest, and the HTML tags to paste into your pages. You can see how the icon will look in a real browser tab before you download anything, and it all happens in your browser.
How to make a favicon
- Drop in a square logo. An SVG is ideal; otherwise use at least 512 × 512 pixels.
- Check the previews, especially the 16 pixel one, which is what a browser tab shows.
- Set your site name and theme colour, and add padding or a background if the logo needs breathing room.
- Click Download favicon.zip, unzip it into the top folder of your site, and paste the tags into your
<head>.
What is in the download
- favicon.ico — holds 16, 32 and 48 pixel versions in one file.
- apple-touch-icon.png — 180 pixels, for iPhone and iPad home screens.
- icon-192.png and icon-512.png — Android home screen and splash screen.
- site.webmanifest — tells phones your site's name and colours.
- favicon.svg — included when you start from an SVG, so the icon stays sharp at any size.
- head-tags.html — the tags to copy, so you don't have to retype them.
Designing something that works at 16 pixels
A browser tab shows your icon at about 16 pixels across, roughly the size of this letter. Full logos with words turn into a smudge at that size. What works is a single letter, a simple symbol, or the most distinctive piece of your logo, with strong contrast against both light and dark tab bars. The preview row shows the same icon at 16, 32, 48 and 180 pixels so you can judge before committing.
Transparent logos and padding
A transparent PNG or SVG keeps its transparency, which usually looks best in a browser tab. On iPhone home screens, though, transparent areas turn black, so add a background colour if your icon is destined for a home screen. Padding shrinks the artwork inside the square, which helps when a logo would otherwise touch the edges.
Preparing the source image
If your logo is not square, crop it first with the Image Cropper, which has a square preset. To shrink an oversized file before uploading it here, use theImage Resizer. Working from an SVG and need a PNG for something else?SVG to PNG handles that.
Frequently asked questions
What size should my image be?
Square, and at least 512 × 512 pixels. An SVG is better still, because it stays sharp at every size. A small or non-square image is centred rather than stretched, but the larger icons will look soft.
Do I still need favicon.ico?
It is worth including. Browsers prefer the PNG and SVG icons you point them at, but some tools, feed readers and older browsers still request /favicon.ico by name, and an empty response shows as a broken icon.
Where do the files go?
In the top folder of your website, so they are reachable at addresses like /favicon.ico and /icon-192.png, then paste the supplied tags into the <head> of your pages.
Why does my icon look like a blob at small sizes?
Fine detail disappears at 16 pixels. Use a simplified mark rather than a full logo with text: one letter, a symbol, or the most recognisable part of your logo. The preview shows exactly what a browser tab will display.
Is my logo uploaded?
No. The icons are generated in your browser, so an unreleased logo never leaves your device.
Last updated