How to Add a Favicon in WordPress

Have you ever wandered what that little icon to the left of the tab bar is? That’s called a favicon. And I’ll show you why and how to add a favicon in WordPress.

Favicon on the tab

Favicons may seem like a small deal, and you are probably right. I mean, they are only 16 x 16 pixels. But if you are interested in branding your site, you should definitely add one. Not only that, but they can also help improve the speed of your website’s loading time. The reason is because when your website launches, it tries to find your favicon. And it will continue to search and if your browser can’t find your favicon, it will display a generic one.

Even if this doesn’t speed up your site by much, you should do whatever you can to optimize your site for the search engines.

In addition, it does add a touch of professionalism to your site and helps your overall branding.

HOW TO CREATE A FAVICON

The first thing you need to do, is go to your favorite design software. I use Photoshop, but you can find several free one’s on the internet.

I start off with a 64×64 pixel canvas. The reason I start off this big, is so I can see what i’m going to be designing.

When designing a favicon, you don’t have to get all crazy with the design. It can be something very simple. Look at Yahoo and Google. They just use a single letter for theirs.

Once you have created a design you can then resize it to 16 x 16 pixels.

SAVING YOUR FAVICON

It was the norm to save favicons in a .ico file. I use .png, and the reason is because it supports transparent layers. There are some old browsers that may not support .png, but all modern one’s do. Also, some design software programs may not have the .ico format, but they should have a .png format.

UPLOADING YOUR FAVICON TO WORDPRESS

So my favorite WordPress theme is Elegant Themes. And I’ll be discussing this Theme Template in another post. It’s really easy to upload your favicon in there.

You just go to Appearance >> Theme Options >> General Settings

And you will see a Favicon box.

Just go to “Upload Image.” Find your .png favicon and you’re done!

That’s it, you now have a cool favicon.

CONCLUSION

Favicons add professionalism to your site. They add some speed to your site. And when a user has a ton of tabs open in their browser, it will help them know which site is open by looking at the favicon. Also, when they bookmark your site, the favicon shows up there. You want your user to have the best experience when visiting your site, and even though the favicon is minor, it’s the attention to the details that help make a difference.