What is Favicon?

Favicon is a small little icon on your address bar. Almost all popular websites also have this favicon, for eg: Twitter, Yahoo Mail and so on. Here, i am going to show you step by step on how to create your favicon, your own customize favicon.

faviconexample

Step 1

First you need to go to Paint.net and download this free editing tool to create your image. You will also need to install Microsoft .NET Framework

You will need to know how to use Paint.net to create a 125×125 to create your image and text.

It’s a great editing tool, easy to learn and very useful if you need to edit or create an image/ photo

Step 2

Second, go to this website http://faviconmaker.org/ and upload your image to make into favicon

It will generate a zip folder, open it and extract favicon.ico file to your desktop

Change the name of the favicon to “favicon.ico”.

Step 3
In your header.php, insert the following HTML tag inside the … section of your web page:

Example below, I paste this after meta name generator…

This is what you should paste….

Next, upload favicon.ico to your root file (inside your theme folder) and also upload your edited header.php

I use Filezilla to ftp or transfer my files or upload my files to my web hosting. Download Filezilla client.

How to configure Filezilla settings

filezillasetting

Username & password is your web hosting login

Change Host to your domain.com name and connect

Lastly, you need to clear cache and refresh your directory

How to clear cache

Clear your cache to view recent changes on your browser. Follow the steps below.

On your browser Firefox—>select Tools—->Clear Recent History

Go to Start—>Select Run—>type in “cmd” —>type in “ipconfig/dnsflush” and press Enter

Eg:

cmd

ipconfig

If you know an easier way to create favicon, do share with us by commenting on this post.