How to Add favicon.ico to WordPress For Professional Appearance

(Reading time: 5 – 8 minutes)

Favicon.ico: Who, What, Where, When, Why and How

Look up in URL field of your web browser, or on the browser tab if you have a tabbed browser like Firefox or Internet Explorer… you will quite likely see a little icon, called a “favicon.” It looks a little this this:

favicon on tab

Favicons are no-cost, easy to make and install, and provide one of those critical necessary details separating websites that mean business from website that don’t.

>>>NOTE: Check out Chapter 1 of the new EBook we’re creating — Fastest WordPress Graphics Using Photoshop: 7 Killer Tutorials for $17. It’s all about creating favicons for your WordPress website, and we broke it down into simple, easy steps so that anyone could do it!

Favicons provide many other benefits:

• Your readers will be able to find your web pages, easily, even when they have many browser windows or tabs open at once.
• Your bookmarks and favorites folder usually show favicons next to stored web site links, again providing a fast visual cue for your readers to return to your web site.
• Favicons provide visual reinforcement for your brand. You can make a favicon representation of your logo for added reinforcement.

Given how easy it is to add a favicon, you don’t have an excuse for NOT having one on your web site!

Creating a favicon

There are many ways to create one of these little images. You can take an image and just scale it down to 16 x 16 pixels in Microsoft Paint (Go ahead, try it, see how it works). You can fire up Adobe PhotoShop or Gimp and create something truly professional. You can even upload an image to a website and have one created for you. You won’t have much control over how it turns out though, other than finding an original image that works well. For example, go try out favicon.cc. Unless your image is really, really simple, automatic favicon generation isn’t likely to produce professional looking icons.

(As it turns out, Website-In-A-Weekend is working a small, secret project that is going to help you understand everything you need to know about creating your own favicon, or what you need to understand if you want a graphics professional to create a favicon for you. Watch this space (or sign up to the Website-In-A-Weekend newsletter, top right corner), and I’ll update you when we’re ready to unveil. UPDATE: See note above or banner below for EBook on creating favicon.ico images for WordPress!)

Adding the favicon to your blog

There’s two ways to add a favicon to your blog. One is to use a WordPress plugin to add the icon and handle inserting the correct code into your theme’s header. The other is to manually upload the favicon directly to your website using FTP, and make a simple edit to your header.php file… easy to do from the administrator web page: “Appearance > Editor.” Let’s take a look at manual procedure first. (BTW, at some point, you will need to more than you want to know about the guts of WordPress, and doing these simple tasks of installing favicons and copyright notices helps you get comfortable for when it really matters.)

Since we recommend installing your WordPress favicon manually, let’s look at that first:

1. FTP the favicon.ico to your web root directory. This might be /public_html, it might be another directory, depending on how your WordPress installation is configured.
2. Add to theme header.php:
3. Reload blog page in browser, clearing the browser cache if necessary.

Other image types can be used. For example, here’s how to specify a png image for a favicon:

Note that this favicon is directed to the WordPress theme installation directory. Feel free to install the favicon into your theme directory, but understand that this exposes information about your site structure in the favicon path to malicious hackers.

You can also name the icon file anything you want, as long as you tell the browser. Here’s how Edgewall’s Trac system specifies the name of the favicon as “trac.ico”:

Remember to clear your cache when you reload your web page to examine your new favicon (CTRL – F5 in Firefox).

WordPress favicon plugins

Plugins… we did some investigation, here’s what we found out: There are surprisingly few plugins for favicons, 3-5, with varying capabilities.
Of the plugins we did find:

• Many of them required you to manually upload the favicon anyway.
• At least one required the favicon to be installed in your web root directory instead of your WordPress directory.
• Others required you to link to a favicon already hosted on a web server. Now, this could be your web server, and you could upload it using the WordPress media tools, but that’s almost as much work as doing it manually!

Here’s a list of what we found using both Google and the plugin browser in WordPress “Plugins » Add New”:

• Favicon Manager WordPress Plugin from Digital Ramble.
• Admin Favicon by John Kolbert.
• MaxBlogPress Favicon By MaxBlogPress.
• Shockingly Simple Favicon By Matias S

We’re sticking with manually uploading favicons for now. And make sure to check out Chapter 1 of our new EBook “Fastest WordPress Graphics Using Photoshop: 7 Killer Tutorials for $17″

Fastest WordPress Graphics Using Photoshop:
7 Killer Tutorials for $17

Just what you need for getting your WordPress Graphics sorted out!

Get Yours Now!

More information

Dig deeper, here are some links:

• Lanna Wuthenow of My Internet Stuff gives us a great “how to” for WordPress favicons.
• Fred Peters from Newest on the Net provides another really good “how to” for adding favicons to WordPress.

Tagged as: Favicon, Gimp, Graphics, head, Header