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.
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 <head> … </head> section of your web page:
Example below, I paste this after meta name generator…
[php]
<meta name="generator" content="WordPress <?php bloginfo(‘version’); ?>" />
<link rel="shortcut icon" type="image/ico" href="<?php bloginfo(‘template_directory’); ?>/favicon.ico" />
[/php]
This is what you should paste….
[php]
<link rel="shortcut icon" type="image/ico" href="<?php bloginfo(‘template_directory’); ?>/favicon.ico" />
[/php]
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
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:
If you know an easier way to create favicon, do share with us by commenting on this post.