DEV Community

Cover image for How to Set Favicons on Your Websites
Rajeev Kumar
Rajeev Kumar

Posted on

How to Set Favicons on Your Websites

Have you ever properly added favicons to your web projects? They may be small, but their impact on branding and user experience is huge. In this blog, we'll learn "How to set a favicon on your website".

What is Favicon & Why is it important to add to the project?

In web design, a favicon, or "favourite icon," is a small, square image that visually represents a website. It benefits the project in terms of Brand Recognition, Enhanced User Experience, Professionalism, Increased Website Visibility, Consistency Across Devices, Improved SEO, etc.

Steps to Adding a Favicon to a Website:

  1. Prepare Favicon Images:
    • Take your website's logo and create four versions of it in different sizes: 64x64, 180x180, 192x192, and 512x512 pixels. Save these images in a suitable directory within your project folder.
  2. Link Favicon in HTML:

    • Inside the <head> section of your HTML document, add the following <link> tags to attach the favicon images:
    <link rel="icon" href="images/favicons/favicon-64.png" />
    <link rel="apple-touch-icon" href="images/favicons/apple-touch-icon.png" />
    <link rel="manifest" href="manifest.webmanifest" />
    
    

    Replace "images/favicons/favicon-64.png" with the appropriate file path for your favicon images.

  3. Create manifest.webmanifest File:

    • Create a new file named manifest.webmanifest in your project directory.
    • Inside the manifest.webmanifest file, add the following JSON structure:
    {
      "icons": [
        {
          "src": "images/favicons/favicon-192.png",
          "type": "image/png",
          "sizes": "192x192"
        },
        {
          "src": "images/favicons/favicon-512.png",
          "type": "image/png",
          "sizes": "512x512"
        }
      ]
    }
    
    

    Ensure that the "src" paths match the location of your favicon images.

  4. Favicon Deployment:

    • Once all the necessary files and links are in place, deploy your website to make the favicon visible to users.

Additional Notes:

  • The favicon images should be appropriately sized to ensure optimal display on various devices and platforms.
  • The apple-touch-icon link is used for Apple devices and should typically be a square image in PNG format.
  • The manifest.webmanifest file provides metadata about the web application, including icons for different screen sizes and platforms.

Following these steps, you can successfully add a favicon to your website, enhancing its visual appeal and branding.

Top comments (0)