How do I get my page title to have an icon?

Question

I would like to have my site’s logo shown in the icon area of the title rather than the default white document. Exactly as Stack Overflow has it.

score 106 · Accepted Answer · edited Sep 17 '18 at 14:53

106

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

add this to your HTML Head. Of course the file "favicon.ico" has to exist. I think 16x16 or 32x32 pixel files are best.

edited Sep 17 '18 at 14:53

answered Sep 13 '09 at 11:14

NiklasMM

2,895
2
22
26

5

For the code, I think wikipedia has a better explanation and better cross browser compatibility. http://en.wikipedia.org/wiki/Favicon – Andy Li Sep 13 '09 at 11:18
Thanks! Just took this codeline from my Website and since it works, I thought it can't be too wrong. ;-) – NiklasMM Sep 13 '09 at 11:19
Thanks Nick! Kust had to convert my image to an ico to get it working in IE. – littlechris Sep 13 '09 at 11:32
If using in ruby rails `` – Sunil Kumar Nov 06 '18 at 02:20

score 21 · Answer 2 · edited Oct 01 '16 at 07:25

this is an interesting question so let check it if you have a image for use as a website-icon then

Add this to your script

   <link rel="icon" type="image/gif" href="animated_favicon1.gif" />

otherwise if you have a icon for your website icon then you chose

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

I always use http://www.iconspedia.com/ for more icons

if my answer solved your problem then give me vote ok

score 8 · Answer 3 · answered Sep 13 '09 at 11:11

8

They're called favicons, and are quite easy to make/use. Have a read of http://www.favicon.com/ for help.

answered Sep 13 '09 at 11:11

Paul McLean

3,450
6
26
36

score 8 · Answer 4 · answered Apr 22 '15 at 10:01

8

Apparently you can use this trick.

<title> My title</title>

That icon-alike is actually a text.

answered Apr 22 '15 at 10:01

devXen

3,013
3
35
44

4

Where do you find these? – Max Rose-Collins May 19 '15 at 11:40
There's a [minor issue](https://stackoverflow.com/a/55391481/6282576) with this approach. – Amir Shabani May 30 '19 at 02:19

Amir Shabani · Answer 5 · 2019-05-30T01:58:55.530

8

The accepted answer works perfectly fine. I just want to mention a minor problem with the answer devXen has given.

If you set the icon like this:

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

The icon will work as expected:

However, if you set it like devXen has suggested:

<title> Amir A. Shabani</title>

The title of the page moves upon refresh:

So I would advise using <link> instead.

edited May 30 '19 at 01:58

answered Mar 28 '19 at 06:35

Amir Shabani

3,857
6
30
67

score 2 · Answer 6 · edited Mar 04 '17 at 23:16

2

According to w3school:

<link rel="icon" href="your_icon"/>

edited Mar 04 '17 at 23:16

Tunaki

132,869
46
340
423

answered Mar 04 '17 at 18:36

C.A. Gavin Lee

51
1
7

score 2 · Answer 7 · edited Oct 11 '21 at 23:10

2

This code will definitely work. In a comment I saw they are using a 'js' syntax that is not for everyone only for those who are working with 'express.js'

<link rel="icon" href="demo_icon.gif" sizes="16x16">
<title> Reddit</title>

you can also add png and jpg

edited Oct 11 '21 at 23:10

Rohit Gupta

4,022
20
31
41

answered Jan 19 '19 at 20:00

MD SHAYON

7,001
45
38

score 1 · Answer 8 · answered Nov 06 '18 at 02:23

If using in ruby rails use the below code.

For calculating the path of the file, asset_path function is used to find the image that we are using inside of the rails code embedded in <%= code %>

<link rel="icon" type="image/png" href="<%= asset_path('icon_name.jpg')%>">

score 1 · Answer 9 · answered Jun 13 '20 at 15:58

1

If you wanna use a URL just you can use this code.

<link rel="shortcut icon" type="image/x-icon" href="https://..." />

answered Jun 13 '20 at 15:58

behdad setoodegan

31
2

How do I get my page title to have an icon?

9 Answers9