A favicon is a small icon that represents a website in browser tabs, bookmarks, and favorites lists. It’s the tiny image you see next to a website’s name.
Where You’ll See Favicons
- Browser tabs
- Bookmark lists
- Mobile home screens
- Browser history
- Search results
Technical Details
All these files must be created for proper display across different device types:
android-chrome-192x192.png
android-chrome-512x512.png
apple-touch-icon.png
favicon-16x16.png
favicon-32x32.png
favicon.ico
site.webmanifest
You can generate them using the service https://favicon.io/.
Next, insert the following code into the <head> section of all website 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">
Verify the setup using the service https://realfavicongenerator.net/favicon_checker.
Why Favicons Matter
They help with:
- Brand recognition
- Navigation between tabs
- Finding bookmarked sites
- Site professionalism
- Mobile app icons
Tips for Good Favicons
- Keep design simple
- Use brand colors
- Make it readable at small sizes
- Test on dark/light backgrounds
- Create multiple sizes for different devices
A favicon may seem small, but it plays a key role in making your website recognizable and professional across different platforms and devices.