Adding a favicon helps make your site more recognizable in browser tabs and bookmarks. Here's how to add one effectively:

What is a Favicon?

A favicon (bookmark icon) is a small square image that appears next to your page title in browser tabs and sometimes in search results. It helps users quickly identify your site among multiple open tabs.

How to Add a Favicon:

1. Open the Bookmark Icon panel
2. Upload your image by either:
   • Dragging and dropping the file
   • Clicking to browse your computer
3. (Optional) Add a dark mode version of your icon
4. Click Save
5. Clear your browser cache if the icon doesn't update immediately

Image Requirements:

• Size: 100px × 100px to 300px × 300px (displays at 16px × 16px)
• Format: PNG file (ICO files not supported)
• File size: Maximum 100 KB
• For Google search results: Use dimensions in multiples of 48px (48x48px, 96x96px, 144x144px)

Display Variations:

• Desktop browsers: Shows in tabs and address bars
• Mobile browsers: Generally not displayed
• Search results: May appear next to your site listing
• Safari: Visible in address bar and multiple tabs

Best Practices:

• Use a simple, recognizable design
• Ensure good visibility at small sizes
• Test across different browsers
• Upload only one version of the favicon
• Consider creating a dark mode variant for better visibility

Note: Some browsers may cache favicon images, so changes might not appear immediately without clearing the browser cache.

Related Articles

Previous Articles