simply add favicon image to title bar of website

Add Favicon Image to Title Bar

We can see one small image in title bar. Not only title bar, you find that same image when you bookmark it. That name calling as Favicon. Here We will see something about favicon. like uses, formats and how to add favicon image to title bar.

simply add favicon image to title bar of website - steptoinstall

What is Favicon Image?

Favicon is using from March 1999. Actually favicon word came from Favorite icon. Now a days we are using this favicon images for shortcut, bookmark and history pages. That’s why we are calling as shortcut icon, bookmark icon and so-on. If you want more just go-to Wiki.

Notes:
The Favicon image size should in 16X16
It’s should be in .ico format

First we will see How to add favicon image to title bar, then we will see other details and all.

Place of Favicon

Just add or paste or replace, your favicon image to your main directory of website. That’s is
http://www.mysites.com/favicon.ico

Favicon code for HTML Static Page

Place following codes in the head part of your HTML Page. Means, inside of < head>…..< /head > tags.

<link rel=”shortcut icon” href=”http://www.mysites.com/favicon.ico” type=”image/icon”>
<link rel=”icon” href=”http://www.mysites.com/favicon.ico” type=”image/icon”>

You have add this code for each and every page.

Favicon for WordPress site

For WordPress, no need to add above codes and all. It’s having default. Sometime you have add as manually, that is

Go to header.php of your theme and add or replace above code.

Otherwise you can add favicon image to title bar using WordPress Plugins.

Extra:
  • To create Favicon image use graphics/image editing software, like as GIMP
  • Favicon image should be in square shape ( like 16×16, 32×32, 48×48, or 64×64… )
  • You can use .png format also. But Icon format(.ico) is formal one. If you change .png image to wordpress site, You must change the code as follow,

<link rel=”shortcut icon” href=”http://www.mysites.com/favicon.png” type=”image/png”>
<link rel=”icon” href=”http://www.mysites.com/favicon.png” type=”image/png”>

Just share...Share on FacebookShare on Google+Tweet about this on TwitterPin on PinterestEmail this to someone
The following two tabs change content below.
I am Karthik, software engineer by profession. You can find and follow me, from Social Media or here. Google+

Latest posts by karsho (see all)

This entry was posted in General, Website.

2 Responses to simply add favicon image to title bar of website

  1. pa1kumar says:

    thank you very much

  2. saso says:

    i use this code but i did’t get the favicon on my browser.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please Fill this Sum * Time limit is exhausted. Please reload the CAPTCHA.