You’ve probably noticed some websites having an image in the address bar, like so:
These are called favicons (short for “favorites icon”) and in this post I’ll show you how to add one into your website.
- Create an image you want to represent your website (most likely you already have a logo for your blog).
- If the image is not square (i.e., the width and height are not the same), convert it into a square image, either by cropping or adding whitespace (or blackspace) to the sides or top and bottom. You can use GIMP or PhotoShop.
- Resize the image to 16 x 16 pixels.
- Save the file as favicon.ico.
- Copy the favicon.ico into:
- Your current theme’s main folder (i.e., wp-content/theme/themename)
- In your website’s main directory (i.e., http://sitename.com/favicon.ico).
- You might as well add this line into your current theme’s header.php file for older browsers to see it:
- Save your changes.
- Reload your website and that’s it!
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
Note: If a line already exists that ends with /favicon.ico,overwrite it with the line above.
P.S. The favicon on my website is a headshot of me. =0)