Mello
Design

Favicon Generator

Upload an image to get favicons at standard sizes.

Runs in your browserNo account requiredNo uploadFree
Loading tool…

About Favicon Generator

Favicon Generator produces the set of favicon PNGs a modern website needs from a single source picture. Drop in a square image (PNG, JPG, or SVG) and the generator renders it at seven sizes — 16×16 and 32×32 for the classic browser tab, 48×48 and 64×64 for legacy and Windows contexts, 128×128, 192×192 and 512×512 for high-DPI displays and Android home-screen icons via the web app manifest.

Worked example: upload a 1024×1024 logo and the generator outputs PNGs at every common size (16, 32, 48, 64, 128, 180, 192, 512) plus a ready-to-use site.webmanifest, bundled as a single ZIP you can drop into your site root. The generated HTML snippet wires up the icons in <head>: 16/32 PNGs for desktop browsers, the 180 PNG as the Apple touch icon, and the manifest for Android (which references the 192 and 512 PNGs). Modern browsers pick the right size automatically based on context.

A few practical notes. Browsers expect square favicons; non-square uploads are stretched into the target square (drawImage scales rather than letterboxing here), so start with a square source for the cleanest result. Heavy detail on a logo gets lost at 16×16 — if the favicon needs to be recognizable at tab size, simplify the design before generating (a logo mark is usually clearer than the full logotype). The .ico format is not generated here — it is no longer needed by modern browsers, though some servers still expect /favicon.ico as a fallback location, for which the 32×32 PNG works.

All rendering happens in your browser via canvas. Your image is never uploaded — useful when you are working on an unannounced brand identity.

Frequently asked questions

In your site root, and reference them with <link rel='icon'> tags in your <head>. The 192 and 512 PNGs also belong in your web app manifest.

More design tools

Color Converter (HEX, RGB, HSL)
Convert colors between HEX, RGB, and HSL with a live preview.
Design
CSS Gradient Generator
Build CSS linear and radial gradients with a live preview.
Design
Color Palette Generator
Generate complementary, analogous, and triadic palettes from any base color.
Design
WCAG Contrast Checker
Check whether text and background pass WCAG AA and AAA contrast ratios.
Design
CSS Box Shadow Generator
Design a box-shadow visually and grab the CSS.
Design
CSS Border Radius Generator
Round corners visually — per-corner and elliptical — and copy the CSS.
Design