DEV Community

Cover image for How to Add a Browser Tab Icon to Your Websites!
Karina Pichardo
Karina Pichardo

Posted on

How to Add a Browser Tab Icon to Your Websites!

Adding an icon to the browser tab of a website you created is like the cherry on top! The best part about it, is how incredibly simple it is to add one.

browser displaying browser tab icons

1. Find an image which you'd like to use as your favicon.

2. Save the image inside the folder which contains all your website's files. (index.html, styles.css, scripts, images, etc.)

3. Similar to how you link your external CSS stylesheet, in the <head> section of your HTML document, you do the exact same to link the icon, however, for the relationship you add 'icon' and for the href you'd add the image's location, for example:

<link rel="icon" href="images/example.png">

Tada! It's really that easy.

I know it's something so subtle but I still get excited every time I get to put an icon on the browser tab of a website I created.

My favorite website to find icons is:
https://freeicons.io/

Hope this helps, Happy coding!

Discussion (0)