How to Add a Favicon to Your WordPress Site [VIDEO]

You’ve probably heard of a favicon before. I’ve heard numerous ways to pronounce it, but in WordPress, there is one clear, best way to add it—WordPress Site Icon. I’ll cover why a WordPress favicon is important, the benefits of using the Site Icon feature in WordPress, some general requirements, and a video to show you how to add a favicon to WordPress.

Why is a WordPress Favicon Important?

Tabbed Browsing

While it’s hard to find solid research on the how many tabs we have open at one time, it’s equally as difficult to dispute that it’s easily over a dozen. And for many of us, probably closer to 25 or 30. We’re always “busy” and “multi-tasking” (which, btw, there is no such thing as multi-tasking. It’s task-switching; but I digress.). Once you reach a certain number, your tabs run out of room for words, and only display a favicon.

Therefore, for all intents & purposes… a favicon is all we have left!

Smartphones

As smartphones become more of the norm, and mobile traffic continues to rise, it’s highly likely that your users are visiting your site from a mobile device. One way to make it easy for visitors to return to your site is by adding a shortcut to their homescreen. With one tap, the default browser on their phone will open up directly to your website, and they can start enjoying your content right away.

Branding

Let’s not forget the importance of your brand. Your favicon might be identical to your logo, or a representation of your brand. It communicates your beliefs, your ideas. It sets the tone with your customers. It builds trust. Your brand is what keeps you in business, and keeps customers coming back for more. Your favicon is an extension of your brand.

SEE ALSO: How to Add a WordPress Site Logo

Benefits of Using the WordPress Site Icon

App Icons

Adding a Site Icon in WordPress does more than just create a favicon for browser tabs & favorites. The Site Icon will generate 4 icons for the following use:

• 32x32px favicon for websites
• 180x180px app icon for iOS (iPhone & iPad)
• 192x192px Android/Chrome app icon
• 270x270px tile for Windows

App icons are used when users add your website to their home screen, for quick access to your site. iOS, Android & Windows all have different size requirements, but WordPress takes care of this for you.

Theme Independent

A WordPress favicon does not rely on your active theme. You can switch themes, change from a free theme to a premium one… and your site icon stays with you.

WordPress Favicon Requirements

• Your Site Icon should be a square image, meaning the width & height should to be identical. You can upload a non-square image, but you’ll be required to crop it into a square after the upload.
• In order for your icons to appear crisp across all applications, they should be at least 512x512px
• PNG, JPG & GIF file formats are accepted… though we recommend .png, with transparency

How to Create a Site Icon

There are many design programs & tools that make it easy to create a site icon. I’ll share two of them below, but before I do, make sure you have your website’s logo handy.

Logo File Format

Whenever creating a logo, or similar branding materials, vector graphics are preferred. Vector graphics are often created in Adobe Illustrator, and saved as either .ai or .svg files. Vector graphics can be scaled up or down infinitely, without losing quality. This makes them a great candidate for our site icon since it is used for multiple purposes.

If you don’t have a vector file, a .png is your next best option. PNG images allow for transparency, which means you won’t have a solid white box around your logo.

If you already have your logo, in one of these file formats, and it’s at least 512x512px, you can skip the next two steps about creating one.

Create a WordPress Site Icon with Photoshop

Although the recommended size for a Site Icon is 512x512px, it’s OK if it’s larger. WordPress will scale it down for you. Since you will likely need large, square icons for other marketing purposes (i.e. social media, avatars, etc.), I recommend something at least 800x800px.

1. Create a new Photoshop document
   • 800 x 800px, 72ppi, RGB color format
2. Find the highest-resolution (or vector version) of your site’s logo
3. Drag it into your Photoshop window
   • Center the logo, leaving a little space on all 4 sides
4. File > Save for Web
5. Save as a .png file, with transparency enabled

Create a WordPress Site Icon with Canva

Canva is a free, online design tool that makes it easy to create tons of different designs. They have over 50 ready-made sizes for social media graphics, books, album covers, post cards, presentations and more.

1. Start with their Social Media template (800x800px)
2. Upload your logo file
3. Place it onto the canvas
4. Download your image (.png)

The only downside to using Canva is that you need to upgrade to Canva for Work in order to use a transparent background. The free version will add a white background to your logo.

DesignWizard is another design software you can use for creating a favicon. It’s free version looks a bit limited, but if you aren’t enjoying Canva, consider giving it a shot.

How to Add a Favicon to WordPress

WordPress 4.3 introduced the Site Icon, which not only creates a WordPress favicon, but also the app icons for iPhone, iPad, Android & Windows homescreens.

1. Open Customizer

• Login to your WordPress admin
• Navigate to Appearance > Customize

2. Site Identity

• Click the Site Identity option

3. Upload Image

• Click Select Image under “Site Icon”

4. Crop Image

• If your image is over 512x512px, you will be presented with a crop screen
• Click & drag the corners of the dotted box until your are happy with your cropped icon
• Click Crop Image

Your Site Icon should now be active. You don’t even have to click Save & Publish.

WordPress Favicon Video Tutorial