How to Add a Favicon to Your WordPress Blog

Have you ever noticed that some sites have a tiny logo beside their URL in your browser window? Does your WordPress blog have one that came with your theme that you’d dearly love to change? For example, Foodie Pro’s default heart icon is cute, but it probably doesn’t perfectly represent you if your blog is called Red Meat for Real Men.

What is a Favicon?

That little logo is called a favicon, short for favorite icon. Its original intent was to serve as a visual cue for items added to your browser’s bookmark list. Favicons are images that must be exactly 16 pixels square and are usually created with special (free) favicon generation software. A favicon image file must be named favicon.ico and stored in a specific location within your site files in order to be recognized by browsers.

Creating a Favicon

Favicons are TINY and the images used to create them must be uncluttered without much detail. Basically, you’ll take an image of what you want your favicon to look like, import it into favicon generation software, and export it to a file named favicon.ico. Keep in mind you will need a square image to start with, say 100 pixels by 100 pixels. If your logo contains horizontal text, you may want to pick out the first letter or use another design element from your blog that is square.

1. Create a square image, preferably in png or gif format (jpg files are more difficult to work with because they have so much detail). If you don’t want a big block of color surrounding your favicon, make sure to save your file with transparency. See image below.
2. Pick a favicon generator from this list or find your own. (Note there are MANY free favicon generators out there. Browse around to see which one has an interface you like.) Upload your image and follow the instructions to generate and download your favicon.ico file.

Adding Your Favicon

Now that you have your favicon.ico file, it’s time to add it to your blog.

1. Determine where your theme stores its favicon.ico file. If you use Foodie Pro, for example, favicon.ico is stored in
   http://[your-blog-name]/wp-content/themes/foodiepro/images/
2. Make a backup copy of the favicon.ico file that is currently there. I usually rename the file favicon_orig.ico.
3. Upload the favicon.ico file that you created to this folder on your server via FTP.
4. View one of your blog pages in a browser to see if the favicon is there. You’ll probably need to hit Shift-Refresh. Sometimes, the favicon doesn’t show up right away. Check again in a day or two.

There are WordPress plugins that will also allow you to add a favicon, but I prefer not to add unnecessary bloat to my site. If the thought of messing around with your site files scares you, just search the plugin directory for “favicon.”

---

ABOUT THE AUTHOR
Shelby Kinnaird – Blog | Twitter | Facebook
Shelby is a systems engineer turned web designer turned food blogger. You can find her at Diabetic Foodie, where she loves to prove that a diabetes diagnosis is not a dietary death sentence.