Favicon Generator

Create favicon.ico, Apple and Android icons, a maskable icon, site.webmanifest and the HTML tags from one image, all in your browser.

Status: Live
Last updated: October 3, 2026

Create every favicon file a modern site needs from one image, plus the HTML tags and the web app manifest. Upload an SVG or a large square PNG, set your site name and colours, and download a ZIP with favicon.ico, PNG icons for iOS and Android, a maskable icon and site.webmanifest. Everything runs in your browser: your image is never uploaded.

Which files you actually need

favicon.ico with 16, 32 and 48 px images, for browser tabs and tools that request /favicon.ico directly.
favicon.svg when you start from an SVG: it stays sharp at any size and is what search engines prefer.
favicon-96x96.png as the PNG fallback when you start from a bitmap.
apple-touch-icon.png at 180×180 with a solid background, for the iPhone and iPad home screen.
web-app-manifest-192x192.png and -512x512.png, plus a maskable 512 px icon with safe-zone padding for Android launchers.
site.webmanifest with your site name, short name and colours.

The long lists of 57, 72, 114 and 144 px icons and the old Windows tile tags are no longer needed.

How to install the favicons

Unzip the files into the root folder of your site, next to index.php or index.html.
Paste the tags into the <head> of every page. On WordPress use a header-code setting in your theme or a small plugin, or set the site icon in the Customizer instead (keep only one set of tags).
Make sure .webmanifest is served as application/manifest+json.
Check the result with the favicon checker; browsers cache icons hard, so test in a private window.

At a glance

In short: Create every favicon file a modern site needs from one image, plus the HTML tags and the web app manifest.

Covers: Which files you actually need and How to install the favicons.

Answers: What image should I start from? Why does the Apple icon have a background?

Frequently asked questions

What image should I start from?

An SVG gives the sharpest result at every size. Otherwise use a square PNG of at least 512×512 px. Simple, bold shapes read best at 16 px, so a short mark or initial often works better than a full logo with text.

Why does the Apple icon have a background?

iOS does not support transparency in home-screen icons and fills transparent areas with black. The generator fills them with the background colour you choose.

What is a maskable icon?

Android launchers crop icons into circles, squircles or other shapes. A maskable icon keeps the important part inside a central safe zone and fills the rest with your background colour, so nothing gets cut off.

Is my image uploaded?

No. The icons, the ICO file and the ZIP are all created in your browser.