Creating a favicon in WordPress

You’ve probably noticed some websites having an image in the address bar, like so:

image

These are called favicons (short for “favorites icon”) and in this post I’ll show you how to add one into your website.

  1. Create an image you want to represent your website (most likely you already have a logo for your blog).
  2. 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.
  3. Resize the image to 16 x 16 pixels.
  4. Save the file as favicon.ico.
  5. Copy the favicon.ico into:
    1. Your current theme’s main folder (i.e., wp-content/theme/themename)
    2. In your website’s main directory (i.e., http://sitename.com/favicon.ico).
  6. You might as well add this line into your current theme’s header.php file for older browsers to see it:
  7. <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.

  8. Save your changes.
  9. Reload your website and that’s it!

Enjoy!

P.S. The favicon on my website is a headshot of me.  =0)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.