One image in. Every icon out.

Favicon takes a single square image, or two letters if you don't have a logo yet, and builds the full set of icons a website needs: the browser tab icon, the iPhone home screen icon, the Android and app icons, and the manifest that ties them together. You get one ZIP and one block of HTML to paste in.

Every screen asks for a different size.

A favicon used to be one tiny file. Now your site's icon turns up in browser tabs, bookmark bars, search results, phone home screens and app launchers, and each of those looks for its own size and format. When the right one isn't there, you get a blurry stretched version, a black square, or a generic globe.

Scaling a logo down to 16 pixels by hand for each one is tedious. Favicon does every size in one go, from the same source, so they all match.

Two letters make a strong icon.

Switch to Letters and type one or two characters, such as your initials or a short brand mark. Pick from five font styles: Bold, Serif, Mono, Rounded and Script. Each style button previews your own letters, so you can compare them at a glance.

Choose a letter colour and a tile colour, or make the tile transparent. A size slider sets how much of the tile the letters fill, and they're always centred on their actual shape, so awkward pairs still sit right.

For images and letters alike, you can set the icon's shape to square, rounded or circle and add a border in any colour and thickness. Every size is drawn fresh rather than shrunk from a big version, so the 16 pixel tab icon stays crisp and the border never disappears.

What's in the ZIP.

• favicon.ico holds 16, 32 and 48 pixel versions in one file. Browsers and plenty of other software ask for it at the root of your site automatically, even when no page links to it, so it's the catch-all fallback.
• favicon-16x16.png and favicon-32x32.png are the browser tab and bookmark icons. The 32 pixel one keeps things sharp on high-resolution screens.
• apple-touch-icon.png is what an iPhone or iPad shows when someone adds your site to their home screen. iOS fills transparent areas with black, so this one is built on your chosen background colour. iOS rounds the corners itself.
• android-chrome-192x192.png and android-chrome-512x512.png are used when your site is saved to an Android home screen or installed as an app. The 512 pixel version also appears on the splash screen as it opens.
• maskable-icon-512x512.png is optional. Android crops app icons into circles and rounded squares, and this version keeps your logo inside the safe zone so nothing gets cut off.
• favicon.svg is included only when your source image is an SVG. Modern browsers use it at any size with no loss of sharpness, and any shape or border you add is applied to it too. It isn't made in Letters mode, because browsers won't load web fonts inside a favicon.
• site.webmanifest tells Android and Chrome your site's name, colours and which icons to use when it's installed.
• favicon-snippet.html is a copy of the HTML to paste into your pages, so you still have it after closing the tool.

In the root of your site.

Extract the ZIP into the top folder of your website, the same folder as your home page. That way yoursite.com/favicon.ico works, which is where browsers look first.

Then paste the snippet into the <head> of every page, or once into your shared header or template if your site has one. It looks like this:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#171717">

If the icons need to live somewhere else, such as an /icons/ folder, set the path prefix in the tool before you download. The snippet and the manifest both update to match. The favicon.ico is still worth copying to the root as well.

Seven steps to a finished set.

1. Open Favicon on a laptop or desktop and drop in a square image, ideally 512×512 or larger. Or switch to Letters, type up to two characters and pick a font style.
2. Choose a shape and, if you want one, a border.
3. Set your site name, theme colour and background colour.
4. Change the path prefix if the files won't sit in your site's root.
5. Click Download ZIP and extract it into your site's root folder.
6. Copy the HTML snippet into the <head> of your pages.
7. Upload the changes, then open your site in a new tab. Browsers hold on to old favicons, so a hard refresh or clearing the cache may be needed before the new one shows.

Nothing is uploaded. Nothing is stored.

Every icon is drawn in your browser, and the ZIP is built on your machine too. Your logo never leaves your computer, and closing the page clears everything.

An image or two letters, and a computer.

PNG, JPG, WebP and SVG all work. A PNG with a transparent background or an SVG gives the cleanest results. Anything smaller than 512 pixels will look soft at the larger sizes, and the tool will tell you if that's the case.

If your image isn't square, it's cropped from the centre. Simple, bold shapes read best at 16 pixels, so a mark or monogram usually works better than a full logo with text. That's exactly what Letters mode is for.

Favicon works best on a laptop or desktop. It opens on a phone, but you'll want a bigger screen to compare the previews, and the ZIP needs extracting into your site's files and the snippet pasting into your pages, which is computer work.

Drop in your logo, or type two letters.

Nothing to install, nothing to register for, and nothing leaves your machine. Best on a laptop or desktop.