Favicon Generator

📖 Tool Introduction

A small tool for building site icons, with no design software to install and no size charts to memorise. A live preview canvas sits in the middle: change anything on the left and it redraws immediately, so what you see is what you get. Both text and emoji content modes are supported, and transparent backgrounds and corner rounding are adjustable.

A dozen or so open-source fonts are available for Chinese and Latin text, weights run in nine steps from 200 to 900, and you can layer italic, underline, double underline, strikethrough, outline, glow, case transforms and letter spacing on top. The background colour follows your site theme by default, and the text colour flips between dark and light based on background luminance so it stays readable under any palette.

Export can bundle several sizes at once, anywhere from 16 by 16 up to 512 by 512, in PNG, ICO, WebP or SVG. The ICO output packs multiple sizes into a genuine multi-resolution icon file, while SVG stays vector and never blurs when scaled.

The two mistakes people hit most often are size and background. A browser tab gives you sixteen pixels square, so three characters crammed in there turn into mush, and a favicon with a white background looks jarring against a dark browser toolbar. That is why the default background here follows your site theme colour and the text colour flips between dark and light based on luminance, which removes that particular round of trial and error.

Do not skip the finishing steps once it is generated. Put favicon.ico in your site root, since most browsers look for it there automatically, and add a link tag for the PNG version in your page head so mobile devices saving the site to a home screen pick up the sharper image. If a browser keeps showing the old icon after you swap it, clearing the cache brings the new one through.

The corner radius control deserves its own mention. The same icon renders as a square at zero radius, becomes a full circle at fifty percent, and lands somewhere in between as the rounded rectangle most sites use. Different platforms treat icon shapes differently: iOS tends to apply its own rounded mask to square icons while Android more often shows circles, so a middle value usually looks acceptable on both without fighting the system.

✨ Key Features

• Two content modes for text and emoji, with size, weight, spacing and offset all adjustable independently for text
• A dozen-plus open-source fonts, nine weight steps, plus italic, underline, double underline and strikethrough toggles
• Outline, shadow and glow effects that stack, for icons with some depth
• One-click case conversion and wide or narrow letter spacing, saving manual fiddling
• Background follows the site theme colour and text colour auto-selects dark or light from background luminance, resyncing when the theme changes
• Multiple sizes exported at once in PNG, ICO, WebP and SVG, with ICO supporting multi-resolution packing

🚀 How to Use

1. In text mode enter a brand initial or short abbreviation, or switch to emoji mode and pick a graphic
2. Choose a font and weight, and switch on outline, glow or other effects if you want them
3. Set the background colour and corner radius, or tick transparent background for an icon with no fill
4. Tick the sizes you need and pick an export format
5. Press export to download, then drop the files in your site root and add the matching link tags

⚠️ Things to Note

• Fonts load over the network: Font files come from an online font service. Offline the tool falls back to system fonts, so preview and export will look different
• Detail is lost at small sizes: At 16 by 16, complex lettering and thin outlines turn to mush, so keep tiny icons to one or two characters
• SVG carries no bitmap: SVG export is pure vector, so effects rendered through bitmap fonts may look different on another machine
• Check browser support: WebP support is limited on older browsers, so choose PNG or ICO when maximum compatibility matters
• ICO size has a ceiling: Ticking too many sizes inflates the ICO file. The 16, 32 and 48 set is usually enough