Before we jump into adding a favicon to your WordPress website, let’s look at what exactly a favicon is and why it’s useful.

A favicon is a small square icon (16 x 16px) associated with your website. It’s used by browsers in the url bar, tabs, bookmarks and other places to help people visually identify your website. It was originally only intended to be used when you bookmark, or add a webpage to your favorites, which how it got it’s name (Favicon is the words “favorites icon” shortened together).

Add a favicon to WordPress

The above image is a snapshot of Google Chrome. You can see various favicons in the tabs area, including ours on the left. The favicons appear again in the favorites bar below the url.

Creating a Favicon

Normally a favicon will be your business logo or part thereof. Having a iconic style logo will help as you can simply drop the logo text and use the icon (WP Copilot is an example of this).

Once you’ve decided on the image to use for your favicon, you’ll need to prepare it by trimming whitespace around it and making it square. If you want to create a favicon with a transparent background you’ll need to save it as a .gif or .png file. Don’t worry about the size at this stage, it’s taken care of for you in the next step.

Once the image is ready, use an online favicon generator like this one by Dynamic Drive. Upload your image, download your favicon, which will be named favicon.ico.

Uploading the Favicon to WordPress

If you are familiar with FTP (used for moving files on a server) upload the favicon.ico file to your themes main folder, and the root directory of your website. Overwrite any old favicon files that are there with your new ones.

If FTP is not your thing, don’t worry there is a plugin for you! “All in One Favicon” is a WordPress Favicon plugin with a built in upload mechanism to upload a favicon to your WordPress installation.

Testing the Favicon

Once you’ve completed these steps, test your favicon by visiting your website and checking for it in the browser tab. Don’t worry if it is not there at first, you will most likely need to clear your browser cache to remove any stored copies of old favicons (cntl+F5 for most browsers). That’s it easy.