Browser Tab Icon Example Browser Tab Icon Example

The little tab browser icons that you have probably noticed while surfing the web are known as favicons and not only appear on the browser tab, but also next to a site’s name on bookmark lists and desktop shortcuts.

How do you add a tab browser icon to your html page?

Keep in mind that a favicon needs to be 16x16 pixels in size and a .ico file. Luckily, there are online tools that allow you to resize and convert your image to a .ico file all at once! For my portfolio site, I used online-convert.com to convert my .png image file to a 16X16 pixels .ico file.

Steps to Add a Browser Tab Icon to Your HTML Page

  1. Create the icon that you wish to display on the tab browser.
    • Do not worry too much about image size and go ahead and save the file as a .png or .jpg file. You can later use an online converter to resize and to change the file format of your image.
  2. Go to online-convert.com, convert your image to a .ico file, and resize your image to 16X16 pixels. Resizing your image and saving it as a .ico file. Resizing your image and saving it as a .ico file.
  3. Save your icon image inside the img file in your website's directory.
  4. Within the <head> tag of your html file insert the following <link> tag:
    • <link rel="shortcut icon" href="img/nameofyouriconfile.ico">
    • Keep in mind that href should point exactly to where your image is located within your website's directory in relation to the html document.
  5. Save everything, make sure to upload files to your host if your site is live, and refresh the browser. You should now have a tab browser icon displaying for your html file!