⚠️ Disclaimer: This guide is for informational purposes only.
Implementation may vary depending on your platform, CMS, or hosting setup.
Always test your favicon across different browsers and devices.
What is a Favicon?
A favicon (short for "favorite icon") is the small image displayed in browser tabs,
bookmarks, history, and on mobile home screens when users save your website.
It helps with brand recognition and makes your site easier to find among open tabs.
Formats & Sizes
| File |
Size |
Used For |
favicon.ico |
16x16, 32x32, 48x48 |
Legacy browsers, Windows shortcuts |
favicon-32x32.png |
32x32 |
Modern browsers, standard tabs |
apple-touch-icon.png |
180x180 |
iOS home screen, Safari |
android-chrome-192x192.png |
192x192 |
Android home screen, PWA |
android-chrome-512x512.png |
512x512 |
Android splash screen, PWA |
How to Add to Your Website
Place the favicon files in your website's root directory, then add these lines to your HTML <head> section:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Tips for Best Results
- Keep it simple — Your icon needs to be recognizable at 16x16 pixels
- Use transparent backgrounds — Works better across different browser themes
- Test thoroughly — Clear your browser cache (Ctrl+Shift+R) to see changes
- Place in root — Some browsers automatically look for
/favicon.ico
Common Issues
- Favicon not showing? — Clear browser cache or try incognito mode
- Wrong icon on mobile? — Make sure apple-touch-icon.png is included
- Blurry icon? — Use a simpler design with less detail
Favicon Generator
Other Tab