How to Create and Implement a Favicon for Your Website

Favicon

• Favicon is a small icon that represents a website. It displayed in places like the web browser’s address bar.

• The favicons of Chirpy are placed in the directory assets/img/favicons/

1. Prepare the Square icon

• I got a free icon in this website, icons8

• When the padding size is too small, I cannot identify what is the icon. So I have set the size like this.

  

• Prepare a square image (PNG, JPG, or SVG) with a size of 512x512 or more

  

2. Generate the favicon

• And then, go to the online tool Real Favicon Generator and click the button Select your Favicon image to upload your image file

• Settings

  It sets how the icons will appear in each browser

  

  and click the button Generate your Favicons and HTML code to install your package

• Package

  Download your package

  

3. Apply the Code

• Copy and Paste the directory and change the directory name favicons

• Edit the code

  • browserconfig.xml

      ---
      layout: compress
      ---
    
      <?xml version="1.0" encoding="utf-8"?>
      <browserconfig>
          <msapplication>
              <tile>
                  <square150x150logo src="/assets/img/favicons/mstile-150x150.png"/>
                  <TileColor>#da532c</TileColor>
              </tile>
          </msapplication>
      </browserconfig>
    

  • site.webmanifest

    When using Liquid tag in a Markdown flie, Liquid tag (assign favicon_path ...) is interpreted and processed during the server’s page-building process

    So, I took a capture instead of writing a code

    Code :