Favicon Generator
Make a favicon from letters, an emoji or your logo, see it in a browser tab and on a home screen, then download every file a site needs with the tags to paste.
ACTUAL SIZE
Paste inside <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="#275bea">favicon.ico(16, 32 and 48 px in one file): old browsers, Windows, and anything that asks for /favicon.icofavicon-16x16.png: Browser tabs on standard screensfavicon-32x32.png: Browser tabs on high-density screens, bookmarksapple-touch-icon.png: iPhone and iPad home screenandroid-chrome-192x192.png: Android home screen (via the manifest)android-chrome-512x512.png: Android splash screen and install promptssite.webmanifest: name, colours and icons for Android and installed web apps
Who it is for
Founders shipping a new product, developers setting up a site, and anyone whose tab still shows the default framework logo. It takes a minute, needs no design tool, and gives you every file in one ZIP.
How to use it
- Pick a starting point: Letters (your initial on a coloured tile), Image (your logo as PNG, JPG, WebP or SVG) or Emoji.
- Choose the colours and shape, then check the browser tab preview. The 16 px version is the one that matters most: if it is not readable there, use fewer letters or a simpler mark.
- Add your site name for the manifest, press Download favicon set, unzip the files into the root of your site (the
public/folder in Next.js, Vite and most frameworks) and paste the tags into your<head>.
The files a modern site needs
| File | Size | Used by |
|---|---|---|
favicon.ico | 16, 32, 48 px | Every browser as a fallback, Windows shortcuts, crawlers that request /favicon.ico |
favicon-16x16.png, favicon-32x32.png | 16 and 32 px | Browser tabs and bookmarks on standard and sharp screens |
apple-touch-icon.png | 180 px | iPhone and iPad when someone adds your site to the home screen |
android-chrome-192x192.png, android-chrome-512x512.png | 192 and 512 px | Android home screen and install prompts, listed in the manifest |
site.webmanifest | text | Name, theme colour and icon list for Android and installed web apps |
An SVG favicon (favicon.svg) is optional: it stays sharp at any size and can switch colours for dark mode, but Safari support is recent, so keep the PNG and ICO files either way.
Common mistakes
- Shrinking a detailed logo to 16 px. Wordmarks and thin lines turn to mush; use the symbol or one letter.
- Putting the files in a subfolder without updating the paths in the tags.
- A transparent apple-touch-icon. iOS fills the transparent area with black.
- Only shipping a PNG. Requests for /favicon.ico then return a 404 on every page view.
- Testing in a browser that cached the old icon. Try a private window first.
Questions
Is this favicon generator free?
Yes. There is no account, no watermark and no limit on downloads.
Do you upload my logo?
No. The icon is drawn in your browser and the ZIP is built there too. Your image never leaves your device.
What size should a favicon be?
There is no single size. Browser tabs use 16 and 32 px, Windows and some browsers 48 px, iPhones 180 px for the home screen, and Android 192 and 512 px. This tool makes all of them from one design.
Do I still need favicon.ico?
Yes, keep it. Browsers, feed readers and crawlers still request /favicon.ico at the root of your site even when your HTML points at PNG files. The .ico in the download holds 16, 32 and 48 px versions in one file.
Can I make a favicon from text or an emoji?
Yes. Pick Letters for one to three characters in a heavy sans-serif on a coloured tile, or Emoji to use any emoji. Emoji are drawn with your device's emoji font.
I changed my favicon but the old one still shows. Why?
Browsers cache favicons hard. Open the icon file directly, hard refresh, or rename the files (for example favicon-v2.png) and update the tags. Google search results can take days or weeks to pick up a new icon.
What about the image people see when I share a link?
That is a different file, the Open Graph image. Make one with the OG Image Generator.