Which files do I actually need?

For most sites: favicon.ico in the site root, apple-touch-icon.png for iPhones and iPads, and the manifest with the 192 and 512 px icons for Android and installable web apps. The snippet in the zip links all of them; paste it into your and upload the files to the folder you entered.

Why does the Apple touch icon have a background even when I chose transparent?

iOS fills transparent parts of a home-screen icon with black and rounds the corners itself. The generator therefore always gives the 180 px Apple icon a solid square background - your chosen colour, or white.

What is a maskable icon?

Android can crop app icons into circles, squircles or teardrops. A maskable icon keeps its artwork inside the central 80% "safe zone" on a full background, so nothing important is cut off. The Android preview shows the circle crop.

Favicon Generator

Make a complete favicon set from an image, text or an emoji: favicon.ico, Apple touch icon, Android and maskable icons, the web manifest and the HTML to paste. Runs in your browser.

Your image never leaves this device.

LettersFontText colour

BackgroundTransparent

Shape

Padding: 10%

Preview

Dark mode

Site name (for the manifest)Icon folder on your site

The zip holds: favicon.ico (16, 32, 48 px), PNG 16/32/180/192/512, maskable 512, site.webmanifest, head-snippet.html.

Paste into your page's <head>

<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="#0ea5e9">

Create every favicon a modern website needs without uploading anything. Start from your logo, a letter or two, or an emoji; choose a background, shape and padding; and check the result in a real-size browser tab, on a phone home screen and as an Android adaptive icon. Download a zip with a multi-size favicon.ico, the PNG sizes browsers and phones request, a maskable icon that survives Android's circle crop, a ready site.webmanifest and the exact <head> tags to paste.

Favicon Generator

Preview

Frequently asked questions

Related tools