Favicon generator: the modern six-file set.

Older generators produce twenty or more files for long-gone platforms. Current browsers need far fewer. The set this tool generates follows the widely used guide by Evil Martians, which has been kept up to date since 2021: a 32×32 favicon.ico, a scalable icon.svg, a 180×180 apple-touch-icon.png, and 192 and 512 pixel PNGs referenced from a web app manifest, one of them maskable.

Each file has a job. favicon.ico answers the many tools, feed readers and older browsers that request /favicon.ico directly without reading your HTML. icon.svg gives modern browsers a sharp icon at any size and density. The Apple touch icon is used when someone adds your site to an iPhone or iPad home screen. The manifest icons are used by Android and desktop browsers when a site is installed as an app and on splash screens.

The ICO link carries sizes="32x32". Without that attribute some versions of Chrome prefer the ICO over the SVG, so the attribute is what makes the browser choose the vector. The SVG link has type="image/svg+xml". The Apple touch icon needs no sizes attribute because 180×180 is the only size current iOS devices use, and the manifest link points at manifest.webmanifest.

Put the files at the root of your site and the four lines in the head of every page. Most frameworks have a convention for this. In Next.js, for example, an icon.svg and apple-icon.png in the app directory are linked automatically; our Next.js development team uses that convention on client projects.

Android launchers crop installed app icons into circles, squircles or rounded squares depending on the device. An icon marked purpose: "maskable" tells the system it is designed for that: the artwork sits inside a central safe zone, a circle 80% of the icon's width, and the background fills the whole square. Without one, Android shrinks your icon onto a white plate, which looks out of place.

The generator builds icon-mask.png with a full-bleed background and the artwork scaled into the safe zone, and the Android preview shows it cropped to a circle. The regular 192 and 512 icons keep the shape you choose. Maskable icons matter most for a progressive web app that people install.

A letter or two on a coloured shape is a clean, recognisable favicon for products, side projects and documentation sites, and it stays legible at 16 pixels where a detailed logo turns to mush. In text mode the SVG favicon contains real text, so it is tiny and sharp at every size. The PNG and ICO files are rendered from the same design.

Emoji favicons work too. The PNG files capture the emoji as your system draws it. In the SVG version the emoji is drawn by each visitor's own system font, so it looks slightly different on Windows, macOS and Android; if you need it identical everywhere, use the PNG files and remove the SVG line from the snippet.

Upload an SVG if you have one. It is passed straight through as icon.svg and also rendered into every PNG size. With a PNG or JPEG you get the ICO and PNG files but no SVG, since wrapping a bitmap in an SVG gives no benefit. Use a square source of at least 512 pixels so the large manifest icon is not upscaled.

Simplify for small sizes. A full logo with a wordmark becomes unreadable at 16 or 32 pixels, so most brands use just the symbol or initial. Our branding and logo design work always includes a small-size mark for exactly this reason.

An SVG favicon can adapt to dark mode by including a style block with a prefers-color-scheme: dark media query inside the file. That is most useful for transparent logos that would vanish on a dark tab bar. Icons generated here have a solid background, so they read well in light and dark browser themes as they are.

Browsers cache favicons aggressively, so a new icon can take a while to appear. Open the file URL directly or try a private window to check it. Google Search shows a favicon next to results using the icon and apple-touch-icon links on your home page, and recommends one larger than 48×48 pixels, which the 180 px Apple touch icon covers. Changes in Search can take days to weeks to show.

On a static site or a custom stack, copy the files into the folder that is served at the root of your domain and add the four link lines to your shared head template. In WordPress, the Site Icon setting under Appearance generates its own sizes from one uploaded image; you can still upload favicon.ico to the server root so direct requests find it. Shopify and most hosted builders have a single favicon upload in their theme settings, which covers browser tabs, but not always home screen icons.

In frameworks with file-based conventions, such as Next.js, Nuxt or SvelteKit, check the documentation for icon files before adding manual link tags, so you do not end up with two competing sets. A web app manifest is also where you set the app name, theme colour and display mode for installed sites; the snippet here includes sensible defaults you can extend. If you are turning a site into an installable app, our PWA development team handles the manifest, service worker and offline behaviour together.

After deploying, load yourdomain.com/favicon.ico and yourdomain.com/icon.svg directly to confirm they are served with the right content type, then check the tab in light and dark browser themes. On an iPhone, use Add to Home Screen to see the Apple touch icon; on Android, install the site or add it to the home screen to see how the launcher crops the maskable icon. Browser developer tools show the manifest and its icons under the Application panel, along with any errors.