Building a Complete Favicon Set for Your Site
What this generator builds
A favicon is rarely a single file. Browsers, phones, and installed web apps each reach for a different resolution, so a site needs a small family of icons rather than one image. This generator takes a single source — an uploaded picture, a letter or two of text, or an emoji — and renders it onto an HTML canvas at every size a modern site expects.
The finished icons come back as PNG files, bundled together with a site.webmanifest and an HTML snippet that wires them into your page, so nothing is left to guess about which tag points where.
Three ways to start
You can upload an image in PNG, JPG, SVG, or WebP and let the tool scale it down to each icon size. For a text mark, type one or two characters and pick a font family and text color — useful when a real logo is not ready yet. The emoji route lets you choose from a curated set or paste any emoji your system supports.
Whichever source you pick, the same style controls apply: background color, corner rounding through a border-radius slider, and a transparent-background toggle for icons that should not sit on a solid tile.
A concrete example
Say you type the letter A, set a blue background, and raise the border radius to soften the corners. The preview updates across every size at once, and the download hands you favicon-16x16.png, favicon-32x32.png, and favicon-48x48.png for browser tabs and Windows tiles, apple-touch-icon.png at 180×180 for iOS home screens, and android-chrome-192x192.png plus android-chrome-512x512.png for Android and PWA installs — all inside one ZIP.
Sizes, formats, and the link tags
Each size has a job: 16×16 and 32×32 appear in browser tabs, 48×48 covers Windows, 180×180 is Apple's touch icon, and 192×192 and 512×512 feed Android and the web app manifest. The generated snippet declares them with <link rel="icon">, <link rel="apple-touch-icon">, and <link rel="manifest"> tags plus a theme-color meta, ready to drop straight into your <head>.
The output is PNG rather than a legacy multi-resolution .ico file, and every current browser accepts PNG favicons through these link tags. If you want rounded icons to blend into a tab strip, enable the transparent background so the corners stay clear instead of showing a colored square.