Please Like our Facebook Page

How to add icon or Logo image in the title bar of the browser. Revision.


How to add your brand logo in the title bar of the browser. Today we are going to learn an interesting topic on HTML, how to add an icon to the title bar of the browser. You might have come across many websites like Facebook, Google and many others having their logo in the title bar as shown in the image below

add icon on the title bar of the browser
add icon on the title bar of the browser

How to add an icon logo to the title bar of the browser

Adding icon or logo of your brand in the title bar of the browser, you will need to follow these steps:

  1. Understand about your logo or icon location
  2. Add the following code in the head section of html page as shown below
<html>
<head>
	<title>Your Website Title Here</title>
	<!-- this is the code that will allow icon to be visible in the title bar of the brower --> 
    <link rel="icon" type="image/ico" href="images/logo/logo.png" />
    <!-- you can also say this:  <link rel="icon" type="image/png" href="location/image.png" /> -->

</head>
<body>
	<p>My website content and design here</p>
</body>
</html>



Understand browser title bar icon code

The most important section of our code is:

   <link rel="icon" type="image/ico" href="images/logo/logo.png" />

rel: simply means relationship and our relation in this case is icon
type: for icon to appear, this attribute MUST be defined
href: this specific attribute represents your image location in the website files. It must be referenced correctly for it to be visible










Please Like us on Facebook