Upload any image and get favicons in every size — 16, 32, 180, 192 and 512 px — plus the copy-paste HTML snippet. Private: your image never leaves your browser.
Tip: square PNGs with a simple bold design look best at tiny sizes.
Part of the Image Tools collection — browse all related free tools.
<head> of your pages.The classic favicon is 16×16 or 32×32 px, but modern sites also need 180×180 (Apple), 192×192 and 512×512 (PWA). This generator creates all of them.
Download the PNGs, upload them to your site root, and paste the HTML snippet into your page <head>.
A simple bold logo or letter on a solid background — fine details vanish at 16×16 px. Square PNGs work best.
Yes — 100% free, no signup, and your image never leaves your browser.
Browsers cache favicons aggressively — sometimes for weeks. Hard-refresh with Ctrl+F5, clear the site's data, or append a version query like ?v=2 to the icon URL to force every browser to fetch the new file.
Yes, for maximum compatibility — older browsers and various tools still request /favicon.ico automatically. Modern browsers prefer the PNG link tags, so the winning combo is both: the .ico as fallback, PNGs as primary.
Yes — an SVG favicon containing a single emoji character works in Chrome, Firefox, and Edge with no image files needed. Safari doesn't support SVG favicons, so keep a PNG fallback for Apple users.
Browsers request favicons in many contexts — tabs, bookmarks, history, mobile home screens, and installed web apps — and each context wants a different size. You supply a set of sizes; the browser picks the closest match. Serve only one size and some context will display a blurry upscale or nothing at all.
The standard set: favicon.ico (a multi-size file holding 16×16, 32×32, and 48×48) for tabs and legacy browsers; 32×32 and 16×16 PNG fallbacks; 180×180 apple-touch-icon for iOS home screens; 192×192 and 512×512 PNG for the web-app manifest (Android/PWA). The link tags: <link rel="icon" href="/favicon.ico" sizes="any">, <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">, and <link rel="apple-touch-icon" href="/apple-touch-icon.png">.
Worked example: upload a 1024×1024 logo → the generator downsamples it into the full set above → paste the snippet into your page's <head> → hard-refresh (Ctrl+F5). If the old icon persists, that's favicon caching — famously stubborn, sometimes lasting weeks — so add a version query (?v=2) to force a fresh fetch.
Practical tips: design for 16×16 legibility — bold simple shapes, no tiny text, high contrast — and put the mark on a solid background so it survives dark-mode browser themes. Limitation: SVG favicons are elegant but unsupported in Safari, so keep ICO/PNG versions as the reliable baseline for Apple users.
Modern favicon best practices: add <meta name="theme-color" content="#…"> so mobile browsers tint their UI to match your brand — it's the cheapest polish on the modern web. For maskable icons (Android adaptive icons), keep critical artwork inside the central "safe zone" (roughly 80% of the canvas), since launchers crop icons into circles, squircles, and teardrops. SVG favicons can even adapt to dark mode: embed a <style>@media (prefers-color-scheme: dark)</style> block that swaps colors — one file, two themes (Chrome/Firefox/Edge; Safari still needs PNG). iOS ignores theme-color and SVG alike, so the 180×180 apple-touch-icon remains mandatory for "Add to Home Screen" to look right. Finally, place favicon files at the domain root when possible — some crawlers, RSS readers, and chat unfurlers request /favicon.ico directly without reading your HTML.