The favicon is the tiny icon that appears in browser tabs, bookmarks, history and search results on mobile. A good one makes your site look trustworthy and helps people find your tab among many. Here is how to make one properly.
What size should a favicon be?
Modern sites need a few versions:
| File | Size | Used for |
|---|---|---|
| favicon.ico | 16, 32 and 48 px in one file | Browsers and legacy support |
| favicon-32×32.png | 32 x 32 | Standard tabs |
| favicon-16×16.png | 16 x 16 | Small tabs |
| apple-touch-icon.png | 180 x 180 | iPhone home screen |
| android-chrome-192×192.png | 192 x 192 | Android home screen |
| android-chrome-512×512.png | 512 x 512 | App install icon |
Design tips
- Keep it simple. At 16 pixels, detail disappears. Use a bold letter or a simplified logo mark.
- Use a square canvas. Start at 512 x 512 pixels or larger.
- High contrast. Make sure it is visible on both light and dark browser themes.
- Transparent background works well, but a solid background can read better on dark tabs.
Create it in two minutes
- Open the Favicon Generator.
- Drop in your logo (PNG, JPG, WebP or SVG). If it is not square, choose Crop to square or Fit inside.
- Pick a shape: square, rounded corners or circle.
- Tick the sizes for the ICO file (16, 32 and 48 are the usual set).
- Press Download full favicon package. You get every size, a web manifest and a README with the HTML.
If you only need an ICO, use PNG to ICO.
Add it to your website
Upload the files to your site root and add this inside the head of your pages:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<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="manifest" href="/site.webmanifest">
<link rel="shortcut icon" href="/favicon.ico">Add a favicon in WordPress
- Go to Appearance, Customize, Site Identity.
- Under Site Icon, upload a square image of at least 512 x 512 pixels.
- Publish. WordPress creates the other sizes for you.
Can I use an SVG favicon?
Yes. Modern browsers support SVG favicons with a line like <link rel="icon" type="image/svg+xml" href="/favicon.svg">. Keep an ICO or PNG as a fallback for older browsers. You can optimize SVGs with the SVG Compressor.
Why is my favicon not showing?
- Browsers cache favicons aggressively. Clear the cache or open the site in a private window.
- Check the file path in your HTML.
- Search engines can take days or weeks to update the icon they show.
- Make sure the file is at least 48 x 48 pixels for Google search results.
Quick checklist
- Square source image, 512 px or larger
- Simple, high-contrast design
- ICO plus PNG sizes
- Correct link tags
- Test in a private window
Which files do you actually need?
A minimal modern setup covers browsers, phones and bookmarks:
- favicon.ico with 16, 32 and 48 px sizes for older browsers and the default
/favicon.icorequest - icon.svg for modern browsers that support vector icons
- apple-touch-icon.png at 180 x 180 px for iPhone and iPad home screens
- 192 and 512 px PNGs for Android and installable web apps
Design tips
- Keep it simple. At 16 px, only a bold shape or one or two letters survive.
- Use strong contrast against both light and dark browser tabs.
- Avoid thin lines and small text.
- Test on a white tab and a dark tab.
- Start from a square image, ideally 512 x 512 or larger.
Add it to your site
Place the files in your site root and add links in the head:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">On WordPress, you can also set a Site Icon under Appearance, Customize, Site Identity.
Make the files
The favicon generator produces every size from one image. If you only need an icon file, use PNG to ICO. Need a clean square first? Resize your image, or turn an SVG logo into PNG with SVG to PNG.
Favicons are cached hard by browsers, so if an old one keeps showing, clear the cache or open the site in a private window.
Frequently asked questions
What size should a favicon be?
Start with a square image of at least 512 x 512 pixels. Generate ICO files with 16, 32 and 48 pixel versions plus PNG icons of 180, 192 and 512 pixels.
Is ICO still needed?
Many browsers use PNG or SVG icons today, but favicon.ico remains the safest fallback and is still requested automatically by many tools.
Why is my favicon not updating?
Browsers cache favicons for a long time. Clear the cache, test in a private window and be patient, since search results can take days to refresh.
Can I use my logo as a favicon?
Yes, but simplify it. Fine detail and long text disappear at 16 pixels, so use an icon or a single letter.
