3 min read

Understanding Favicons: Importance and How to Add Them

Understanding Favicons: Importance and How to Add Them

Favicons enhance user experience, improve branding, and contribute to a professional image. Favicons are not directly linked to Search Engine Optimization (SEO), yet they indirectly impact search rankings through improved user-friendliness and brand recognition.

What are Favicons?

A favicon, a small 16x16 pixel icon, serves as a branding symbol for your website, aiding visitors in locating your page easily amidst multiple open tabs.

How to Design a Favicon

Due to their compact size, favicons are most effective when designed as simple images or concise text characters. While distinct from logos, favicons may coincide with them or be a smaller version of your company's original logo.

Where do Favicons Show Up?

Favicons are visible in various places online.

A favicon can appear in various places across the web, serving as a visual identifier for your website. Here is a comprehensive list of places where a favicon could show up:

  1. Browser Tabs: Favicons appear in the tabs of web browsers next to the page title, allowing users to identify and switch between open tabs easily.

  2. Bookmarks/Favorites: When users bookmark or save a webpage, the favicon is often displayed next to the page title in the bookmarks bar or bookmark manager.

  3. Browser Address Bar: Favicons may appear in the address bar next to the URL of the website, providing users with a visual cue of the site's identity.

  4. Browser History: When users revisit a previously visited website, the favicon might be displayed alongside the page title in the browser's history.

  5. Toolbar Apps/Extensions: Favicons can appear in browser extensions or apps that users have added to their browser's toolbar.

  6. Mobile and Desktop Shortcut Icons: If a user adds a shortcut to your website on their mobile device's home screen or desktop, the favicon could be used as the shortcut icon.

  7. Search Engine Results: Some search engines, particularly on mobile devices, display favicons next to the search results, helping users identify the source of each result.

  8. Open Graph Images: Social media platforms and messaging apps often use favicons as Open Graph images when users share links to your website.

  9. Browsers' Speed Dial: Some browsers have a speed dial feature that displays favorite websites as thumbnail images with associated favicons.

  10. Web Push Notifications: When users receive web push notifications from your website, the favicon might be displayed alongside the notification message.

  11. Browser RSS Feeds: Some browsers or RSS readers display favicons next to the names of subscribed websites in the feeds.

  12. Browser Extension/Plugin Pages: Favicons can also appear in pages related to browser extensions or plugins, helping users quickly identify the source.

  13. PDF Documents: If a PDF document contains links to web pages, some PDF readers might display favicons next to the links.

  14. Web Clip Icons: On iOS devices, users can add a web clip (shortcut) to the home screen, and the favicon could serve as the icon for this shortcut.

  15. Browser Taskbar and Start Menu: On Windows systems, favicons can appear in the taskbar when users have multiple browser windows open.

  16. RSS Feeds: In some RSS readers, favicons are displayed alongside the feed items to indicate the source of each item.

It's important to design a favicon that's clear, recognizable, and represents your brand well, as it will be used across these various contexts to visually identify your website.

Create a High Impact Favicon

To create an impactful favicon, follow these steps:

  1. Keep it Simple: Opt for a minimalist design that captures your brand essence. Consider using your company initials or a simplified logo image.

  2. Include Brand Colors: Stick to your brand's primary colors to maintain consistency and facilitate instant recognition.

  3. Minimal Text: Avoid overloading the favicon with text; opt for minimal, legible text or focus solely on imagery.

  4. Don't Force Logo: Instead of compressing your entire logo, select a distinctive element or initial that represents your brand effectively.

  5. Choose Format and Size: Create your favicon in formats like ICO, PNG, or SVG, adhering to the recommended dimensions, such as 16x16 pixels.

How to Add a Favicon to Your Website

Adding a favicon to your website varies based on the platform:


  1. Go to "Appearance" > "Customize" > "Site Identity."
  2. Select "Site Icon" and upload your favicon image.


  1. Access "Manage Website" > "Favicon."
  2. Upload your chosen favicon image; it will be saved automatically.


  1. Navigate to "Online Store" > "Customize."
  2. Under "Theme Settings," select "Favicon" and choose or upload your favicon image.

Favicons: A Bit of Brand Magic

Favicons are small but powerful branding tools that enhance user experience, establish credibility, and aid in quick identification of your website. Designing a simple, recognizable favicon and correctly adding it to your platform contributes to a cohesive and professional online presence.


Teach all Your Writers the Brand Voice

3 min read

Teach all Your Writers the Brand Voice

It's no surprise that maintaining consistency and a unified tone of voice becomes hard at scale. But you want a unique voice. But you have a bunch...

Read More
Brand Guidelines: What Are They, And Why Do You Need Them?

Brand Guidelines: What Are They, And Why Do You Need Them?

If your business works with external content creators of any kind, you need brand guidelines. Building a brand takes an immeasurable amount of time...

Read More
Your Brand Voice

Your Brand Voice

Establishing a clear and recognizable brand voice is an important exercise for start-ups and small businesses that want to show up in the...

Read More