Adding a Custom Favicon: How to Set Your Site's Browser Icon
Here's your favicon-focused content, optimized with concise and valuable information:
A favicon is a small square image displayed next to your page title in browser tabs, bookmarks, and search results. It helps users quickly identify your website among multiple open tabs.
To add a custom favicon:
- Open the Favicon panel
- Upload your image via drag-and-drop or file selection
- Optionally add a Dark Mode version
- Click Save
- Clear browser cache if changes don't appear immediately
Best practices for favicons:
Size and Resolution
- Recommended dimensions: 100x100px to 300x300px
- Displays at: 16x16px
- For Google search results: Use 48px multiples (48x48px, 96x96px, 144x144px)
Technical Requirements
- File format: PNG preferred
- Maximum file size: 100 KB
- Single version only (no multiple versions)
Browser Display
- Desktop browsers: Shows in tabs and bookmarks
- Safari: Visible in address bar and tabs
- Mobile browsers: Usually not displayed
- Search results: May appear next to site listing
Note: Browsers cache favicons, so updates might require clearing your browser cache and restarting to become visible.
These specifications ensure optimal favicon display across all platforms while maintaining professional branding standards.