About the Favicon Generator
A favicon is the small icon a browser shows in a tab, a bookmark or a mobile home screen shortcut, and this tool builds one in seconds from a letter, a short abbreviation or a single emoji. Pick a background color, a text color and a shape, and a canvas-rendered preview updates live so you know exactly how it looks before downloading anything.
It exists for the moment a side project, an internal tool or a client prototype needs a real tab icon instead of the generic globe placeholder, without opening a design application just to draw a colored square with a letter on it. The tool renders live previews at 96, 32 and 16 pixels side by side, which matters because a design that reads clearly at 96 pixels can turn into an illegible smudge at the 16 pixel size a browser tab actually uses.
Beyond a plain download, the tool can also produce a self-contained inline SVG as a data URI wrapped in a ready-to-paste link tag. That means a favicon can go live with a single line in the page head and no separate image file to host, upload or cache-bust, which is convenient for quick prototypes and static pages alike.
Every pixel of the render happens on an HTML canvas inside your browser tab, so nothing about your chosen letters, colors or shape is sent to a server; the download and the copied HTML tag are generated locally and are ready to use immediately.
How to use it
- Type a letter, a short abbreviation of up to a few characters, or paste a single emoji into the text field.
- Pick a background color and a text color, or click one of the preset color pairs to start faster.
- Choose a shape: square, rounded, or circle, to match your site's existing visual style.
- Check the live 96, 32 and 16 pixel previews to confirm the icon still reads clearly at the smallest size.
- Pick a PNG export size between 32 and 512 pixels, matching what your target platform expects.
- Download the PNG or SVG file, or click copy HTML to grab a ready-to-paste inline link tag.
- Paste the downloaded file reference or the copied tag into your site's document head.
Examples
- Type the letter K on a blue circle background to make a simple, brandable initial favicon.
- Use a rocket emoji on a dark rounded square for a startup landing page or internal launch dashboard.
- Click copy HTML to get a link rel=icon tag with an inline SVG data URI, so no separate favicon file needs hosting.
- Download a 180px PNG to use directly as an apple-touch-icon for iOS home screen shortcuts.
- Download a 512px PNG as a high resolution source you then feed into a PWA manifest icon set.
- Generate two letters, like IT, on a rounded square for a two-letter product abbreviation icon.
Favicon sizes and where each one is used
Different platforms read different favicon sizes, and shipping only one size is the most common reason a favicon looks fine in a browser tab but is missing or blurry on mobile.
- 16x16 px: the classic desktop browser tab icon.
- 32x32 px: browser bookmark bars and Windows taskbar pinning.
- 96x96 px: used by this tool's own live preview and by some desktop shortcut contexts.
- 180x180 px: the size Safari expects for an apple-touch-icon on iOS home screen shortcuts.
- 256x256 and 512x512 px: high resolution sources for PWA manifest icons and app store style assets.
SVG versus PNG favicons
Modern browsers accept an SVG favicon declared with link rel=icon type=image/svg+xml, which this tool's copy HTML button produces as an inline data URI needing no separate file. SVG scales perfectly at any size and stays sharp on high density displays. However, Safari's apple-touch-icon and some older browser and crawler contexts still expect a PNG specifically, which is why this tool also offers PNG downloads from 32 up to 512 pixels rather than SVG alone.
Common favicon mistakes
Most favicon problems are not rendering bugs, they are missing files or stale caches.
- Shipping only a 16px icon and nothing larger, so iOS home screen shortcuts and Android icons fall back to a generic screenshot.
- Putting three or more characters into a small icon, which becomes illegible once shrunk to 16 pixels; this tool caps and auto-shrinks the font for exactly this reason.
- Forgetting a separate apple-touch-icon link tag; Safari does not automatically reuse the standard favicon link for home screen icons.
- Not cache-busting after a favicon change; browsers cache favicons aggressively, so a hard refresh or a versioned filename is often needed to see an update.
- Choosing near-identical background and text colors, which looks fine at 256px but disappears at 16px; check the small previews before finalizing.
Frequently asked questions
What can I use as the favicon content?
Letters, a short abbreviation, or a single emoji, combined with a custom background color, text color and shape choice of square, rounded or circle.
What size should a favicon be?
There is no single size; browsers use 16 and 32 pixels for tabs and bookmarks, Safari expects 180 pixels for apple-touch-icon, and PWA manifests want 192 or 512 pixels. This tool offers 32, 64, 180, 256 and 512 pixel PNG downloads plus a full-resolution SVG to cover all of them.
Can I use an emoji as a favicon?
Yes, paste a single emoji into the text field instead of letters, and the canvas renders it the same way, scaled to fill the icon shape.
Does this tool generate a .ico file?
No, it exports PNG and SVG only. Most modern browsers accept a PNG or SVG favicon directly via a link tag, so a .ico wrapper is rarely required; if your platform specifically needs one, convert the downloaded PNG using any image tool that supports ICO export.
Why isn't my new favicon showing up after I changed it?
Browsers cache favicons aggressively, often longer than regular page assets. Do a hard refresh, clear the site's cached data, or add a version query string to the file's URL to force browsers to fetch the new one.
Do I really need multiple favicon sizes, or is one enough?
One PNG technically works in most modern browsers since they can scale it, but for crisp results on mobile home screens and app icons, provide at least a 32px, a 180px apple-touch-icon and a larger 512px source.
Is an SVG favicon supported everywhere?
All current major desktop and mobile browsers support SVG favicons. If you need to support very old browsers or specific crawler tools, keep a PNG fallback alongside it, which this tool also generates.
How do I make an apple-touch-icon specifically?
Download the PNG at 180 pixels and reference it with a separate link rel=apple-touch-icon href tag in your page head; Safari on iOS does not fall back to the standard favicon link for home screen icons.
What does the copy HTML button actually give me?
A single link rel=icon tag with the SVG embedded directly as a data URI, so the favicon works without hosting a separate image file at all, useful for quick prototypes and static pages.
Is my design or logo data uploaded anywhere?
No. The icon is drawn on an HTML canvas inside your browser tab, and the PNG, SVG and HTML tag are all generated locally with nothing sent to a server.