A Favicon Without the Faff
The favicon is the tiny image that appears next to a page title in browser tabs, bookmarks, and search results. For something so small it has outsized importance — a missing or default favicon makes a site look unfinished, while a clear distinctive icon makes a site feel polished even before any content is read. The traditional way to make one involves Photoshop, ICO converters, and a tutorial on what sizes you need. This generator does it from text or an emoji in your browser. Type a letter, pick colors, see all sizes at once, download.
What Makes a Good Favicon
The most important constraint is size. The browser tab favicon is rendered at 16×16 pixels. That's small enough that anything more complex than a single letter or simple shape becomes a smear of indistinguishable pixels. The most recognizable favicons in the world — Google's G, Facebook's f, GitHub's cat, Twitter/X's X — are all single letters or single distinctive shapes for exactly this reason. Resist the temptation to shrink your full logo down. Pick the most distinctive single element and use that.
Color Choice
High contrast between background and foreground is what makes a favicon readable at 16 pixels. White on a saturated color (the standard "letter on a colored square" approach) works almost universally. Subtle gradients and pastel tones tend to disappear into the browser chrome. Colors that work well in light browser themes can be invisible in dark themes, so test both. The transparent shape option lets you skip the background entirely — useful if your icon is already a recognizable shape on its own (like a logo or a single emoji).
Sizes You Actually Need
Modern browsers and operating systems use a few standard sizes. 16×16 is the browser tab. 32×32 is the higher-resolution browser favicon used on retina displays and in some browser bookmark menus. 180×180 is the size iOS uses when someone adds a site to their home screen. 192×192 and 512×512 are used by Android via the web manifest. The four sizes provided here cover the common cases — 16, 32, 64, and 180. The 64 is a useful middle ground for some browser UIs.
PNG vs ICO
Older versions of Internet Explorer required the favicon to be in the ICO format and named exactly favicon.ico at the site root. Modern browsers (every version of Chrome, Firefox, Safari, Edge currently in use) support PNG favicons declared via link tags in the page head. Using PNG gives you transparency support, smaller file sizes for simple images, and no need for an ICO converter. The HTML snippet shown above the generator is the modern recommended pattern: declare PNGs at specific sizes with link tags. You can keep a fallback /favicon.ico for very old crawlers if you want, but it is not required.
Emoji as Favicon
Emoji make excellent favicons because they are designed to be readable at small sizes and they bring instant recognizability. A book emoji on a reading site, a wrench on a tools site, a fork-and-knife on a recipe site — the icon communicates the topic in one glance. Just paste an emoji into the text field and pick a transparent background or a contrasting color. The render uses your operating system's native emoji rendering, which means the look matches what users see elsewhere in the browser.
Installing on Your Site
Save the downloaded PNGs into the root of your site (or a subfolder like /icons/). Add the link tags shown above to the head section of every page. Modern frameworks (Next.js, Nuxt, Astro, etc.) usually have a designated public folder for static files and automatic head injection. After uploading, force-refresh the browser tab — favicons cache aggressively and the old icon will sometimes persist for a few minutes even after the new one is in place. To force a refresh for visitors, append a version query string like ?v=2 to the icon URLs in your link tags.
Frequently Asked Questions
Does this work for emoji?
Yes. Paste any emoji into the text field. The rendered favicon uses your operating system's native emoji glyphs, so the result looks consistent with how emoji appear elsewhere on your computer.
Can I upload my own image to convert?
This tool only generates from text or emoji. For an existing image, the standard workflow is to use any image editor to resize the original to the four standard sizes (16, 32, 64, 180), exporting each as PNG.
Why does my favicon look blurry at small sizes?
Blurriness at 16×16 usually means the source image has too much detail. Simplify the icon to one or two strong shapes, increase the contrast, and try again. Single letters and bold geometric shapes consistently look the sharpest.
This generator runs entirely in your browser. The text and colors you enter never leave the page. Save the downloaded PNGs and you have everything you need to install a favicon on any site.
Try also: Color Palette Generator · Social Preview Generator