DEV Community

Cover image for Building Website from Scratch - Part 5
Shrikant Dhayje
Shrikant Dhayje

Posted on • Updated on • Originally published at codewithshriekdj.netlify.app

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">
Enter fullscreen mode Exit fullscreen mode

Favicon.ico related file Is Created and Uploaded to Github Repo.

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
Enter fullscreen mode Exit fullscreen mode

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

favicon.ico related files added and configured #13

Used the Site Named https://favicon.io for building the favicon.ico file for website and also configured them index.html.

PR Connected Issues

  • Closes #11
  • Closes #12

GitHub Repo

GitHub logo shriekdj / site-from-scratch

Here I Will Create My Site from Start to Finish.

Site From Scratch By @shriekdj

Here I Will Create My Site from Start to Finish.

I Will Now Speed Up The Process.




Top comments (0)