Building Website from Scratch - Part 5

Building Website from Scratch - Part 5

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