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.

cd repos/mysite

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

The -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 .png images.

  <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.