Before you Make your Favicon: WordPress Guide

Welcome to Part 2 of our ongoing series on Favicons, and let’s set the ball rolling, continuing from where we left off last time.

Since we agreed in the previous part that a Favicon is both essential and pretty easy to make, let’s now look at two steps needed to get to the Favicon you have in mind.

Deciding on a Favicon Size

A Favicon can range in size from 16 × 16 pixels all the way to 512 × 512 pixels (a.k.a. 512 px), depending on the use case. So, at some point, you’ll have to decide what devices and resolutions you’d want to support with your Favicon. Refer to the list below to figure out which size works for you:

• 16px is the size of choice for all browsers as it is the smallest possible size for a Favicon. This also possibly makes it quite pixelated or blurry on clients that support larger sizes.
• 24px is the size of the icon that IE (Internet Explorer) 9 uses for its ‘pinned’ sites.
• 32px is a Favicon size used for quite a few visible elements – an IE new tab page, Windows taskbar elements, and the Read later sidebar in Safari.
• 57px is what you’d need if you wanted the icon to display correctly on an iOS home screen that’s ‘standard’ resolution – as in it isn’t Retina.
• 72px is the size for a ‘standard’ resolution iPad home screen.
• 114px is what more and more of the modern devices use, especially when you have Retina displays that like to make the most of ‘double-standard’ resolutions so that everything looks clear and high quality.

It goes without saying that making your Favicon in all these sizes would be the best bet, as that’ll ensure it displays correctly for all visitors, browsers and devices. Alternatively, it also makes sense to just pick the devices that you specifically target and just use those sizes.

The Design Phase, and Picking the Right Format

Favicon creation can take a bit of time, and it depends on other factors how you’ll end up going about it, but we’ll look at that later and see what methods and options are at your disposal.

Remember these pointers, though, while you’re only just designing the Favicon.

• Simplicity. No matter how big your intended Favicon size is, it’s still a small part of every screen it’ll be displayed on, so avoid busy designs and make it easy to understand and recognize.
• Brand Consistency. At its heart, the Favicon is your tiniest brand logo or identity – so don’t stray from the colour schemes, fonts, or logo elements that you use for your brand logo or any other components in your branding.
• Make it Big. We can’t stress this enough. Anyone who has zoomed into a low-resolution picture, or seen a regular 16px Favicon displayed on a Retina screen can confirm that it defeats the purpose of your Favicon if you start small and then ‘upscale’ it to higher resolutions. Additionally, a larger Favicon is also way easier for you to work with when creating.

The design you come up with will also need to be saved in the right format. The ‘.ico’ format is available in most graphic design suites. You’ll need to save the base Favicon file as Favicon.ico, as browsers and operating systems will default to this file if no other icon is available. For differently sized versions, you can include the pixel values in their file names.

Now that you know what you need to bear in mind before you embark on making the Favicon, Part 2 of this Favicon series has served its purpose, Remember we said this process was time-consuming? We’ll join you next time with information about specialized tools for Favicon-building and adding that’ll make it quick and painless for you.

More on The Topic

• Enhancing User Interaction on WordPress Sites with Innovative Design
• Custom WordPress Themes: Crafting Unique Digital Identities for Businesses
• Navigating the Future of Web Design with WordPress at the Helm
• The Advantages of Custom WordPress Themes for High-Performance Websites
• Unlocking the Full Potential of Gutenberg for Corporate Website Design