Favicon

Goal

• ⚡ In this step, we are going to create favicon.

What is Favicon?

A favicon /ˈfæv.ɪˌkɒn/ (short for favorite icon), also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons, associated with a particular website or web page.

https://en.wikipedia.org/wiki/Favicon

The icon in the following images are examples of favicon.

Create demo favicon

So, let's create a demo favicon at the following site

https://realfavicongenerator.net/

Please Click Demo with a random image.

These are the examples of favicon.

Next, in the Path tab of Favicon Generator Options section, there is a checkbox

I cannot or I do not want to place favicon files at the root of my web site. Instead I will place them here:

Please check this checkbox, then type favicons and click button.

Then click the button below to download the favicon package.

Create the favicons folder and move the downloaded files into it.

Favicon links in index.html

Copy and paste the following image code into the head tag of index.html.

index.html

...

<!-- Favicons -->

<link

rel="apple-touch-icon"

sizes="180x180"

href="favicons/apple-touch-icon.png"

/>

<link

rel="icon"

type="image/png"

sizes="32x32"

href="favicons/favicon-32x32.png"

/>

<link

rel="icon"

type="image/png"

sizes="16x16"

href="favicons/favicon-16x16.png"

/>

<link rel="manifest" href="favicons/site.webmanifest" />

<link rel="shortcut icon" href="favicons/favicon.ico" />

<meta name="msapplication-TileColor" content="#da532c" />

<meta name="msapplication-config" content="favicons/browserconfig.xml" />

<meta name="theme-color" content="#ffffff" />

<!-- Font Awesome -->

Check the output

We successfully added favicons.