Your favicon represents your brand identity in browser tabs and search results. Here's how to add and optimize one for your site:

Adding 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 if changes don't appear immediately

Favicon Display Behavior:

• Shows in browser tabs and bookmarks
• Appears in Safari's address bar and tab view
• May display in search results
• Limited visibility on mobile browsers

Technical Requirements:

Resolution:

• Optimal size: 100px × 100px to 300px × 300px
• Minimum size: 16px × 16px
• For Google search: Use multiples of 48px (48×48, 96×96, 144×144)

File Specifications:

• Format: PNG recommended (.ico not supported)
• Maximum file size: 100 KB
• Single version only (multi-version files not supported)

Best Practices:

• Use a clear, recognizable design
• Ensure readability at small sizes
• Follow search engine requirements for visibility in results
• Test appearance across different browsers
• Consider providing a dark mode version

After uploading, verify your favicon displays correctly across different browsers and devices. Remember that browser caching may delay visibility of updates.

Related Articles

Previous Articles