How to Add a Browser Tab Icon to Your Websites!
Karina Pichardo
Posted on March 16, 2021
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.
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:
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!
Posted on March 16, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related