What is a favicon?
A favicon (short for "favourite icon") is the small square icon that appears in the browser tab next to your website's title. It also shows in bookmarks, browser history, and when a user saves your site to their mobile home screen.
Without a favicon, browsers show a generic blank page icon — a clear signal that a site is unpolished. Adding a favicon takes 5 minutes and makes an immediate visual improvement to how your site appears everywhere.
Favicon sizes and formats
| Use | Size | Format |
|---|---|---|
| Browser tab (classic) | 16×16 px | ICO or PNG |
| Browser tab (modern) | 32×32 px | ICO or PNG |
| Taskbar / pinned site | 48×48 px | ICO |
| Apple touch icon (iPhone home screen) | 180×180 px | PNG |
| Android home screen | 192×192 px | PNG |
| Windows tile | 270×270 px | PNG |
The ICO format can embed multiple sizes in a single file — that's one reason it's the traditional standard. For most websites in 2025, a 256×256 ICO file plus a 180×180 PNG apple-touch-icon covers everything.
How to create a favicon from your logo — step by step
- Start with a square version of your logo. Favicons are square. If your logo is horizontal (wide), create a square variant — typically just the symbol/mark part without the text, since text becomes unreadable at 16×16 pixels.
- Go to ImgSlim.com and click "Convert Format". Drop your logo PNG file into the tool.
- Select "ICO (.ico) — favicon" from the "Convert TO" dropdown. A tip will appear reminding you that square images work best.
-
Click "Convert Images" and download your .ico file. Rename it to
favicon.ico. -
Upload favicon.ico to the root of your website. This means it should be accessible at
https://yoursite.com/favicon.ico. Most browsers check this path automatically without any HTML code needed. -
Add the HTML link tag (optional but recommended — ensures faster detection):
<link rel="icon" type="image/x-icon" href="/favicon.ico">
For a PNG logo with a transparent background, the ICO file will preserve that transparency. This looks great on browsers with dark themes. Make sure your logo mark is visible on both light and dark backgrounds.
Adding your favicon to different platforms
Plain HTML website
Add this inside the <head> of every page (or your header template):
WordPress
Go to Appearance → Customize → Site Identity → Site Icon. Upload your square logo image (at least 512×512 px). WordPress will automatically resize it for all favicon sizes. No code required.
Shopify
Go to Online Store → Preferences → Favicon image. Upload a square image of at least 32×32 pixels. Shopify handles the rest.
Wix
Go to Settings → Business Info → Favicon. Upload a square image.
Netlify / GitHub Pages (static site)
Place favicon.ico in the root of your site folder (the same folder as your index.html). Netlify deploys it automatically and it will be accessible at the root URL.
Why favicons disappear after changes (cache issue)
If you update your favicon and it still shows the old one, that's a browser cache issue. Browsers cache favicons aggressively. To force-refresh:
- Hard refresh: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
- Or open your site in a private/incognito tab
- Or clear browser cache in Settings
Favicon not showing at all? Check that the file is named exactly favicon.ico (lowercase), it's in the website root directory, and the server is not blocking .ico files (rare, but some server configurations do this). Check the Network tab in browser DevTools to see if the favicon request returns a 200 or 404.
Create your favicon for free
Convert your logo PNG to an ICO favicon in seconds — directly in your browser. No upload, no sign-up.
Convert PNG to ICO →