Shrikant Dhayje
shriekdj

shriekdj

Building Website from Scratch - Part 5

Shrikant Dhayje's photo
Shrikant Dhayje
·Feb 19, 2022·

1 min read

Building Website from Scratch - Part 5

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

  • Preface.
  • Section Addition in <head> tag.
  • Favicon.ico related file Is Created and Uploaded to Github Repo.
  • Pull Request
  • GitHub Repo

Preface.

So Now I Made Some Changes About the Files related to favicon.ico.

Whenever I Opened the Google Chrome Devtools I Saw An Error Related to favicon.ico file.


Section Addition in <head> tag.

I Added Given Code in head tag before my Stylesheet with favicon.ico related files.

<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
<link rel="manifest" href="./site.webmanifest">

I Generated the favicon.ico related with an third party site named favicon.io you can use any website that you want.

Given Below Is Image of List of New Files Added In Root of Repository.

List of New Files Added In Root of Repository

static/
  js/
    script.js
  styles/
    style.css
index.html
LICENSE
README.md
android-chrome-192x192.png
android-chrome-512x512.png
apple-touch-icon.png
favicon-16x16.png
favicon-32x32.png
favicon.ico
site.webmanifest

List Of New Files Added.

  • Image Type Files
    • android-chrome-192x192.png
    • android-chrome-512x512.png
    • apple-touch-icon.png
    • favicon-16x16.png
    • favicon-32x32.png
    • favicon.ico
  • File As Text for Settings of favicon.ico related files
    • site.webmanifest

Pull Request


GitHub Repo

 
Share this