A favicon is the small icon displayed in browser tabs, bookmarks, browser history, and search results next to your website's name. It is typically 16×16 or 32×32 pixels. The file is named favicon.ico and placed in the root directory of a website.

What sizes does a favicon need to be?

Modern browsers need several sizes: favicon.ico (16×16 and 32×32), apple-touch-icon.png (180×180) for iOS, and various Android/PWA icons (192×192, 512×512). This generator produces PNG and ICO files ready for web use.

How do I add a favicon to my website?

Upload favicon.ico to your website root and add this to your HTML head: . For better browser support, also add .

Is this favicon generator free?

Yes. Completely free with no account required.

Favicon Generator

Create a custom favicon from text or initials. Choose background color, foreground color and shape — download as PNG or ICO.

Text / Initials

Background

Text Color

Shape

Size: 64px

Preview (64×64)

Related Tools

View all tools

Image Pencil Effect

Use our free image pencil effect tool online.

Color Picker

Use our free color picker tool online.

Website Screenshot Generator

Use our free website screenshot generator tool online.

Free Favicon Generator — Create a Custom Favicon in Seconds

A favicon is one of the smallest but most visible elements of your brand online. That tiny icon in the browser tab is what users look for when they have multiple tabs open. A professional favicon makes your site look polished and trustworthy — and a missing or default favicon undermines your credibility. This free Favicon Generator creates a custom favicon from text or initials, with full control over background color, foreground color, shape, and font style. Download as PNG or ICO.

Enter your text (1–3 characters work best — initials, abbreviations, or symbols), choose your background and text colors, select a shape (square, rounded, or circle), and download your favicon. The generator produces multiple sizes in a single download including the 16×16 and 32×32 pixel versions required by browsers, plus larger sizes for iOS and Android home screen icons.

For a more sophisticated favicon, upload your own logo image and the generator will crop and resize it to the correct favicon dimensions. The tool supports PNG, JPG, and SVG uploads and outputs both ICO (multi-resolution) and PNG formats.

Favicon Implementation

Basic HTML. Add to your HTML head section: <link rel="icon" type="image/x-icon" href="/favicon.ico">. This covers all major browsers.

Apple touch icon. Add <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> for iOS home screen icons when users add your site to their device.

PWA manifest. Include icon entries in your web app manifest.json for Android home screen and PWA installation icons (192×192 and 512×512 minimum).

Next.js / React. Place favicon.ico in the /public directory and optionally in the /app directory for automatic Next.js metadata handling. Use the metadata API to declare all icon sizes.

Related Tools

Color Picker – Pick the perfect brand colors for your favicon.
Image Optimizer – Optimize PNG favicon files for smaller size.

Frequently Asked Questions

What is a favicon?

Small icon shown in browser tabs, bookmarks, and history next to your site name.

What sizes are needed?

16×16 and 32×32 for browsers, 180×180 for iOS, 192×192 and 512×512 for Android/PWA.

How to add it to a site?

Upload to root and add <link rel='icon' href='/favicon.ico'> to your HTML head.

Is this free?

Yes. Completely free, no account needed.