← Back to tools

Favicon Generator

Upload an image, get all favicon sizes + the HTML tags. Everything runs locally.

Choose an image or drag & drop
PNG, JPG, SVG — square works best

A favicon (short for "favorite icon") is the small icon shown in browser tabs, bookmarks, and search results. Modern browsers and devices require multiple sizes: 16×16 for browser tabs, 32×32 for taskbars, 180×180 for Apple touch icons, and 192×192 / 512×512 for Android home screens and PWA manifests.

The traditional .ico format bundles multiple sizes in one file, but modern best practice is to use PNG files at each size with the appropriate <link> tags. SVG favicons are also supported in modern browsers via <link rel="icon" type="image/svg+xml"> and scale perfectly to any size.

For the best result, start with a square image at least 512×512 pixels. Simple, high-contrast designs work best since the icon will often be displayed at just 16×16 pixels. Avoid fine text or detailed illustrations — they become illegible at small sizes. This tool generates all common sizes from a single upload and gives you the HTML to paste into your <head>.

This tool in other languages:

Français:
Générateur de favicon

Español:
Generador de favicon

Deutsch:
Favicon-Generator

Português:
Gerador de favicon

日本語:
ファビコンジェネレーター

中文:
网站图标生成器

한국어:
파비콘 생성기

العربية:
مولد أيقونة الموقع

Frequently asked questions

How do I generate a favicon from an image?

Upload your source image (ideally a square PNG, 512×512 or larger). The tool generates favicons in every size needed (16, 32, 48, 180, 192, 512 pixels) plus the HTML meta tags to drop into your <head>. Everything runs in your browser.

What favicon sizes do I actually need in 2026?

Essentials: 16×16 and 32×32 (browser tabs), 180×180 (Apple touch icon for iOS), 192×192 and 512×512 (Android Chrome, PWA). Older formats like favicon.ico are still recommended for IE/Edge legacy support but matter less each year.

Where do I put the favicon HTML tags?

Inside your <head>, ideally near the top. The generator outputs ready-to-paste <link rel="icon"> and <link rel="apple-touch-icon"> tags — just paste them in. The favicon images themselves go at your site root (/favicon-32.png, etc.).

Why is my favicon not showing up?

Most common causes: browser cache (hard-refresh with Ctrl+Shift+R), wrong file path in the <link> tag, or the image isn't square (browsers may skip it). Also check your server returns the correct MIME type (image/png for PNG favicons).

Can I use a transparent or dark-mode-aware favicon?

Transparent PNG favicons work everywhere — browsers render them against the tab background, which adapts to dark/light mode. For fully dynamic favicons that change based on system preference, you need a <link rel="icon" media="(prefers-color-scheme: dark)"> tag with a separate dark-mode icon.