Adding a Custom Favicon: How to Set Your Site's Browser Icon

Adding a Custom Favicon: How to Set Your Site's Browser Icon

By Michael Chen

January 1, 2025 at 05:09 AM

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:

  1. Open the Favicon panel
  2. Upload your image via drag-and-drop or file selection
  3. Optionally add a Dark Mode version
  4. Click Save
  5. 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.

Related Articles

Previous Articles