How to Add a Custom Favicon: Browser Icon Guide for Your Website
Adding a favicon helps distinguish your website in browser tabs and bookmarks. While all websites start with a default favicon, customizing it improves brand recognition.
How to Add a Favicon:
- Open the Favicon panel
- Upload your image by dragging or selecting from your computer
- Optionally add a dark mode version
- Click Save
- Clear browser cache if the favicon doesn't update immediately
Display Behavior:
- Safari: Shows in address bar and multiple tabs
- Mobile browsers: Generally don't display favicons
- Search results: May show favicon next to site listing
Technical Requirements:
Image Resolution:
- Optimal size: 100px × 100px to 300px × 300px
- Minimum size: 16px × 16px
- For Google search results: Use multiples of 48px (48×48, 96×96, 144×144)
File Specifications:
- Recommended format: PNG
- Maximum file size: 100 KB
- Not supported: ICO files
- Single version only (multi-version favicons not supported)
Best Practices:
- Check search engine requirements for favicon display
- Ensure image meets platform-specific size requirements
- Use clear, recognizable imagery that represents your brand
- Test favicon appearance across different browsers
Remember to restart your browser after clearing cache for changes to take effect. Your favicon may take time to update in search results and bookmarks due to browser caching.