A favicon is a small square icon that appears beside your website's title in browser tabs, bookmarks, and sometimes search results. It helps users identify your site quickly and enhances brand recognition.

How to Add a Favicon

1. Open the favicon menu
2. Upload your image by dragging it or selecting from your computer
3. (Optional) Add a dark mode version of your favicon
4. Click Save
5. Clear browser cache and restart if the favicon doesn't update immediately

Display Behavior

• Shows in browser tabs and bookmarks
• Visible in Safari when clicking the address bar
• May appear in search results
• Limited visibility on mobile browsers

Technical Requirements

Image Specifications:

• Resolution: 100x100 to 300x300 pixels (displays at 16x16)
• Format: PNG (ICO files not supported)
• Size: Maximum 100 KB
• For Google search results: Use dimensions in multiples of 48px (48x48, 96x96, etc.)

Best Practices:

• Use a single version of your favicon
• Ensure clear visibility at small sizes
• Match your brand's visual identity
• Test appearance across different browsers
• Consider creating a dark mode version for better visibility

Note: After uploading a new favicon, browsers may continue showing the cached version. Clear your browser cache if the new favicon doesn't appear immediately.

Important Limitations

• Multiple version files are not supported
• Mobile browsers typically don't display favicons
• Display behavior varies across different browsers
• Search engines may have specific favicon requirements

Related Articles

Previous Articles