The favicon is the tiny icon that appears in browser tabs, bookmarks, and on mobile home screens when someone saves your site. Sites without favicons look unfinished. Here's how to make one in minutes — for free.
What sizes does a favicon need to be?
Modern browsers and devices request favicons at different sizes. You need at least: 16×16 px (browser tab), 32×32 px (taskbar shortcut), 48×48 px (Windows desktop shortcuts), 180×180 px (Apple Touch Icon for iOS), and 192×192 px (Android home screen). Providing all sizes ensures sharpness on every platform.
How to generate a favicon
- Start with a square image — a logo mark, icon, or single letter. Avoid full text at small sizes.
- Open the Favicon Generator below
- Upload your image
- Choose background (transparent, white, or black)
- Download individual PNG files at each size
Favicon Generator
Generate favicons at 16, 32, 48, 64, 128, and 256px from any image — free
Add the favicon to your website
Place the favicon files in your root directory and add these tags inside your HTML <head>:
- <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
- <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
- <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Design tips for a good favicon
- Use a single recognizable symbol — avoid full logos with text
- High contrast colors work better at tiny sizes
- Test at 16×16 — squint at your preview
- Avoid thin lines or small details that disappear when scaled down
- Check how it looks on both light and dark browser themes
Frequently Asked Questions
What image format should I use for a favicon?
PNG works across all modern browsers. The old .ico format is still used but PNG is simpler and widely supported.
My favicon isn't showing up — why?
Browsers aggressively cache favicons. Clear your browser cache (Ctrl+Shift+R or Cmd+Shift+R) after updating. You may need to wait a few minutes after deploying.
Do I need an .ico file?
Not for modern browsers. PNG favicons work in all current browsers. .ico is mainly needed for Internet Explorer support, which is increasingly irrelevant.