How to Create a Favicon for Your WordPress Site

If you have a blog or website that is self-hosted on WordPress, you may have noticed the little icon that is to the left of your site title in the search engine taskbar. If you use a default WordPress theme, your icon will look like a little square with a grid, and it’s called a favicon (or shortcut icon). It is also used when someone adds your site to their smartphone home screen as an app.

If you have a custom designed theme, it may default to the designer’s favicon. For example, I use the Pretty Happy theme from Pretty Darn Cute Design (affiliate link), and their default favicon is a butterfly.

Changing your Default WordPress Favicon

A custom favicon is a great way to differentiate your WordPress site from others. You can use a miniature version of your logo (like Facebook) or you can create a favicon using your blog’s theme colors. It’s actually very simple to do with the current version of WordPress. Here’s how:

1. View your WordPress site in your browser, and click on “Customize” in the drop-down menu to the right of your blog title in the WordPress taskbar at the top of the screen.
2. Under  your theme title on the top left-hand side of the screen, you will see “Site Identity.” Click on the tab and you will see “Site Icon” as the last item in the list.
3. Click on “Change Image” and upload an image that is at least 512 px by 512 px. I used the free photo editing tool PicMonkey (affiliate link) to create mine. If you don’t want the background of the square to be white, make sure you set your canvas color to transparent.

How to Create a Favicon that Is Effective and Unique

Creating your own custom favicon is an opportunity to carry through with your site’s branding and separate your blog or website from the rest of the pack. There are a few guidelines to keep in mind when creating your favicon.

• Use your site’s logo (or a simplified version of the logo) to help make it easier for your readers to visually identify your blog. If your logo is too large or complicated, can you amend it slightly for your favicon?
• Look closely at your blog’s theme and the color palette used in the theme. Since people are very visual, try using the same colors in your favicon that you use in your blog–it’s a great way to make it easy to associate your favicon with your blog.
• Avoid using text in your favicon. The image is so small that it’s very difficult to read the text. Exceptions are using a single letter, like Facebook or Google.
• Simple is better when it comes to creating a favicon. Using too many extra features will just make the favicon look cluttered and less crisp. It’s a tiny image, so simple, clear and crisp is best!

Now you have the tools you need to create your own custom favicon. What are you waiting for? 🙂 In the meantime, check out some of my favorite blogging tools!