Create A Favicon
// February 14th, 2008 // 1 Comment » // Code, Design, tutorials
As you are reading this post, look up into your location bar at the top of the screen, notice the little icon to the left of the web url? This is a favicon and in this article, I am going to show you how to add this to your WordPress site.
What Is A Favicon?
Favicon is short for “Favourites-Icon” and is sometimes referred to as a “Web icon” or “Page icon”. Favicons are a great way of adding a little personality or identity for your website. They are very handy when looking for a favourite site amongst your bookmarks. By locating the little icon in your bookmarks list, you can locate quickly and easily your chosen web site just by recognizing the little favicon.
Choose an Image
First choose an image that you think that represents your site. Be it an icon, logo or even a letter, you choose! You can do this in any image software you have (Photoshop/Fireworks/Illustrator etc..).
Create…
Now to make things easier for you, visit either GenFavicon or Chami.com where you can upload an image from your mac/PC and resize the icon on any one of these sites. Once done you can download your newly created favicon.
Next step – place the favicon.ico file into the Root of your website folder (In WordPress, this is the initial folder not your themes folder) and upload to your server – usually to public.html. This is important that you do place the file in the root directory as browsers will recognize the .ico file without searching for a HTML document.
Add Some Simple Code….
Now open header.php and add the following lines of code inside the <head> of the header.php file:
<link href="/favicon.ico" rel="icon"/>
<link href="/favicon.ico" rel="shortcut icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
Save – Upload – Enjoy!
Save the file and upload to your server. Now visit your site and refresh the page, you should now see your newly created favicon in the address location bar at the top of your screen.
