Create a favicon from text, emoji, or an image. Auto-renders 16 to 512px PNGs plus copy-ready HTML link tags. Free, browser-based, no signup.
Generate a complete favicon bundle from text, an emoji, or your own image - without opening Figma or installing anything. Type up to three letters, pick an emoji, or upload an image; choose foreground and background colours, shape (square, rounded, or circle), and a font weight that reads well even at 16×16 pixels. Download all the required PNG sizes (16, 32, 48, 64, 128, 180, 192, 512) in one click and copy the matching link snippet for your HTML head. Useful for indie makers, side-projects, and quick agency mockups.
How It Works
Pick Text, Emoji, or Upload
Type up to three letters, choose an emoji, or upload your own image - the tool renders it to every required favicon size simultaneously.
Style the Background
Pick foreground and background colors, choose square / rounded / circle shape, and select a font weight that reads well even at 16×16.
Download the Bundle
One click downloads the full set of PNGs (16, 32, 48, 64, 128, 180, 192, 512). Copy the matching <link> snippet for your <head>.
Use Cases
Indie Makers
Ship a polished-looking site without opening Figma - pick a letter and a color, paste the link tags, and you're done.
Side-Project Developers
Test brand directions for a new product with multiple favicons in minutes, not hours.
Agency Teams
Prototype client favicons in client meetings - show 5 directions live without exporting from a design tool.
FAQ
Everything you need to know before you start.
At minimum: 16×16 (browser tab), 32×32 (high-DPI tabs), 180×180 (Apple touch icon), 192×192 and 512×512 (Android / PWA manifest). The tool emits all of these plus 48, 64, and 128 for completeness.
Yes - switch to the Emoji tab and pick any emoji. It's rendered to canvas at every size, so you get crisp PNGs ready to upload to your /public folder.
Modern operating systems (iOS, Android) display favicons inside their own shape masks. Picking 'rounded' or 'circle' here lets you preview how the icon will look on a home screen versus a browser tab.
Put each PNG into your site's /public (or web root) folder, then paste the generated <link> tags into your <head>. The tool gives you the exact snippet to copy.
Good to know
A favicon is a small detail that makes a site feel finished - and getting it wrong (a blurry 16px icon, a missing Apple touch icon) is surprisingly common. This generator takes a single image or piece of text and outputs the full set of sizes that browsers, bookmarks, and mobile home screens expect. Drop the files into your project and your site looks intentional in every tab and on every device.
These tools are made and kept free by a full-stack developer who ships production web apps, internal tools, AI features, and SEO for founders and teams worldwide. If you need a custom tool, an automation, or a complete website or web app, get a free quote in 24 hours.
Letters (1–3)
Foreground
Background
Shape
Font
Preview at every size
HTML head snippet
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png" /> <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png" /> <link rel="icon" type="image/png" sizes="512x512" href="/favicon-512.png" />