Text to favicon
No logo, or a logo that dies at sixteen pixels? A bold initial on a solid colour is what half the web’s tabs use, and it takes a minute to make.
Guide
How to use it
- Type one or two letters, or a single emoji.
- Pick a style: slab serif has presence, sans is neutral, monospace reads technical.
- Set ink and background colours, contrast is everything at tab size.
- Choose corners, generate, download the four sizes and paste the HTML into your <head>.
Examples
Letter-marks that work
A single bold initial on a saturated background is the classic. It reads at 16 pixels, matches any header, and nobody mistakes whose tab it is.
Initials like "WC" fit at a smaller type size, they work at 32 pixels and above but soften at 16. If the tab icon is the priority, one letter wins.
An emoji favicon is legitimate and fast, a wrench for a tools site, a leaf for a garden blog. It inherits your platform’s emoji style, so check it on more than one device.
Method
How it works
The glyph renders centred on each canvas size with the font sized to fill, single characters draw at about two thirds of the icon height, pairs slightly smaller. Corners clip before drawing, and each size is rendered independently rather than scaled from one master.
Colour advice baked into the defaults: light ink on a dark, saturated background survives both light and dark browser themes, the reverse tends to vanish on dark tabs.
FAQ
Frequently asked questions
One letter or two?
One for maximum legibility at 16 pixels, two if the name genuinely needs both and you care most about bookmark-bar sizes.
Which font style should I pick?
The one closest to your site’s headings. Slab serif matches this site, for instance. At icon sizes the family matters less than the weight, everything renders bold.
Can I use any emoji?
Any single emoji your device renders. It will look subtly different across platforms because each has its own emoji artwork.
What colours pass on dark browser themes?
A solid mid-to-dark background with light ink works on both. Pure white backgrounds glow oddly in dark tab bars.
Can I use this as a placeholder before a real logo?
That is its natural job, and a decent letter-mark often outlives the plan to replace it.
Is anything sent to a server?
No, the icons are drawn and downloaded entirely in your browser.
More tools