Adding a Favicon to Your Website Bookmark
Here’s how to add that little icon that appears next to the title of your web site when you bookmark it.
⚠️ This is different than the icons for when you save your site as a progressive web app
But First …
Create a square image of some kind that contains whatever you want to appear. These days browsers are good at shrinking the icon down for you, but you might to play around with different sizes. The official size of favicons has changed over the years.,
You might want to try online tools like http://www.favicomatic.com/ if that helps you.
The Favicon Cheat Sheet is also a nice start.
Step by Step
First navigate into your web site project repo directory.
It’s probably a good idea to put the image in an
assets/img directory so let’s make one if we don’t have it already.
mkdir -p assets/img
-p says create the directory and any parent directories that don’t already exist.
Now we just need move the icon images that were downloaded into it.
mv ~/Downloads/whatever.png assets/img
Now we can add a
link element with the
rel='shortcut icon' attribute. Change the type to match whatever your type, but you should really just stick with
<head> <link rel='shortcut icon' href='/assets/img/whatever.png' type='image/png'> </head>
Reload your page to see your icon appear next to the title.