Open E-School

Male
Friday, February 24, 1984

Favicon – How to add image in the browser title bar

Category: Programming Date: Thursday, March 26, 2015

Goal

Favicon is the little image which you see along with the page title in the browser tabs. Our goal is to learn how to add a favicon or image to be displayed along with your websites title in the browser.

Can I use any image as favicon?

Yes, you can use any image as favicon, no matter what size it is. But in reality your favicon should be 16*16 pixels in size to be able to load fast and be viewed properly

How to add favicon to HTML web page?

To add a favicon to your HTML webpage you will have to write the following line of code in the <head> section of your web page

<head>           <title>My web page title</title>            <link rel="icon" href="/favicon.png" />       </head>

Explanation

The magic line of code here is the <link rel=”” href=”” /> line. It does two things

  1. Loads the favicon.png image into your page. By the way here we have named our image as favicon.png, you can name it whatever you want.
  2. Second it uses rel=”icon” to tell that this image should be used as an icon for this page. If you skip rel=”icon” then the browser will not know what to do with your image

If you write your code properly then you should see your image in the title bar in your browser. It should look something like this

Favicon example
 

Rate this article and help us improve

Please Login to rate
Overall ratings: 2 | Rating: 4 out of 5
Previous Article Next Article

Quick Links

E-Magazines

@

Total Followers
Study Group Created
Study Group Joined
Following Teacher
Following Organization
Blog Articles Added
Questions Asked
Questions Answered
Jobs Posted
Total Members in Group
Questions asked by members
Tasks added in this Group

Please wait..

Ok

Login to Open ESchool OR Create your account    Login   SignUp