HTML - Add icon to browser tab

Question

I'm doing an assignment for class, and we were tasked to make a webpage. All went well with creating the page, but I'm struggling to get the icon on my browser tab.

He instructed us to get the icon from one of our folders

This is from his directions

"Note in order to show your icon, you insert this line in your html head section"

<link rel="shortcut icon" href="images/favicon.ico" type="favicon/ico" />

"Assuming that your company icon is in the folder images"

I've tried many variations of that, but it won't work.

Mine is called favicon(1).ico

Here's one of my attempts

        <link rel="shortcut icon" href="/favicon(1).ico" type="image/x-icon" />                 

Here's another.

<link rel="shortcut icon" href="images/favicon(1).ico" type="favicon/ico" />

I have a folder on my Desktop called "Question 1" and within that folder I have my HTML file for this assignent and another folder called "images". In the "images" file I have the "favicon(1).ico icon.

Is there a way I can take that icon from my folder and place it in my code?

Answer 1

This is the Snippet that I use whenever I need to configure a favicon:

<!-- for FF, Chrome, Opera -->
<link rel="icon" type="image/png" href="/assets/favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/assets/favicons/favicon-32x32.png" sizes="32x32">

<!-- for IE -->
<link rel="icon" type="image/x-icon" href="/assets/favicons/favicon.ico" >
<link rel="shortcut icon" type="image/x-icon" href="/assets/favicons/favicon.ico"/>

This should work just fine.

You need to use .png in FF, Chrome and Opera and support them with 2 resolutions, for different devices and screen resolutions.

IE needs the .ico Image and needs the rel to be "icon" and "shortcus icon", don't ask me why, IE is always a bit of a wierdo as we all know :D