How to Add a Favicon to WordPress

Posted on Saturday, March 14th, 2015 No Comments


How to add a favicon to WordPress

This post will tell you how to add a favicon to your WordPress website, including how to make a favicon and where to upload it. It’s something that’s not really built in to WordPress, but it’s a nice addition to your website that you should definitely do.

What is a Favicon?

First of all, what is a favicon? Favicon is short for “favorite icon,” and it’s the little picture that shows up in your browser’s favorites or bookmarks when you bookmark a website. Here’s an example of some favicons that live at the top of my browser:

favicons

As you can see, these really make a bookmark recognizable.

Favicon Size

Favicons are typically 16 x 16 pixels.

Favicon File Type

All major, current browsers support the .ico extension for favicons as well as .png and .gif. Some also support others, but they aren’t used very often.

If you want to allow for transparency in part of your logo you’ll need to use a file format that supports that (like the Twitter favicon in the example above). Both .ico and .png will work. If your favicon will be fully filled in with color, then that’s not something you need to worry about (like the Facebook or reddit examples above.)

How to Make a Favicon for WordPress

If you’re comfortable using Photoshop or similar image editing software, you can create a PNG or GIF file with a size of 16 x 16 px. You can make a tiny version of your logo, use a part of your logo, or do something else that makes sense for your website.

There are also many favicon generators available online that you can use to create your favicon. Here’s a selection:

Some will even generate icons for mobile devices, like apps. Those will require a 32 x 32 px image. If you’re creating a website as well as an app, using a favicon generator is an easy way to get all your icons done in one shot.

If you enjoy using favicon generators, you might also like the Easy Icon Logos logo generator.

How to Add Your Favicon to WordPress

If you have access to your website’s FTP, you should upload your favicon file to the root of your WordPress installation. This is the top-level folder where WordPress is installed. It’s the same folder that contains index.php, wp-config.php, wp-settings.php, and all of the main WordPress folders.

Your WordPress theme might have an option for favicons. This is a screen from my website that shows the epanel that comes with Elegant Themes themes:

favicon-epanel

As you can see here, this particular epanel comes with a place to upload a Favicon. Depending on your particular theme, you might have something that looks very different than this, or nothing like this at all. In that case, just upload your favicon file to your website via FTP or your website host’s file management option.

I hope this was a helpful tutorial on how to add a favicon to your WordPress site!




Posted in WordPress. Tagged with: ,