Favicon Generator
Generate favicons from text, emoji or uploaded images.
Preview
Download
What is a favicon generator?
A favicon is the small icon displayed in browser tabs, bookmarks, search results, and app shortcuts for a website. Typically 16x16, 32x32, or 48x48 pixels, favicons help users identify your site among many open tabs. This tool generates favicons in all required sizes and formats from a single source image.
Modern websites need multiple favicon sizes: 16x16 and 32x32 for browser tabs, 180x180 for Apple touch icons, 192x192 and 512x512 for Android home screen shortcuts, and sometimes SVG for scalable display. This tool generates all required sizes from one upload, plus the necessary HTML link tags to include in your site.
Where favicons appear
Favicons show up in more places than most people realise. The most familiar location is the browser tab — every open page shows its favicon to the left of the page title, letting you identify a tab at a glance when you have dozens open. They also appear in the browser's bookmarks bar and bookmarks manager, in your browser history list, and in the address bar on some browsers when you start typing a URL.
On mobile devices, when a visitor taps 'Add to Home Screen' in Safari or Chrome, the operating system uses the apple-touch-icon (180×180 on iOS) or the PWA manifest icon (192×192 on Android) as the app shortcut on the device's home screen. On desktop, progressive web apps installed through Chrome or Edge appear in the system taskbar and the Windows Start Menu using the 512×512 icon from the manifest. Search engines including Google sometimes display a site's favicon in search results next to the page URL, making a polished icon part of your brand impression even before users click.
How to use this tool
Upload a square image (ideally at least 512x512 pixels). The tool generates all standard favicon sizes and formats. Preview how each size looks. Download the complete favicon package including the ICO file, PNG versions, and the HTML meta tags to paste into your site's head section.
Favicon formats explained
Modern browsers and operating systems require several different favicon formats. Each format serves a specific context, and omitting one means some devices or browsers will fall back to a generic blank icon.
- favicon.ico — The original favicon format. An ICO file is a container that can embed multiple image sizes (typically 16×16, 32×32, and 48×48) in a single file. Place it in your site's root directory as /favicon.ico. Browsers fetch this path automatically, even without a <link> tag, ensuring compatibility with old browsers and feed readers.
- PNG favicons (32×32) — Modern browsers prefer PNG. A 32×32 PNG is the standard general-purpose favicon used for browser tabs on high-DPI screens. Declare it with: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
- apple-touch-icon (180×180) — Apple devices use this when a visitor saves your site to the iOS or iPadOS home screen. Without it, iOS grabs a screenshot of your page instead. Declare it with: <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">. Do not use a transparent background here — Apple composites the icon on a white square, which makes transparent areas look wrong.
- PWA manifest icons (192×192 and 512×512) — Progressive Web Apps declare icons in a JSON manifest file. The 192×192 icon is used for home-screen shortcuts on Android, and the 512×512 icon is used for the splash screen shown while the app loads. Reference the manifest with: <link rel="manifest" href="/site.webmanifest">
- SVG favicon — Modern browsers (Chrome 80+, Firefox 41+, and Safari 16+) support an SVG favicon declared with: <link rel="icon" type="image/svg+xml" href="/favicon.svg">. SVG favicons are resolution-independent and can include a prefers-color-scheme media query inside the SVG to switch between a light and dark version automatically. List the SVG tag before the PNG fallback so capable browsers use the vector, while older browsers fall through to the PNG.
The HTML link tags you need
Copy these tags into the <head> of every page on your site. Order matters slightly — put SVG first, then PNG, then ICO. Browsers pick the first format they support.
Your site.webmanifest file should include at minimum a name, short_name, icons array (with 192×192 and 512×512 entries), theme_color, background_color, and display mode set to standalone for installable PWAs.
Required favicon sizes
- 16x16 — browser tab icon (the classic favicon size).
- 32x32 — taskbar shortcut, high-DPI browser tabs.
- 180x180 — Apple Touch Icon for iOS home screen.
- 192x192 and 512x512 — Android home screen and splash screen (PWA manifest).
Favicon design tips
Favicons must be recognizable at tiny sizes. Use bold shapes, simple geometry, and high contrast. Text rarely works below 32x32. A single letter or abstract symbol of your brand is most effective. Test your favicon at actual display size (16x16) — details that look great at 512x512 become invisible specks at favicon size. Use a transparent background for PNG favicons.
Use high contrast
Favicons are displayed against browser chrome that varies from light grey to near-black depending on the user's system theme. A design that looks crisp on a white background can disappear on a dark tab bar. Aim for a contrast ratio of at least 4.5:1 between the icon's foreground and background. A dark icon on a vivid background, or a light icon on a dark background, both work well.
Design for silhouette recognition
At 16×16 pixels your icon is just 256 pixels total. The brain reads favicons more by shape than by detail. A distinctive silhouette — a single letter, a geometric mark, a recognisable symbol — works far better than a detailed illustration. Logos that spell out a company name in full are nearly illegible at favicon size. Isolate the single most recognisable element of your brand and centre it with generous padding so it does not get clipped.
Common favicon mistakes
- Only providing a 16×16 PNG — this looks blurry on retina and high-DPI displays. Always include at least a 32×32 PNG.
- Forgetting the apple-touch-icon — iOS will composite a screenshot instead, resulting in an unreadable tiny version of your full page.
- Transparent background on the apple-touch-icon — Apple renders the transparent areas as black, ruining the design. Use a solid background colour for the 180×180 icon.
- Using a busy, detailed logo — fine details vanish below 64×64 pixels. Strip the design back to its core mark.
- Not adding a cache-buster after an update — browsers cache favicons aggressively. Append a version query string (?v=2) to the href to force browsers to re-fetch the new file.
Client-side generation and privacy
This favicon generator runs entirely inside your browser using the HTML Canvas API. The text, colours, and corner-radius settings you enter are never sent to a server. Your design stays on your device, and you download the generated files directly to your computer. This means the tool works offline once the page has loaded, and there is no account or sign-up required.
Frequently asked questions
What is the difference between favicon.ico and PNG favicons?
The ICO format can contain multiple sizes in a single file and is supported by all browsers including very old ones. PNG favicons are simpler (one size per file) and are used by modern browsers. Most sites now include both: an ICO file for maximum compatibility and PNG/SVG for modern browsers. The HTML link tags tell the browser which to use.
Why is my favicon not showing up?
Common reasons: the browser has cached an old favicon (try clearing cache or loading in a private window), the file path in the HTML link tag is incorrect, the file format is wrong, or the favicon is not in the root directory. Browsers aggressively cache favicons — it can take days for an updated favicon to appear. Adding a query string (favicon.ico?v=2) can force a refresh.
Do I still need a favicon.ico file?
Yes, for now. Some older browsers, email clients, RSS readers, and web crawlers still look for /favicon.ico at the root of your domain without reading any HTML link tags at all. Keeping a 32×32 favicon.ico in your root directory takes negligible space and covers these edge cases. Modern browsers will prefer the SVG or PNG versions declared in your <link> tags over the ICO fallback.
Can I use an emoji as a favicon?
Yes — with SVG favicons. You can declare an inline SVG containing a text element with an emoji character, and modern browsers render it perfectly at any resolution. The SVG approach also supports dark mode: wrap different fills in a prefers-color-scheme media query inside the SVG file. This generator lets you type any emoji or character into the text field and export it as an SVG favicon ready to use.