The 2020 Ultimate Guide to Favicons @ TwentySixForty

Tutorial Overview.

In this tutorial I will explain what favicons are, why they are important, things to consider when designing a favicon and how to put a favicon on a WordPress website.

Quickies.

What is a Favicon?
Why are Favicons Important?
How to Design a Good Favicon.
How to Add a Favicon to a WordPress Website.

What is a Favicon?

A favicon (‘favorite-icon’) is a 16 by 16-pixel icon used by web browsers to provide a visual cue and additional branding for a website. They are usually found in browser tabs, browser history lists, bookmarks, and RSS feeds.

browser tabs

Why is a Favicon Important?

Favicons are used in all modern browsers and are important for improving the user experience, building brand awareness, and establishing credibility. Favicons help website visitors easily identify and locate your links and tabs when multiple tabs are open. They help improve online branding, reinforce the legitimacy, and improve trust from website visitors. If you are not using a favicon, you will see a generic icon instead.

If you are not using a favicon on your website there is a good possibility your visitors may not take you as seriously as you would like. Favicons are the finishing touch on a website that says you pay attention to the details and are serious about what you do.

How to Design a Good Favicon.

Well-designed favicons are styled to match your brand or logo. Your website visitors should be able to take one look at your favicon and associate it with your website. Due to their small size, favicons are a unique design component and take some consideration to do effectively. Using your logo as your favicon is ideal but not always possible. Favicons should be made with simple shapes and vivid colors and many logos are too detailed to make an effective favicon.

How to Add a Favicon to a WordPress Website.

WordPress recommends uploading an image that is 512 by 512 pixels. That image is then automagically resized to be 16 by 16 pixels and used as the favicon.

Create an image that is 512 by 512 pixels. This can easily be done with Photoshop.
Login to the admin area of the WordPress website.
In the Admin Sidebar, go to Appearance > Customize.

appearance customize