By Sharon Hill
Does your blog have the cool icon in the address bar or does it look more like this?

We have all seen the icons in the browser address bar.
![]()
Want to know how to create one for your own blog?
A favicon (short for favorites icon) is a 16 x16 pixel square that is created as a png file and then converted to an .ico file. Already lost you? Stay with me and I will attempt to give you all the steps in order.
Creating the image and the .ico file
If you have a logo you can make an favicon. It is best if you make it a square.
![]()
I started with the logo above, however when I created a favicon the text was unreadable. I created another one.
![]()
This logo is 30x 30 pixels and worked just fine.
When it was converted from a .png file to a .ico file I ended up with
![]()
To convert the .png file I used Icon Sushi. You can download it at cnet.com http://download.cnet.com/Icon-Sushi/3000-2195_4-10547564.html
When you go to the link, you will see other popular icon tools to choose from.
You can also go to the icon sushi site directly at http://www.towofu.net/soft/e-index.php
Once you convert the .png file to the .ico file you need to upload to your blog directory.
Upload to your blog site
You should know the directories and files for your blog. For example, if you are using Word Press and the default theme, you would upload to:
www.yourblog.com/blog/wp-content/themes/default/images/favicon/yourfavicon.ico
Breaking this down under your main directory url address/blog you will open up the folder wp-content and then open the folder labeled themes then default then images then favicon. If you do not have a favicon folder you will need to make one. Then you upload the file into the folder you just created.
Insert filename into page
If you are using Word Press you will need to find the header.php page. On the dashboard, find Appearance on the left and click on Editor. The pages will be shown on the right side of the screen. Click on header.php
The header.php code will now show in the middle of the screen. Don’t worry too much what all this all means. What you are looking for is
<title><?php wp_title(‘«’, true, ‘right’); ?> <?php bloginfo(‘name’); ?></title>
After </title> add the following text:
<link rel=”shortcut icon” href=”http://yourblog.com/blog/wp-content/themes/default/images/favicon/yourfavicon.ico” />
Replace the text yourblog.com with your url address and yourfavicon.ico with your own saved .ico file.
Most browsers will be able to see the .ico file and include it in the address bar. Drop down your address bar and see all the other sites that you have recently visited that use a favicon. The favicon also appears in your bookmarks.
This worked for me.
![]()
As with everything when using code, there are some risks in changing/adding code and uploading files. Please do so at your own risk. Let me know if this works for you too.
@social_dynamics

