Design Tools
Color Picker
Pick a colour and read off its HEX, RGB and HSL values.
Design Tools
Favicon Generator
Turn an image or a letter into every icon size, plus a packed favicon.ico.
Tool Panel
Processed locallyAbout Favicon Generator
Generates eight sizes from 16 to 512 and packs 16/32/48 into a single favicon.ico. A letter or emoji works as the source, so no image is needed up front.
- 1
Eight sizes in one pass (16 / 32 / 48 / 64 / 128 / 180 / 192 / 512), with 16 / 32 / 48 **packed into a single `favicon.ico`** — those three serve old browsers, Windows shortcuts and bookmarks, and adding more only grows the file.
- 2
The source can be **text** (a letter or emoji with adjustable background and foreground) or an image; the text mode is for projects that do not have a logo yet.
- 3
The generated `<link>` snippet is the currently recommended set: `favicon.ico` for compatibility, a 32×32 PNG for modern browsers, 180×180 for the iOS home screen and `site.webmanifest` for Android/PWA.
- 1
Choose text or image mode
Type one character (letter or emoji) in text mode; in image mode a square source looks best.
- 2
Download favicon.ico and the PNGs
The ICO is one file; the PNGs download individually with their size in the name, ready for `public/`.
- 3
Paste the link block into <head>
Copy the whole block rather than only the .ico — iOS and Android read their icons from the other entries.
For compatibility: old browsers, Windows shortcuts, feed readers and some crawlers request `/favicon.ico` directly, and a PNG-only setup leaves them without an icon. One ICO containing 16/32/48 covers all of them for a few hundred bytes.
No — it renders PNGs from a bitmap or from text. A vector icon needs a source SVG, referenced with `<link rel="icon" type="image/svg+xml">`; if you already have that SVG you do not need this tool.
Related tools
View allDesign Tools
Contrast Checker
Check foreground and background contrast against accessibility thresholds.
Design Tools
Design Tools
Gradient Generator
Build CSS linear and radial gradients visually, then copy the code.
Design Tools
Design Tools
Box Shadow Generator
Tune a box shadow visually and copy the CSS.
Design Tools
Design Tools
Unit Converter
Convert physical units across length, weight, volume and more.
Design Tools
Design Tools
Bytes Converter
Convert between bytes, KB, MB, GB and TB.
Design Tools
Design Tools
Border Radius Generator
Tune each corner visually and copy the CSS border-radius.
Design Tools
Design Tools
Clip Path Generator
Drag the points to shape a polygon and copy the CSS clip-path.
Design Tools