How to Create a Favicon

You’ve probably seen a favicon displayed in the beginning of the browser address bar. It helps to visually display a web site.

A favicon stands for “favorites icon”, also known as a website icon, shortcut icon, url icon, or bookmark icon. It is a 16×16 pixel square icon associated with a particular website or webpage.

Creating a favicon

1. Reduce your logo (or whatever icon you wish to use) to 16×16 pixels and save it as a transparent png or gif. If your image is not square add space around it.

2. Save your icon as favicon.ico. Visit http://tools.dynamicdrive.com/favicon/ to create your favicon.

3. Add the favicon to your web site. Upload favicon.ico to your web site. Verify it’s there by typing http://mysite.com/favicon.ico in your browser. If using wordpress upload it to your theme folder.

4. Add this code to the head section of your home page.


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

In wordpress insert this code in your header.php file.


<link rel="shortcut icon" type="image/ico" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />

5. Save and upload file. Upload your home page or header.php to the server with FTP. To view your new favicon, clear your browser’s cache (F5).

That’s it!

Resources
http://codex.wordpress.org/Creating_a_Favicon

Speak Your Mind

*