Home / Snippets / How To Add a Favicon to Your Website the Easy Way
How To Add a Favicon to Your Website the Easy Way cover

How To Add a Favicon to Your Website the Easy Way

564

1 year ago

0 comments

The favicon can be in any image format (ico, png, jpg) and the most recommended design and style of your website favicon is to have it look good on both light and dark theme colors.

Example of Favicon from Entertails.com

To add the favicon prepare an image at least around 32px in width and height and the format can be any image format. Once you have that ready you can add the following code in your "head" HTML tag.
<title>Your website title here</title>
<link rel="shortcut icon" type="image/jpg" href="your-favicon-here.jpg"/>
Do note on the type of the image. For the above code it's jpg but you can also have ".png" format and you can define it like below.
<link rel="icon" type="image/png" href="your-favicon-here.png">
An example of .png favicon is PostSrc favicon.
<link rel="icon" type="image/png" href="https://postsrc.com/favicon.png">

Mobile Favicon View


The mobile favicon will look like the following.
Entertails.com Mobile Tab Favicon Preview
notion avatar

Ahmad Aziz

Week-end developer currently experimenting with web, mobile, and all things programming.

Topics:

Frontend

Resource

Average

Average

Support Us

If you like our tutorial, support us by being our Patreon or buy us some coffee ☕️

Post Tutorials

Learn trending tutorials for ReactJs, React Native, VueJS, NextJs, Laravel, Tailwind CSS, and Flutter development.
View Tutorials

Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your web projects
View Components

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this