A favicon, also known as a browser icon, is a small square image displayed next to your page title in browser tabs and search results. Adding a custom favicon helps visitors quickly identify your site among multiple tabs and bookmarks.

How to Add a Favicon

1. Access the Favorite Icon panel
2. Upload your image by dragging it or selecting from your computer
3. Optionally add a dark mode version of your favicon
4. Click Save
5. Clear browser cache if changes don't appear immediately

Display Behavior

• Safari: Shows in address bar clicks and multiple tabs
• Mobile browsers: Usually doesn't display
• Search results: May appear next to your site listing

Technical Requirements

Image Resolution

• Recommended size: 100px × 100px to 300px × 300px
• Display size: 16px × 16px
• For Google search results: Use multiples of 48px (48x48, 96x96, 144x144)

File Specifications

• Format: PNG recommended (ICO files not supported)
• Maximum file size: 100 KB
• Single version only (multiple versions not supported)

Best Practices

1. Use clear, simple designs that remain recognizable at small sizes
2. Ensure high contrast for better visibility
3. Match your brand's visual identity
4. Test across different browsers and dark/light modes

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

Related Articles

Previous Articles