How do I make a favicon for free?

Enter your text in a browser-based favicon generator, choose a font and color, and download the package — no signup or payment needed.

How do I add a favicon to HTML?

Put the files in your site root and add a link tag pointing to /favicon.ico, plus the apple-touch and SVG links, inside your document head.

How do I make a favicon from text?

Type one or two characters, pick a font, text color, and background, and the generator renders them into every required favicon size.

Where do I put the favicon file?

In your website root directory, so browsers can find /favicon.ico automatically.

Why is my favicon not showing?

Browsers cache favicons aggressively — hard-refresh the page or open it in a private window after deploying.

How to Make a Favicon

You can make a favicon in three steps: choose your icon, generate the package, and add it to your site. The whole thing takes a couple of minutes and runs in your browser — no signup, no payment, and your files never leave your computer.

Step 1 — Choose your favicon

Start with what your icon should show. The simplest, sharpest option is a letter or two of text — your initials or the first letter of your brand — with a font, color, and background you pick. Text favicons stay crisp even at 16×16, where detailed images turn to mush. Prefer to use a logo? Our image to favicon converter resizes a PNG, JPG, WebP, or SVG into every size for you.

Step 2 — Generate the favicon package

Once your icon looks right, generate the package. A good generator gives you everything a modern site needs in one download:

favicon.ico (with 16×16, 32×32, and 48×48 inside)
favicon-16x16.png and favicon-32x32.png
apple-touch-icon.png (180×180) for iOS
android-chrome-192x192.png and android-chrome-512x512.png
site.webmanifest for Android and PWA support
an install.html and the exact link tags to copy

With our favicon generator this all happens in your browser using the Canvas API, and the ZIP downloads directly — nothing is uploaded to a server.

Step 3 — Add it to your website

Unzip the package into your website’s root folder, so the files sit next to your homepage and browsers can find /favicon.ico automatically. Then paste these tags into the <head> of your HTML:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

That’s it — reload your site and the favicon appears in the tab.

How to add a favicon in Next.js, Vite, or WordPress

The files are the same everywhere; only where they go changes:

Next.js (App Router) — drop favicon.ico, icon.svg, and apple-icon.png into the app/ directory, or place the package in public/ and add the links in your root layout metadata.
Vite — put the files in the public/ folder and add the link tags to index.html.
WordPress — use Appearance → Customize → Site Identity → Site Icon to upload a 512×512 image, or add the link tags via your theme header.

Our generated package includes a stack-specific install guide so you can copy the right snippet for your framework.

Make your favicon now

You don’t need design software. Type your text, pick a color, and download the complete package — free, in your browser.

Make your favicon now →

Learn more

Frequently asked questions

How do I make a favicon for free?: Enter your text in a browser-based favicon generator, choose a font and color, and download the package — no signup or payment needed.
How do I add a favicon to HTML?: Put the files in your site root and add a link tag pointing to /favicon.ico, plus the apple-touch and SVG links, inside your document head.
How do I make a favicon from text?: Type one or two characters, pick a font, text color, and background, and the generator renders them into every required favicon size.
Where do I put the favicon file?: In your website root directory, so browsers can find /favicon.ico automatically.
Why is my favicon not showing?: Browsers cache favicons aggressively — hard-refresh the page or open it in a private window after deploying.