Filestay
↑ 0 B uploaded

Favicon generator

Every icon file a site actually needs, from a logo or from a single letter. Built in this tab, not on a server.

  • 0 uploads
  • No limits
  • No signup
  • Works offline
Start from
Drop an image here, or press ⌘V to paste one
Background
Letter colour
How it will look
My site
My site
My site
16px32px
9 files · .ico holds 16/32/48px
Paste this into your <head>
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

What you get

FileWhat reads it
favicon.icobrowser tabs, bookmarks, Windows shortcuts
favicon-16x16.pngexplicit small tab icon
favicon-32x32.pngretina tabs, taskbar
apple-touch-icon.pngiOS home screen
icon-192.pngAndroid home screen, PWA
icon-512.pngPWA splash screen, app listings
site.webmanifestAndroid home screen and PWA install
head-snippet.htmlthe four lines to paste into your <head>

Six files, not eleven

Favicon guides have a habit of growing. Somewhere along the way the standard answer became a folder of a dozen PNGs covering iOS versions that stopped shipping a decade ago. That list is not wrong so much as it is archaeology.

What is left in 2026 is short. Browsers want an .ico — they will ask for one at the site root whether you link it or not. Retina tabs want a 32 pixel PNG. iOS wants one 180 pixel apple-touch-icon. Android and installable web apps read the manifest, which needs 192 and 512. That is the whole set.

Starting from a letter

Most people who need a favicon do not have a logo yet. They have a project, an initial and a colour in mind, and every other generator asks them to go away and draw something first. Type a character, pick a background, and you have a perfectly respectable icon — which is what a great many shipped products are using at 16 pixels anyway.

Emoji work too, and keep their own colours: the font draws them, not the fill.

Why the padding slider matters

Android launchers crop home-screen icons to their own shape — a circle, a squircle, a rounded square, depending on the phone. An icon drawn edge to edge gets its corners cut off, and if your logo reaches the edge, part of it goes with them. That is what a maskable icon means, and it is why the manifest here marks the 512 pixel icon as maskable and why leaving a margin is not a matter of taste.

Nothing is uploaded

Each size is painted on a canvas in this tab. The .ico is assembled here as well — it is a small container format holding your PNGs, and there is no reason a server needs to be involved. The zip is built in the browser too. If the logo belongs to something you have not announced yet, that difference is the point.

How it works

  1. 01Pick a sourceDrop a logo, or type a letter or emoji and choose a colour.
  2. 02Adjust padding and roundingThe previews show a browser tab and an iOS home screen as you go.
  3. 03Download the zipSix icons, a manifest, the head snippet and a README.
  4. 04Drop the files at your site rootThen paste the snippet into your <head>.

Questions people actually ask

Do I still need favicon.ico in 2026?
Yes, and it is the one file you cannot skip. Browsers request /favicon.ico by default whether you link it or not, and some tools — bookmark managers, Windows shortcuts, a few RSS readers — look for nothing else. It costs a couple of kilobytes. The pack here puts 16, 32 and 48 pixel versions inside it, which is what everything actually reads.
What about an SVG favicon?
It is a genuinely nice option — one file, sharp at any size, and it can respond to dark mode with a media query. Support is good in Firefox, Chrome and Edge, and absent in Safari. So it is worth adding as an extra, never as a replacement: keep the .ico and the PNGs, and add the SVG on top if you have one.
What is a maskable icon?
Android crops home-screen icons to whatever shape the launcher uses — circle, squircle, rounded square. A maskable icon is one drawn with enough margin that cropping never clips anything important. The manifest in this pack marks the 512px icon as maskable, which is why the padding slider matters: at zero padding, Android will cut your logo.
How many sizes do I really need?
Six files, not the eleven you may have seen. One .ico for browsers, two PNGs for explicit tab sizes, one apple-touch-icon at 180 for iOS, and 192 plus 512 for Android and PWAs. The rest of the historical pile — 57, 60, 72, 76, 114, 120, 144 — was for iOS versions nobody runs any more.
Where do the files go?
All of them at the root of your site, next to index.html, then paste the head snippet into your . The zip includes a README saying the same thing, because this is the step people get wrong.
Is my logo uploaded anywhere?
No. Every size is drawn on a canvas in this tab, the .ico is assembled here from those PNGs, and the zip is built here too. Nothing leaves the device — which for an unreleased product logo is worth caring about.

Related tools