What a favicon is and which files you need
A favicon is the small icon shown in browser tabs, bookmarks, history and search results next to your site's name. Different places ask for different sizes, which is why a complete set contains several files. This generator creates all of the common ones in one go: favicon.ico containing 16, 32 and 48 pixel images for browsers and Windows, favicon-16x16.png and favicon-32x32.png, a 180 pixel apple-touch-icon.png for iPhone and iPad home screens, 192 and 512 pixel icons for Android and installable web apps, and a site.webmanifest that points to them. A ZIP download bundles everything with a short readme.
From text, emoji or an image
Many good favicons are simply a letter or two on a coloured background, because detailed logos turn to mush at 16 pixels. In text mode, type one to four characters or an emoji, choose the colours and a shape, and watch the previews at real size. The text is scaled automatically to fit. In image mode, choose a picture; it is scaled to fill each size and centred, so a square source gives the best result. A transparent PNG keeps its transparency in the icons.
How the files are made
Each size is drawn separately on a canvas with high-quality smoothing, rather than shrinking one large image, which keeps small sizes as sharp as possible. The ICO file is assembled byte by byte in your browser using the PNG-compressed format that all current browsers and Windows versions support. The ZIP archive is also built in the browser. Nothing is uploaded at any point.
Installing your favicon
- Unzip the files and upload them to the root folder of your website, so that favicon.ico is available at /favicon.ico.
- Copy the HTML snippet into the head section of every page, or your site template.
- Edit the name in site.webmanifest if needed.
- Reload your site. Browsers cache favicons aggressively, so you may need a hard refresh or a private window to see the change.
Design tips
Use strong contrast and few details, check the 16 pixel preview carefully, and keep the same colours as your brand so the tab is recognisable among dozens of others.