Home > Blogger, Blogging, Internet Business, Wordpress > How to change your Favicon in your Website / Blog (WordPress & Blogger)

How to change your Favicon in your Website / Blog (WordPress & Blogger)

A lot of my friends ask me about how to change favicon in their blog / website. If you don’t know what is favicon, favicon is the icon that usually appear on the left side of our title in the tab of our browser. The icon also appear as bookmark icon on your browser. The favicon is more like a logo for your website and it is advised that you use one to make your website more beautiful. I will explain how to add / change the favicon in website and the most used blogging platform (WordPress & Blogger)

Create a Favicon File

The first thing you must do is create a favicon file. You can create this by Photoshop or other graphic design tools you usually use. Icon files usually recognized with ico extention. But, for this you don’t have to use *.ico file , it can be any image file (GIF, PNG or ICO) but make sure the size of the Favicon is not too big or it will make your website become slower to open. Make sure sizes are square, it can be 16×16, 32×32, 64×64 or 128×128 (It’s better not use size larger than 128×128). You also can generate icon files from a picture. Here are tools to make favicon :

If you can’t make a favicon by yourself, you can download it from these website :

Once you’ve got yourself a Favicon, upload your Favicon anywhere in your site directory.

How to change favicon on  website?

For website, you just need to edit your index.html page. Just place this script below </TITLE> on your HTML code

<link rel=”shortcut icon” href=”images/favicon.ico”>

Save the html file and upload it to your webhosting. Open your website, and the favicon will appear.

How to change favicon on WordPress?

Once you have uploaded the Favicon, enter your Admin Area (http://yourblogname.com/wp-admin), and click Appearance>Editor. Open  Header.php file in your WordPress admin panel. Paste this code anywhere in the file:

<link rel=”shortcut icon” href=”favicon.ico” />

Once this is done save the settings and open your site. You should see your new Favicon next to your web URL on the address bar.

Alternately you can use WordPress plug-in WP Favicon or Admin Favicon. Search on WordPress Plug-In Add New area. Install and activate it and enter the path of the Favicon in the plug-in options.

How to change favicon on Blogger?

By default, favicon in blogger would be like this :

If you use free blogger (blogspot), you’ll need to upload the favicon file in free images hosting or photo sharing like Photobucket or Tinypic. If you use blogger on your own domain, you can upload the favicon file into your website directory.

Now enter your Blogger control panel. Click Design>Edit HTML. Look for the “<title><data:blog.pageTitle/></title>” code in the editor. Once you’ve found the text paste the following code below it :

<link href=’FaviconURL’ rel=’shortcut icon’ type=’image/x-icon’/>

Click Save Template, and try to open your blog again. You should see your new Favicon.

Related Posts Plugin for WordPress, Blogger...

Incoming search terms:

  • blogger favicon
Be Sociable, Share!
  1. Feminissimo
    August 4th, 2010 at 01:57 | #1

    I, envy you. Your blog is much better under the maintenance and design than mine.

  2. December 3rd, 2010 at 19:23 | #2

    this tutorial here also gives the proper and completed method of changing blog favicon. even starting from making the .ico file itself

  1. No trackbacks yet.