Free Favicon Generator Online
Create favicon files from text, emoji, or your logo — all sizes included, processed locally in your browser.
Single letter, number, symbol, or any emoji
72%
0%
0% = square · 50% = circle
Paste into <head>
<link rel="icon" href="/favicon.ico" sizes="any"> <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">
Live preview
16×16Tab small
32×32Tab / taskbar
64×64High-DPI
180×180Apple Touch
How to generate a favicon
- Choose a source: Text / Emoji to type a letter, number, or any emoji — or Image to upload your own logo.
- Adjust colors, font size, border radius, or image fit. The preview updates live.
- Click Download favicon package to get a ZIP with all required sizes ready to use.
- Unzip and copy the files to your site root, then paste the link tags into your HTML head.
- Open site.webmanifest and set your app name and theme color.
What favicon files does your website need?
A single favicon.ico is no longer enough. Modern browsers, iOS, Android, and PWAs each require a different size and format. Here is the complete set you need in 2026.
Required favicon sizes
| Size | Format | Used for |
|---|---|---|
| 16×16 | PNG | Browser tab (small), bookmarks bar |
| 32×32 | PNG | Browser tab (default), Windows taskbar, Retina displays |
| 180×180 | PNG | Apple Touch Icon — iOS/iPadOS home screen, iMessage link preview |
| 192×192 | PNG | Android Chrome home screen, PWA icon |
| 512×512 | PNG | PWA splash screen, high-DPI Android, app stores |
| Any | ICO | Legacy fallback — place favicon.ico in site root, browsers find it automatically |
This generator produces all sizes above in a single ZIP.
ICO vs PNG vs SVG — format comparison
| Format | Browser support | Transparency | Dark mode | Best for |
|---|---|---|---|---|
| ICO | 100% | ✓ | — | Root fallback (favicon.ico) |
| PNG | 99%+ | ✓ | — | Standard: all sizes, Apple, Android |
| SVG | ~85% | ✓ | ✓ | Modern browsers: scales infinitely, supports dark mode via CSS |
Use PNG + ICO for maximum compatibility. Add SVG on top if you want dark mode support.
How to add a favicon to your website
After downloading the ZIP, copy the files to your site root. Then add these tags to your HTML <head>. Pick the snippet that matches your stack.
Plain HTML
HTML
<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">
React (Vite) / Vue
Place files in public/. Add to index.html:
HTML
<!-- index.html (Vite + React or Vue) --> <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">
React (Create React App)
Place files in public/. Edit public/index.html — use %PUBLIC_URL% prefix:
HTML
<!-- public/index.html --> <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png"> <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest">
Next.js 13+ (App Router)
Quickest way: place favicon.ico directly in app/ — Next.js picks it up automatically. For full control with PNG sizes and Apple Touch Icon, use the metadata API:
JS
// app/layout.js (Next.js 13+ App Router)
export const metadata = {
icons: {
icon: [
{ url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
{ url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
],
apple: [{ url: '/apple-touch-icon.png', sizes: '180x180' }],
},
}WordPress
Go to Appearance → Customize → Site Identity and upload your 512×512 PNG — WordPress crops it to all required sizes automatically. The uploaded image becomes both the browser favicon and the app icon for home screen installs. If you need to declare a custom ICO path or Apple Touch Icon, add the link tags to your theme's header.php or use a header plugin.
Frequently Asked Questions
What favicon files does my website need?
A complete modern favicon setup needs: favicon-16x16.png and favicon-32x32.png for browser tabs, apple-touch-icon.png at 180×180 for iOS, and android-chrome-192x192.png plus android-chrome-512x512.png for Android and PWA. Keep a favicon.ico in your site root as a legacy fallback. This generator produces all of them in one ZIP.
What is the difference between favicon.ico and PNG?
favicon.ico is a legacy format supported by all browsers including old Internet Explorer — place it in your site root and browsers will find it automatically. PNG favicons support full color, transparency, and are required for Apple devices. SVG favicons (Chrome, Firefox, Edge) are the most modern option and support dark mode. Modern sites use all three: SVG or PNG declared in the HTML head, ICO as root fallback.
What is an SVG favicon and should I use one?
An SVG favicon is a vector icon that scales perfectly to any size and can adapt to dark mode using a CSS media query inside the SVG file. Supported in Chrome, Firefox, and Edge (about 85% of browsers). If you want dark mode support or a single file for all resolutions, add an SVG favicon alongside your PNG set.
Can I use an emoji as a favicon?
Yes. Select Emoji mode, type or paste any emoji, and it will be rendered at all required favicon sizes. You can download the result as a PNG set and favicon.ico. Emoji favicons are a quick, zero-design way to make a site feel branded.
How do I add a favicon in Next.js?
In Next.js 13+ App Router: place favicon.ico directly in the app/ directory — Next.js picks it up automatically. For full control (PNG sizes, Apple Touch Icon), export a metadata.icons object from your root layout.js with paths to each PNG file placed in the public/ folder.
Why is my favicon not updating after I changed it?
Browsers cache favicons aggressively, sometimes for days. To force a refresh: open the tab with your site, press Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac) for a hard reload. In Chrome DevTools you can also right-click the favicon in the tab and select "Reload favicon". Appending a version query string to the favicon URL (e.g. href="/favicon.png?v=2") forces all visitors to reload it.
What size should a favicon be?
The minimum is 32×32 px for browser tabs. For full coverage you need 16×16, 32×32, 180×180 (Apple), 192×192, and 512×512 (Android/PWA). Anything above 512×512 is not used by any browser or OS. This generator produces all required sizes automatically.
Are my images uploaded anywhere?
No. All processing happens directly in your browser using the Canvas API. Your images never leave your device — nothing is uploaded to any server. You can verify this by opening browser DevTools → Network tab while generating — you will see zero file transfers.