How to add any image as a icon in title?

Question

I want to add an image as a favicon in title. The image is 300px and is located in images folder. I want to display the image besides the title.

I tried to do it but it does not display it:

<head>
<title>My title</title>
<link rel="shortcut" href="./images/logo">
</head>

It does not display any logo besides my title how can I add the logo with my title.

You have defined your icon path without the extension, its probably `logo.png`? Also take a look [at requirements for a favicon](https://sympli.io/blog/2017/02/15/heres-everything-you-need-to-know-about-favicons-in-2017/). — Ivanka Todorova, Feb 16 '18 at 07:47
@IvankaTodorova Should the size of image be small as it's size is 300px in images folder — stone rock, Feb 16 '18 at 07:50
Possible duplicate of [How to add an Image in the title bar?](https://stackoverflow.com/questions/11642552/how-to-add-an-image-in-the-title-bar) — Virender singh Rathore, Feb 16 '18 at 07:52
@VirendersinghRathore this is a question about a desktop app. — Ivanka Todorova, Feb 16 '18 at 07:57
@IvankaTodorova My question is not duplicate I have checked out that question but it doesn't seem to be similar — stone rock, Feb 16 '18 at 07:58
Possible duplicate of [Adding a favicon to a static HTML page](https://stackoverflow.com/questions/9943771/adding-a-favicon-to-a-static-html-page) — Ivanka Todorova, Feb 16 '18 at 07:58
@IvankaTodorova I have added favicon in images folder and index.html is in docs folder and my docs and images folder are in my main folder what `href=""` should I use for my favicon ? `` but does not work can you tell me how to fix the path ? — stone rock, Feb 16 '18 at 08:32
Check out [my answer](https://stackoverflow.com/questions/48822168/how-to-add-any-image-as-a-icon-in-title/48822338#48822338) @stonerock to see how to fix your problem. — Angel Politis, Feb 17 '18 at 07:43

Angel Politis · Accepted Answer · 2018-02-17T07:43:04.477

When trying to set a favicon to your page you have to note the following:

your image is of the correct dimensions (300px is too big to be used as a favicon).
to achieve cross-browser support, you'll need different sizes and different link tags.

Usually, one 180x180, one 32x32 and one 16x16 will suffice to cover all browsers and devices.

Code:

<link rel = "apple-touch-icon" sizes = "180x180" href = "images/logo180x180.png">
<link rel = "icon" type = "image/png" sizes = "32x32" href = "images/logo32x32.png">
<link rel = "icon" type = "image/png" sizes = "16x16" href = "images/logo16x16.png">
<link rel = "mask-icon" href = "images/logo.png">
<link rel = "shortcut icon" href = "images/logo.png">

Correct path:

Aside from the above, it seems that you also use an incorrect path to the favicon, which is why it doesn't work at all. Based on what you have said, your structure is the following:

/
- docs
   - index.html
- images
   - logo.png

With respect to the above structure, the correct relative path you have to use in your html file in order to get the favicon is ../images/logo.png.

score 0 · Answer 2 · answered Feb 16 '18 at 07:51

0

if you add favicon your website. favicon size 16x16 or 32x32 and then, this code block;

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

OR

https://www.favicon-generator.org/

answered Feb 16 '18 at 07:51

Nuri Umutcan Sidar

16
2

can you share with me – Nuri Umutcan Sidar Feb 16 '18 at 08:51
I have added favicon in images folder and index.html is in docs folder and my docs and images folder are in my main folder what href="" should I use for my favicon ? but does not work can you tell me how to fix the path ? – stone rock Feb 16 '18 at 09:00

score 0 · Answer 3 · answered Feb 16 '18 at 07:55

0

try this one

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>

answered Feb 16 '18 at 07:55

Bhargav Chudasama

6,928
5
21
39

I have decreased the size of my image now should I add above 2 lines in my html page ? – stone rock Feb 16 '18 at 07:59
Yes you can use small icon image for that – Bhargav Chudasama Feb 16 '18 at 08:03
What should be my `href="images/logo.png"` ? – stone rock Feb 16 '18 at 08:07
Can you edit it with the required `href=""` as your code is not working ? where should I add my icon in file structure ? – stone rock Feb 16 '18 at 08:07
your image is png or jpg – Bhargav Chudasama Feb 16 '18 at 09:09
I have added favicon in main folder and my index.html file is in layout->partials->index.html what must be the path of my `href=""` ? – stone rock Feb 16 '18 at 09:21
you use first link and ou just write `href="favicon.png"` your image name it will work not use second one – Bhargav Chudasama Feb 16 '18 at 09:24
1

What must be the path given to display the image with title in `href=""` ? – stone rock Feb 16 '18 at 09:27
href="favicon.png" will not work it because index.html file is in layout->partial-> index.html see the file structure in imgur url – stone rock Feb 16 '18 at 09:28
`use href="./favicon.png"` or `use href="./../favicon.png"` – Bhargav Chudasama Feb 16 '18 at 10:08

score 0 · Answer 4 · edited Dec 04 '19 at 11:50

You have to make your image responsive. 300px image is big. You have to convert your images to different screen sizes in order to be responsive. So, use online tools to convert images to different screen sizes and normally range between 16 to 180. When making a website, you need to consider about your resources to be hosted. For tab images, always keep images simply because you also need to consider your other resources as well

How to add any image as a icon in title?

4 Answers4