[html] How to add an image in the title bar using html?

<DOCTYPE! HTML>
<html>
<head>
    <title>Login</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    some text

</body>
</html>

This is the code I wrote to add an image in the new tab bar of the browser. But this is not working. I am also using wamp server, if wamp might be causing problems.

This question is related to html wamp

The answer is


W3C says:

<!DOCTYPE html 
      PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
[…]
</head>
[…]
</html>

See http://www.w3.org/2005/10/howto-favicon

But keep in mind: Some browser need a while to recognize that there is a favicon - try to delete the cookies and reopen your site! (And be sure the icon is at the path :) )


it works

Add this inside your head tag

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

Use the following

1.) Choose the image you want to set in your title bar.
2.) Convert it to ".ico" format. (You can use the following link online) http://image.online-convert.com/convert-to-ico
3.) Save the file as "favicon.ico" in the same folder as your .html file
4.) Add this inside your head tag <link rel="shortcut icon" href="favicon.ico"/>


Try the following:

<link rel="icon" type="image/png" href="img/iconimg.png" />

NB: The href is the directory to your image example. Your image is in a folder called "img" and your image name is "iconimg" and if it is a png use .png, if it is a jpg then .jpg. Remember to do this in the head of your file and not in the body.


in your you have capital letters for html.you wrote it as THIS IS NOT CORRECT!!! your browser will not understand it as html5.


I just tried with this code, and it worked for me: <link rel="icon" type="image/jpg" href="C:\Users\nrm05\Pictures\logo.jpg" /> Be sure to type type="image/jpg" for jpg files, and type="image/png" for PNG files. If you haven't downloaded the image, but you know the image URL, then you can type it in like this: href="image_url"

Hope this answered your question :-)


Showing image in title bar is easy. please follow the steps :

a) first save you image some where in the folder and name like favicon. b) then use below line inside head tag of the html view

<link rel="icon" type="image/png" href="image_url" />

c) Here you must know the path of your file, where you have saved the image d) save your image url in place of image_url e) save your working.


I tried in my angular7 project by writing these lines and worked.

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

please be noted that the image file should be in icon format (.ico)