Design & Media
Free Favicon Generator Online
Create favicons from text, emoji or simple icons. Download as ICO and PNG.
What is a favicon and why does every website need one?
A favicon (short for "favourite icon") is the small image that represents your website across the browser interface. You see it in the browser tab next to the page title, in the address bar of some browsers, in the bookmarks list or favourites panel, in the browser history, and in the recently visited sites grid on new-tab pages. On mobile devices, it becomes the icon that appears when a user saves your site to their home screen, and it powers the Apple touch icon used by iOS Safari.
For Progressive Web Applications (PWAs), favicons are not optional — they are a core requirement. PWA icons appear on the home screen, in the app switcher, on the splash screen at launch, and in the operating system's list of installed apps. A missing or low-quality PWA icon degrades the perceived quality of your application and can cause your app to fail lighthouse audits.
Beyond technical function, favicons carry real psychological weight. Research in UX and branding consistently shows that visual consistency — a recognisable icon appearing the same way across tabs, bookmarks, and home screens — builds trust. Users with many tabs open navigate by icon, not by title text. A missing favicon (which defaults to a generic browser icon) signals an unfinished or unpolished product, while a clear, high-contrast favicon communicates attention to detail. For developer tools, SaaS products, and any site targeting a professional audience, an absent favicon is a credibility gap that costs you nothing to close.
The original favicon format — a .ico file in the site root — has been supplemented over the years by a range of PNG sizes and an SVG format for modern browsers. Getting the full suite of sizes right across all platforms requires generating multiple files and the correct HTML declarations. This tool handles all of that for you.
Favicon formats and sizes: the complete guide
Different browsers and operating systems request different favicon sizes and formats. Providing the full set ensures your icon looks sharp in every context, from a 16-pixel browser tab to a 512-pixel PWA splash screen.
| Size | Format | Used for |
|---|---|---|
| 16×16 | ICO / PNG | Browser tab icon, the smallest and most universally rendered size. Every browser requests this as its fallback. |
| 32×32 | ICO / PNG | Taskbar pinned sites in Windows, higher-DPI browser tabs in some configurations, and Retina displays on macOS at 1× logical size. |
| 48×48 | ICO | Windows site icons in the Start menu and desktop shortcuts when a site is pinned via Internet Explorer or legacy Edge. |
| 96×96 | PNG | Google TV and some Android system contexts. Also used by older versions of Chrome on desktop as the high-resolution tab icon. |
| 180×180 | PNG | Apple touch icon for iOS Safari. When a user adds your site to their home screen on iPhone or iPad, this is the icon displayed. |
| 192×192 | PNG | Android home screen shortcut icon and the standard icon size declared in Web App Manifest for Android Chrome. |
| 512×512 | PNG | PWA splash screen on Android, high-resolution icon in Chrome Web Store, and the source image for any system that needs to down-sample. |
The .ico format is a container that can bundle multiple image sizes in a single file — commonly 16×16, 32×32, and 48×48 together. When a browser requests favicon.ico, it selects the most appropriate size from the bundle for its display context. This is why the ICO format persists despite PNG being universally supported: a single favicon.ico in the site root satisfies the default favicon request of every browser without any HTML declaration required.
How to add a favicon to your website
Adding a complete favicon set to a website involves generating the files, placing them correctly, and declaring them in your HTML. Follow these steps for a full cross-platform implementation.
- 1Generate and download your favicon files
Use the generator above to produce all required sizes from a single source image or emoji. Download the package, which will contain favicon.ico, PNG files at each required size, and a manifest.json snippet.
- 2Upload files to your public root directory
Place favicon.ico and all PNG files in the root of your public directory — /public in Next.js, /static in Gatsby, /public in Create React App, or the web root in a traditional server setup. The favicon.ico must be accessible at https://yourdomain.com/favicon.ico for browsers to find it automatically.
- 3Add HTML link tags to your <head>
Declare each icon size explicitly in your HTML head. This ensures all browsers and devices request the correct file rather than relying on auto-discovery:
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <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" /> - 4Add icon entries to manifest.json for PWAs
If your site is a Progressive Web App, declare the 192×192 and 512×512 icons in your Web App Manifest. Without these, your PWA will fail the installability criteria and show a generic icon on home screens.
{ "name": "My App", "short_name": "App", "icons": [ { "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone" } - 5Verify with browser DevTools
Open DevTools → Network tab, filter by "Img" or search "favicon", then hard-reload (Ctrl+Shift+R / Cmd+Shift+R). Confirm each favicon request returns a 200 status. Also check the Application tab → Manifest to verify the PWA icons are parsed correctly.
Emoji favicons: the modern approach
Over the past few years, a new approach to favicons has gained traction in the developer tooling community: using a single emoji as the site icon. The technique was popularised when prominent developer tools — including Linear (the project management tool) and several Vercel-hosted applications — demonstrated that a carefully chosen emoji could be more recognisable and more memorable than a traditional logo icon at small sizes.
The implementation is remarkably simple. Instead of a PNG or ICO file, you declare an inline SVG data URI containing the emoji directly in the <link> tag:
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🛠️</text></svg>" />This approach requires zero file downloads and no build step. It works in all modern browsers (Chrome 80+, Firefox 75+, Safari 14+). The emoji is rendered by the operating system's emoji font, which means it automatically looks correct on every platform without any image export.
- Zero additional HTTP requests
- No image files to maintain or regenerate
- Renders crisply at all resolutions via OS emoji font
- Can be changed with a single character swap
- Works without any build tooling
- Emoji rendering varies across OS and browser (Apple vs Google vs Windows style)
- No Apple touch icon support — home screen icon on iOS still needs a PNG
- Not suitable for brands that require a specific, consistent icon treatment
- May look unprofessional in conservative enterprise contexts
The emoji favicon approach is ideal for developer tools, personal sites, open-source project documentation, and side projects where speed of setup matters more than pixel-perfect brand control. For production SaaS products and consumer applications, complement it with a full PNG icon set for home screen and PWA contexts.
Design tips for readable favicons
A favicon is one of the most constrained design formats in existence. At 16×16 pixels, you have just 256 pixels to work with — fewer than many individual letters in a standard logo. Most design decisions that work at larger sizes fail catastrophically at favicon scale.
A horizontal wordmark, a complex icon with thin lines, or a logo with multiple elements becomes an unreadable blur at favicon size. Do not try to shrink your full brand mark — instead, extract the single most recognisable element from it, usually a letterform or a simplified shape.
The most effective favicons for text-based brands are a single letter — the brand initial — set in a bold weight on a solid background. GitHub's Octocat, Figma's stylised "F", and Notion's "N" are all variations of this approach. A single letter at high contrast reads instantly even at 16 pixels.
Browser tabs and bookmark bars have light or dark backgrounds depending on the user's system theme and browser skin. Your favicon needs to be legible against both. Avoid low-contrast combinations (light grey on white, dark blue on black) and prefer a solid, vibrant background colour with a white or very light foreground, or vice versa.
Modern browsers (Firefox 60+, Chrome 100+) support SVG favicons, and SVG supports CSS media queries including prefers-color-scheme. This means you can provide a light-mode and a dark-mode version of your favicon within a single SVG file, ensuring your icon is always readable regardless of the user's system theme.
Open your site in Chrome with both a light theme and a dark theme (Settings → Appearance). Switch Firefox to Dark theme. Check that your favicon is clearly distinguishable in both contexts. Many designers test only in light mode and discover that their dark favicon disappears against a dark browser chrome only after launch.
Favicon checklist before going live
Run through this checklist before deploying any new site or after making changes to your branding. Each item corresponds to a specific browser, platform, or context where your favicon will be displayed.
Accessible at https://yourdomain.com/favicon.ico with a 200 response. This is the universal fallback that every browser requests automatically, with or without a <link> declaration.
Add <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> for modern browsers, Retina displays, and Windows taskbar pinned sites.
Add <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> for iOS Safari home screen icons. Without this, iOS will screenshot your page as the icon, which looks poor.
Both sizes must be declared in your Web App Manifest for full PWA compliance. The 512×512 is required to pass the PWA installability check in Chrome and Lighthouse.
Open your site in all three browsers and verify the favicon appears correctly in the tab. Chrome and Firefox use the declared PNG sizes; Safari on macOS has its own rendering quirks and sometimes falls back to ICO.
Bookmark your page in Chrome and Firefox and confirm the favicon appears next to the bookmark title. Some browsers cache favicons aggressively — test in a fresh profile or incognito window if you recently changed your icon.
On an iPhone, use Safari to save your site to the home screen and verify the Apple touch icon looks correct. On Android, use Chrome's "Add to Home Screen" option and check the 192×192 icon from the manifest.
FAQ
Common questions
What is a favicon and where is it used?
A favicon (short for "favourite icon") is a small image that browsers display in the tab bar, bookmarks, history, and address bar. It is linked in the HTML <head> with <link rel="icon" href="/favicon.ico">. Browsers request it automatically even without the link tag. A recognisable favicon reinforces brand identity and helps users locate your tab among many open ones.
What sizes should a favicon be?
The minimum is 16×16 px (browser tabs). 32×32 px is used for taskbar pinned sites and higher-DPI displays. 192×192 px is used for Android home screen shortcuts (web app manifest). Apple devices use 180×180 px (apple-touch-icon). ICO files can contain multiple sizes in one file. This generator produces 16, 32, and 192 px PNG files plus a combined ICO.
What is an ICO file?
An ICO file is a container format that bundles multiple image sizes into a single file. When a browser requests favicon.ico, the OS picks the most appropriate size from within the file. ICO is the only format that works in all browsers including older Internet Explorer versions. For modern projects, PNG favicons with explicit size declarations are also fully supported.
Can I use an emoji as a favicon?
Yes — and this is one of the most common modern approaches. Emojis render at any size, require no design skill, and are immediately recognisable. Simply type your chosen emoji into the text field. The generator renders it on a canvas and produces downloadable PNGs and an ICO. This technique is used on many developer tools and personal sites.
What fonts are available for the text favicon?
The generator uses the fonts available in your browser's system. By default it uses a bold sans-serif stack. Because favicons are very small, simple bold letters render more clearly than decorative fonts. Single letters and emojis work best — two or three characters maximum for 16×16 px clarity.
How do I install the favicon on my website?
Place favicon.ico in the root of your domain (e.g. https://example.com/favicon.ico). Browsers fetch it automatically. For PNG variants, add them to your HTML <head>: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">. For PWAs, reference 192×192 in your manifest.json under the icons array.
Will the favicon look good at 16×16 px?
Simple designs — a single letter, digit, or emoji — work well at 16×16. Complex logos or multi-word text do not scale down well. Preview the 16×16 download before deploying. If the result looks blurry, try a single initial letter in a contrasting colour on a solid background, which is the most legible approach at small sizes.
Is the generated favicon free to use commercially?
Yes. You provide the text or emoji input and choose the colours — the generator simply renders your choices onto a canvas. The output is entirely yours. If you use an emoji, be aware that emoji designs are owned by platform vendors (Apple, Google, etc.) — using them on a commercial site is generally accepted practice, but check your use case if you have specific IP concerns.
More in Design & Media