Favicons are small square images displayed next to your website title in browser tabs and search results. Here's everything you need to know about creating and implementing an effective favicon.

How to Add a Favicon:

1. Open the Favicon panel
2. Upload your image by dragging or selecting from your computer
3. Optionally add a dark mode version
4. Click Save
5. Clear browser cache and restart if not updating immediately

Technical Requirements:

• Size: 100px x 100px to 300px x 300px (displays at 16px x 16px)
• Format: PNG files only (ICO not supported)
• File size: Under 100KB
• For Google search results: Use 48px x 48px or multiples (96px, 144px)
• Must be single-version files only

Where Favicons Appear:

• Browser tabs
• Bookmarks
• Search results (varies by search engine)
• Safari address bar
• Note: May not display on mobile browsers

Best Practices:

• Use crisp, recognizable imagery
• Ensure good visibility at small sizes
• Consider designing both light and dark mode versions
• Follow search engine guidelines for maximum visibility
• Test across different browsers

Remember to choose an image that represents your brand effectively, as favicons help users quickly identify your site among multiple tabs or bookmarks.

Note: Browser caching may cause delays in favicon updates. If changes aren't visible immediately, clear your browser cache and restart.

Related Articles

Previous Articles