How to Implement Favicons for Better Branding and User Experience

If you missed our previous article on Understanding Favicons: A Beginner's Guide, be sure to check it out for a more detailed introduction to favicons.

Read the previous article here.

Favicons: A Powerful Brand Identity Tool

Favicons, what could have been a simple invention, have become a significant element for brand identity and recognition—especially for people who have multiple tabs open and use bookmarks. Favicons elevate the professionalism of the brand, appear on search results, thereby improving SEO, and indirectly contribute to click-through rates (CTR).

Favicons are inserted within the head tag. After Google indexes the webpage, favicons will appear. PNG, SVG, and ICO are the common file formats used for favicons.

Example HTML Code

Here’s how to include favicons in your website’s head tag:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

HTML Code for Legacy Browsers

For older browsers, you can use the following code:

<link rel="icon" type="image/x-icon" href="/images/favicon.ico">

HTML Code for Modern Browsers

For modern browsers, SVG icons are supported. Here's an example:

<link rel="icon" type="image/svg+xml" href="/images/favicon.svg">

SVG (Scalable Vector Graphics) is a file format where XML code is used to define the image in mathematical data. As it is an XML file, styles can be applied using CSS. For websites that toggle between light and dark themes, favicons can be styled accordingly.

@media (prefers-color-scheme: dark) {}

Favicons for iOS

Favicons for Apple devices use the following code:

<link rel="apple-touch-icon" href="apple-touch-icon.png">

Favicons for Progressive Web Apps (PWAs)

PWAs allow websites to behave like native applications. The web app manifest is an important JSON file called manifest.json that contains information about the app’s appearance.

HTML Code for Manifest

<link rel="manifest" href="/manifest.json">

JSON Code for Favicons

{
  "name": "My Recipes App",
  "short_name": "RecipesApp",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    },
    {
      "src": "/images/icons-vector.svg",
      "type": "image/svg+xml",
      "sizes": "512x512"
    },
    {
      "src": "/images/maskable_icon.png",
      "type": "image/png",
      "sizes": "192x192",
      "purpose": "maskable"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000"
}
            

Sizes: The above code provides multiple icon sizes in pixels to suit various device and display requirements.

Purpose: The purpose attribute is set as "maskable," meaning the icon will be masked with padding around it, and considered to be a 409px x 409px icon. It can also be set to any or monochrome, which removes color information.

Dynamic Favicons

Favicons need not be static small icons in a 1:1 ratio—they can also be dynamic, changing based on user interactions or page content.

You can change the favicon dynamically using JavaScript. Developers use dynamic favicons when a notification is received on the page or when the content is loaded.

Example Code

          // Example of changing a favicon with JavaScript
          var favicon = document.getElementById('faviconIcon');
          // Function to change the icon
          function changeFavicon(newIconUrl) {
              favicon.href = newIconUrl;
          }
          // Call the function to test
          changeFavicon('path/to/new-icon.png');
        

Optimizing Favicons for Faster Loading

To ensure faster loading, consider the following optimization tips:

• Maintain a 1:1 aspect ratio.
• Keep the file size under 1KB for quicker load times.
• Prioritize clarity, as the favicon will be displayed at a small size.
• Use an image compressor to reduce the favicon size.
• Deliver favicons via a CDN for faster rendering.
• Enable browser caching to store the favicon locally on the device.

Generating Favicons

Favicons can be generated using the <canvas> element, and the generated favicon can be added to the <link> tag.

favicon.io is a popular tool for generating favicons.

Other tools include AI-assisted favicon generators like Recraft.ai and Pixazo.

Additionally, Google Gemini 3 Pro Nano Banana and Google Antigravity can be used to generate favicons and placeholder avatars using the right prompts.

Personal Favorites in Favicon Design

PMy personal favourite is Washington Post’s favicon, which showcases strong brand identity and minimalism. Earlier this year, in May 2025, Google changed its favicon in celebration of the I/O 2025 event, which caught a lot of attention.

Experimentations with Favicons

Favicon Gallery is an interesting project by FromZero.ai to claim a custom favicon tile, aiming to set a Guinness World Record for the largest digital mosaic of favicons.

Recently in Nov 2025, German software designer Jonas Strehle has been experimenting with a project called Supercookie, which stores user information via favicons through persistent user storage — even in incognito mode.

There is also the possibility of using animated favicons, but it is not declared as a standard according to the WCAG accessibility guidelines.

You can read our Best AI tools for women in 2025 to help you be more productive in your daily life.

For more such contents, follow our facebook page @CreativeTechnocrayts and share it with your friends.