How to easily add a favicon or site icon to WordPress

Web Hosting

What is a favicon or site icon?

A favicon or site icon is the small icon you see on the left side of a browser tab. It is usually a company logo or a small icon used to represent a website. It is also used as a home screen icon on mobile phones if you create a home screen shortcut to a website.

favicon examples
These are favicons or site icons.

What should your favicon look like?

The last thing you want on your website is a blank favicon like the one below. It makes the site look less professional and having one enables users to quickly identify your site and associate it with your brand or company if you have one. Even if you don’t have a company brand or logo you should still have a favicon on a personal site. It can be a single character or even a couple characters. Anything over two characters might be too difficult to identify though so be careful when choosing. If you do end up choosing something that is too hard to tell what it actually is, you can always go back and change it.

blank favicon
A blank favicon.

Your favicon doesn’t have to be complex, in fact, it should be fairly simple. Since it is going to be so small displaying on a browser tab it should be simple and easy to identify. Anything too complex is going to be hard to identify.

What size should your favicon be?

According to the WordPress Site Icon section within the Customizer, which is where you will be uploading your favicon, the recommended size is 512×512 pixels. Although many other resources I found online say it should be anywhere from 16×16 pixels up to 310×310 pixels and practically everything in between. I have used 512×512 pixels and have had no problems, but I have only tested what my favicons look like on Chrome, Firefox and Safari on a Mac and they look fine.

What file format should your favicon be?

Ideally, your site icon should be a .ico file but .png or .gif will also work. The .ico format is a better option because it is compatible with all browsers, eliminating any errors that might occur with displaying your icon. Modern browsers will automatically look for a file called favicon.ico when looking for your site icon. A .ico file can also hold multiple files inside so you don’t need multiple sizes of the same icon.

How to create a favicon

There are tons of sites out there to help you create your site icon. If you need an icon created from scratch try a site like Fiverr to have a site icon built for you for only $5. There are also free favicon creation sites like Favomatic that let you upload a logo or image. Some of these also have a drawing feature that allows you to create your own icon right on the site like 1and1. If you are looking to create an icon with just characters and a cool font try out favicon.io.

How to add a favicon to your WordPress site

Once you have a favicon created you need to add it to your site. Thankfully it’s pretty easy with WordPress. See the images below or follow these steps:

  • Just go to your WordPress Dashboard > Appearance >  Customize.
  • Then select Site Identity and under the Site Icon section select the Select image button. Upload your image to the WordPress Media Library and click Select to set it as your site icon.
  • Click Publish in the Customizer and you are all set.

Congratulations, you have just added a favicon to your WordPress site.

wordpress dashboard menu
wordpress site identity
wordpress site icon
I build and maintain multiple WordPress websites. By using the experience gained from building these sites I help others create and customize their own websites.
Posts created 27

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top