DEV Community

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

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

4 2

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.




Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more