Favicon Generator
Create a favicon from text or emoji. Pick the font, shape, and colors. Preview live and download PNG.
Letters, numbers, or an emoji like 🚀
What a favicon does
A favicon is the small icon shown in the browser tab next to your page title, in bookmarks, and in some search results. It's the smallest piece of visual branding your site has, but it appears in every session a user has with your site. A missing favicon shows a generic browser icon — a quiet signal that the site is unfinished.
Sizes that matter
- 16×16 — browser tab (classic)
- 32×32 — browser tab (retina)
- 48×48 — Windows site icon
- 180×180 — Apple touch icon (iOS home screen)
- 192×192 — Android home screen
- 512×512 — PWA splash screen
Most modern sites provide one 512×512 PNG and let the browser scale down. It looks fine at small sizes as long as the design is simple.
How to install
Add these lines to the <head> of your site:
<link rel="icon" href="/favicon.png"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><link rel="icon" type="image/svg+xml" href="/favicon.svg">(optional, modern)
Font and design rules that actually matter
- Simple shapes. One letter, one emoji, one symbol. Nothing more.
- High contrast. The icon needs to be readable at 16px. If it looks busy at 100px, it'll look like noise at 16px.
- Solid background. Transparent icons can disappear against dark browser themes.
- Consistent brand color. Use your primary brand color.
- Font choice. Sans-serif (Inter, Verdana) reads best at tiny sizes. Serif fonts can work for luxury brands but lose detail. Avoid thin weights — they vanish at 16px.
- No gradients or photos. They blur at small sizes.
Common mistakes
- Full logo squeezed into 32px. Unreadable.
- Multiple letters. Two is the maximum; three rarely works.
- Pale colors. Fails visibility on light or dark browser tabs.
- No favicon at all. Looks unfinished.
- Different favicon on different pages. Confusing.
- Thin serif fonts at 16px — letters become unreadable.
Related tools
Frequently asked questions
What size should a favicon be?
Provide at least 32×32 for browsers and 180×180 for Apple touch icon. Modern sites typically use a single SVG or a 512×512 PNG scaled down.
Where do I add the favicon to my site?
Add a link tag in the HTML head: <link rel="icon" href="/favicon.png"> and for Apple: <link rel="apple-touch-icon" href="/apple-touch-icon.png">.
Do I need a favicon.ico file?
Modern browsers accept PNG and SVG. The .ico format is legacy but still useful for older browsers. Most sites can skip it today.
Can I use an emoji as a favicon?
Yes. This tool renders emoji as the favicon graphic. It works on modern browsers and is often faster than designing a custom icon.
Which font is best for a favicon?
Sans-serif fonts (Inter, Verdana, Trebuchet) read best at 16px. Serif fonts can work for premium brands but lose detail. Avoid thin weights.
Tool runs entirely in your browser. No files are uploaded to any server. Download and host the PNG on your own site.