Upload an SVG or PNG. Walk away with a complete favicon set: a multi-resolution ICO file, every Apple touch and PWA icon size, an Open Graph social card, the web manifest, and the HTML snippets ready to paste into your <head>.
SVG works best — it stays sharp at every size. PNG and JPG also work, but pick a source at least 512×512 so smaller sizes stay crisp.
Paste this inside your site's <head> tag. The paths assume the favicon files sit at the root of your site (e.g. favicon.ico at /favicon.ico).
Once upon a time, "favicon" meant one file: favicon.ico at the root of your website. Internet Explorer 5 would find it, paint it next to the URL bar, and that was the entire feature. Twenty-five years later, the modern web wants a dozen variants.
The reason: every device shows your icon in a different place at a different size. A browser tab needs 16×16. A retina tab needs 32×32. iOS home screens want 180×180 with rounded corners that the OS clips itself. Android launchers want 192×192 and 512×512 for adaptive icons. Search engines want a 48×48 thumbnail next to your listing. Social cards need a 1200×630 image. PWA installs need a manifest file pointing at the right icons. Each one expects exactly the right format at exactly the right path.
You could generate all of these by hand in Figma or Photoshop, save them with the right filenames, write the manifest JSON yourself, and remember the exact <link> tag syntax for each one. Or you can drop one image here and have it done in three seconds.
Nine files. Each one targets a specific browser, OS, or context. Here's what they're for and which platforms care about them.
The classic. Old browsers, search engine result pages, bookmark bars, and many embed contexts still ask for this exact file at this exact path. Contains three resolutions in one container.
Modern browsers (Chrome 80+, Firefox 41+, Safari) prefer this over the ICO when both are present. Stays sharp on retina screens at any DPI. Falls back to ICO automatically on browsers that don't support it.
The icon iOS uses when you tap "Add to Home Screen." iOS clips it to the OS-standard rounded square automatically — your image should be a full square with the design near the center.
The standard PWA install icon for Android home screens and launchers. Referenced from the manifest. Required for any site that wants to be installable as an app.
High-resolution variant for splash screens, app stores, and adaptive icons that may zoom or transform. PWAs failing to provide this get visibly pixelated launches on modern phones.
The image that appears when your URL is shared on Twitter, Slack, iMessage, LinkedIn, Discord, or Facebook. We center your icon on a backdrop in your chosen background color — no text, just the mark.
Tells browsers your app's name, theme color, background color, and which icons to use when installed. Required for PWAs. Browsers without PWA support ignore it gracefully.
Six lines of HTML that link everything together. Paste inside your <head>. Without this, browsers won't know to fetch your favicons — having the files isn't enough.
A short note explaining where each file should live on your server. Most go at the site root. The manifest can be referenced from anywhere as long as the snippet's path matches.
A favicon is the smallest piece of design real estate on your entire website. Sixteen pixels by sixteen pixels — fewer dots than a typical letter of body text. Most failed favicons fail because they were designed at 256×256 in a design tool and shrunk down without ever being checked at the size they'd actually appear.
Start at the smallest size. Design the 16×16 version first, then scale up. If it reads as a recognizable mark at 16 pixels, the bigger sizes will work automatically. The reverse almost never holds.
Avoid thin lines and small text. A 1px line in your 256×256 source becomes a sub-pixel ghost at 16. Strokes need to be at least 1/16 of the icon's width to survive the smallest size. Text inside a favicon almost never works — use a single letter or a glyph instead.
High contrast wins. Browser tabs are usually white or near-white. A pale icon against a pale tab disappears. Favor a strong dark fill or a saturated color for the foreground.
Don't put your full logo in there. If your logo is "company name in a custom typeface," the favicon should be a single letter or glyph — not the whole wordmark shrunk to illegibility. The favicon is a sister mark, not the logo itself.
Solo developers shipping side projects who don't want to hand-export a dozen sizes from Figma every time they launch something new.
Designers who already have an icon mark and just need it converted into the various platform-specific files without leaving the browser.
Bloggers and newsletter writers running a self-hosted site who want a real favicon instead of the platform's default and don't want to wrestle with SaaS upsells.
Local shops and consultants whose Squarespace/Webflow theme gives them one slot for a favicon — they need one ICO file and the cleanest possible result.
Web agencies handing client sites off — they need the complete favicon set as part of every launch checklist, with no per-project licensing or accounts.
Web development instructors covering the favicon-set workflow as part of teaching how production sites are deployed.
