How to Create a Favicon From an Image (or a Letter) — Free Online Generator

Use a free favicon generator online to create a favicon from an image or a letter/emoji. Get all sizes (16, 32, 180, 192, 512), a multi-size favicon.ico, manifest, and HTML snippet — all in your browser.

A favicon is the tiny icon that sits in your browser tab, your bookmarks bar, your phone's home screen when someone saves your site, and increasingly in search results next to your domain. It is one of the smallest assets on a website and one of the most disproportionately important: a site without a favicon looks unfinished, while a crisp, recognizable favicon makes a brand feel polished from the very first pixel. The problem is that getting favicons right used to be needlessly painful — and that is exactly what a good favicon generator online fixes.

Why One Favicon Is Never Enough

In the early web you dropped a single favicon.ico in your root directory and you were done. Today, browsers, operating systems, and app launchers all want different sizes for different contexts. A 16×16 icon renders in the browser tab. A 32×32 is used for higher-density displays and the Windows taskbar. Apple devices want a 180×180 apple-touch-icon.png for the home screen. Android and progressive web apps reference 192×192 and 512×512 PNGs from a web manifest. Miss one and your icon looks blurry, pixelated, or simply absent in that context.

Producing all of these by hand in an image editor is tedious and error-prone. You have to resize each one, export it at the right pixel dimensions, name the files exactly right, and then write the HTML that links them all up. Our tool does the whole thing in one click, entirely in your browser.

Create a Favicon From an Image

The most common workflow is to create a favicon from an image — usually a logo or app icon. Drag a PNG, JPG, WebP, SVG, or GIF into the upload area. The tool draws your image onto a square canvas using a cover fit (so non-square images are centered and cropped rather than squashed) and then resizes it down to every size in the standard set. Because favicons are displayed so small, a clean, high-contrast, ideally square source image gives the best results. Fine detail and small text tend to disappear at 16×16, so simpler marks read far better.

Or Generate a Favicon From a Letter or Emoji

Not everyone has a logo ready — and you do not need one. Switch to the letter/emoji mode, type a single character (a brand initial like "B", or an emoji like 🚀), pick a background color and a text color, and the tool renders a clean, centered glyph at every size. This is perfect for side projects, internal tools, documentation sites, and quick prototypes. You get a distinctive, on-brand favicon without opening a design app at all.

What You Actually Download

When you click download, the tool bundles a complete, production-ready package into a single ZIP file:

PNG icons at 16×16, 32×32, 48×48, 180×180 (the Apple touch icon), 192×192, and 512×512.
favicon.ico — a real multi-resolution ICO file containing both 16×16 and 32×32 images, encoded directly in your browser so legacy browsers and Windows still get a proper icon.
site.webmanifest — a ready-to-edit web app manifest that references the 192 and 512 PNGs for Android and PWA installs.
The HTML snippet — the exact <link> tags you paste into your <head>, also copyable directly from the tool with one click.

How to Add Favicons to Your Site

Adding favicons is a two-step process. First, unzip the downloaded files into the root or public directory of your site (the same place your index.html or framework public folder lives). Second, paste the generated link tags into the <head> of your HTML:

<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

If you are on Next.js, place the files in the public/directory and either add the tags to your root layout or rely on the framework's metadata API. On WordPress, most themes have a site icon setting that accepts a single square PNG — upload the 512×512 there. For static sites and frameworks like Astro, Vite, or plain HTML, the snippet above works as-is.

Everything Runs in Your Browser

Many favicon generators upload your logo to a server, process it remotely, and email or redirect you to a download. Ours never does. The entire pipeline — decoding your image, drawing it onto canvases, resizing, encoding the ICO and PNGs, and zipping the result — happens locally using the HTML canvas and the jszip library running in your tab. Your logo never leaves your device, there is no account to create, no watermark, and no upload limit. It is genuinely free and genuinely private.

Tips for Sharp Favicons

Start with a square source so nothing is cropped unexpectedly. Use bold shapes and high contrast so the icon stays legible at 16 pixels. Avoid thin lines and small text — they vanish at small sizes. If you are using the letter mode, a strong background color with white text reads cleanly in both light and dark browser themes. And always check your favicon in an actual browser tab after deploying, because nothing beats seeing it at real size.

Try It Now

Open the Favicon Generator, upload a logo or type a letter, and download your complete favicon set in seconds. While you are here, you might also like the Image Resizer, the Image Format Converter, and the Meta Tags Generator — all free, all private, all running entirely in your browser.