Turn an image, emoji or letters into a complete favicon set — favicon.ico, every PNG size, Apple & Android icons, and the HTML to paste. All in your browser.
Drop a square image here or browse
PNG, JPG or SVG · at least 512×512 for crisp icons
<head>🔒 Icons are generated on your device with the Canvas API — your image is never uploaded.
favicon.ico (16/32/48), PNGs, a 180px Apple touch icon and 192/512 PWA icons.
Use your logo, or make a clean icon from an emoji or initials on a colored shape.
Get the exact link tags to drop into your site — no guesswork.
A favicon is displayed at wildly different sizes for different purposes, and a single file cannot serve all of them well. The browser tab uses 16 or 32 pixels. Bookmark bars and history entries use similar sizes. A pinned tile on Windows, an Android home screen shortcut and an iOS home screen icon each want something between 150 and 512 pixels, and the iOS icon in particular is displayed large and rounded.
The ICO format exists precisely for this: it is a container holding several resolutions in one file, and the browser picks the closest match. A well-made favicon.ico contains at least 16, 32 and 48 pixel versions. Serving a single large PNG and letting browsers downscale gives a noticeably muddier result at 16 pixels, because automatic downscaling cannot make the decisions a hand-tuned small icon needs.
Alongside the ICO, a modern set includes PNGs at 192 and 512 pixels for Android, a 180-pixel apple-touch-icon for iOS, and a web app manifest listing them. An SVG favicon is also worth including, since browsers that support it scale cleanly to any size and can respond to dark mode.
A 16-pixel icon is 256 pixels in total, and almost nothing survives that reduction intact. A detailed logo becomes an indistinct smudge, and text becomes unreadable at anything beyond two or three characters — most single letters work, most words do not.
The approach that works is to design a simplified mark rather than shrink the full logo: one strong shape, high contrast against both light and dark backgrounds, and no fine lines, since a one-pixel line at 16 pixels either disappears or dominates. Many well-known brands use a distinct simplified glyph as their favicon for exactly this reason.
Test on both light and dark browser themes. A dark icon that reads perfectly on a light tab strip can vanish entirely on a dark one, and this is now the common case rather than an edge case. Either give the mark enough internal contrast to work on both, or supply an SVG favicon with a prefers-color-scheme media query so it adapts.
Browsers still look for /favicon.ico at the site root without being told to, which is why placing the file there is worth doing even with explicit markup. Everything else needs a <link> tag in the document head: rel="icon" for PNG and SVG variants with their sizes declared, rel="apple-touch-icon" for iOS, and rel="manifest" pointing at the web app manifest.
Caching is the usual source of frustration. Favicons are cached unusually aggressively — often beyond a normal reload, and sometimes persisting after a cache clear — so a changed icon can appear not to have updated. A version query string on the URL forces a refresh, and testing in a private window avoids chasing a stale file.
It is worth checking the result on a real device rather than trusting the generator's preview, particularly for the iOS home screen icon, which is composited onto a rounded rectangle. Transparency there is filled with black on some versions, so an icon designed with a transparent background can arrive looking very different from intended.
A multi-size favicon.ico (16/32/48), PNGs (16/32/48/64), a 180×180 Apple touch icon, and 192/512 Android/PWA icons, plus the HTML.
Yes — the Emoji / Text mode puts an emoji or 1–2 letters on a colored, rounded or circular background.
No — everything is generated locally in your browser.
Download the ZIP, drop the files in your site's root, and paste the provided HTML into your pages' <head>.
Favicon caching is unusually aggressive and can survive an ordinary reload. Add a version query string to the URL, or check in a private window, before assuming the file is wrong.
An ICO containing 16, 32 and 48 pixels, PNGs at 192 and 512 for Android, a 180-pixel apple-touch-icon for iOS, and ideally an SVG that scales to anything. A single large PNG downscales poorly at 16 pixels.