Create Favicon for WordPress Blog

Favicon :

Create Favicon for WordPress Blog

It is a 16X16 (pixels) short image that actually used to give the first impression about your website/blog ( a pictorial representation) . In simple terms it basically cuts long story to short.Whenever you  use any tabbed browser like Mozilla  ,Chrome etc you will see a small icon on the left of your tab , that small icon is nothing but your favicon. Moreover , you will see the same favicon in the bookmarks tab also when you bookmark any page. Sometimes these favicons are very useful in finding the website that you are looking for , from a big list of bookmarks that you have in your browser. If you see in the above image , that green color square is the favicon for this blog.

Create Favicon for wordpress blog:

Earlier I used to think creating a favicon or an image (of any type) is really a tedious job and you need to have a strong background in some image processing tools like Adobe photoshop , Gimp etc .Creating a proper image like banners , custom images still need a lot of good knowledge on these tools but for favicon it is very straightforward if you have the favicon design in your mind.
I have used this website for the logo design and trust me there interface is so simple that you can done with your favcion in 5 mins. In my case i didn’t have any design in my mind so I browsed there gallery and there they have provided lot of favicons that have been designed by other designers. You can also use any favicon from the gallery for your website. Just make sure that you have read the terms and conditions before using any of those.
I prefered to create favicon myself for my blog , I know my favicon looks no special but I am happy with it.So, go ahead and create a favicon for your website and once it is created , download and save it somewhere on your local system.Make sure that you are saving it as .ico  not .gif, .png or in any other format.

Set Favicon for wordpress blog:

Now here comes the most easiest part ( that i thought would be the toughest) setting up this favicon on your website. For this you need an FTP client that you can use to move this favicon from your local system to your server. These days every hosting provider provides FTP clients that can be used to upload and download files from the server. In my case , it is hosted on bluehost so i have used the FTP client that they provided and uploaded this file.So, if you are using blue host you can refer below snapshot.

Create Favicon for WordPress Blog -2
Create Favicon for WordPress Blog -2

You have to upload this favicon directly under your domain , that means when you browse the directory in FTP client you will see a folder with the same name as of your domain (in my case it will be under lotusmediacentre). See below snapshot.

Create Favicon for WordPress Blog -3
Create Favicon for WordPress Blog -3

It might be possible that this folder already have an favicon image , search for favicon.ico , if you find one delete it and upload your favicon.ico (downloaded one) here.
Now you are all set and its time for testing. Clear the cache of your browser and reload the page , this time you will see a beautiful favicon on the left of your tab.

And in the last there are some advantages of using .ico instead of normal image formats like .png,.gif etc.

Advantages :

  1. .ico images are compatible with even older versions of browsers like IE 5.
  2. These days all modern browsers first sends a request for favcicon.ico to server , so to avoid 404 store your image in .ico format.
Let'sConnect

Saurabh Jain

A Developer working on Enterprise applications ,Distributed Systems, Hadoop and BigData.This blog is about my experience working mostly on Java technologies ,NoSQL ,git , maven and Hadoop ecosystem.
Let'sConnect
Add Comment Register



Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>