Browser Tab Icon Example Browser Tab Icon Instance

The picayune tab browser icons that you accept probably noticed while surfing the web are known equally favicons and non only appear on the browser tab, simply also next to a site'due south name on bookmark lists and desktop shortcuts.

How practise 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 permit you lot 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 Folio

  1. Create the icon that you wish to display on the tab browser.
    • Do not worry also much nearly image size and go ahead and save the file as a .png or .jpg file. Y'all can later use an online converter to resize and to change the file format of your prototype.
  2. Go to online-convert.com, convert your paradigm to a .ico file, and resize your image to 16X16 pixels. Resizing your image and saving it as a .ico file. Resizing your prototype and saving information technology every bit a .ico file.
  3. Salvage 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">
    • Continue in heed that href should indicate exactly to where your prototype is located inside 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 alive, and refresh the browser. Y'all should now take a tab browser icon displaying for your html file!