HTML - Add Icon to Browser Tab
I am doing an assignment for a class and we have been tasked with creating a web page. Everything went well with the page creation, but I am struggling to get the icon in my browser tab.
He instructed us to get a badge from one of our folders
This is from his instructions
"Note, to show the icon, you insert this line in the html head section
<link rel="shortcut icon" href="images/favicon.ico" type="favicon/ico" />
"Assuming your company icon is in the folder"
I've tried many variations of this, but it doesn't work.
Mine is called favicon (1) .ico
Here is one of my attempts
<link rel="shortcut icon" href="/favicon(1).ico" type="image/x-icon" />
Here is another.
<link rel="shortcut icon" href="images/favicon(1).ico" type="favicon/ico" />
I have a folder on my desktop called "Question 1" and in that folder I have my HTML file for this assignee and another folder called "images". In the "images" file I have the "favicon (1) .ico" icon.
Can I use this icon from my folder and put it in my code?
source to share
This is the snippet I use when I need to customize the icon:
<!-- 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 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 a .ico image and needs a rel to be an "icon" and a "shortcus icon", don't ask me why IE is always something like wierdo as we all know: D
source to share