CODEWITHSUNDEEP
htmlcssicons
user3577397
user3577397

Reputation: 473

HTML - Add icon to browser tab

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?

Upvotes: 6

Views: 76166

Answers (2)

RenokK
RenokK

Reputation: 698

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

Upvotes: 11

arenaq
arenaq

Reputation: 2380

Try:

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

or this (for Mozilla)

<link href="favicon(1).png" rel="icon" type="image/png" />

It can be .png or .ico

Upvotes: 1

Related Questions