Creating a Favicon
There’s a lot of discussion about how to effectively brand your business, and for good reason. After all, branding is the primary way of visually identifying your company. While you may already have a logo and other element elements in place, there’s one identifier you may not have considered, which could be important for brand recognition.
A ‘favicon’ is a tiny version of your main logo (or another visual that’s attached to your business), which appears in a user’s browser tab when they visit your site. Favicons enable people to quickly see what websites they’re currently interacting with. Fortunately, using these icons and adding them to your website is a breeze when your website is built with WordPress.
In this post, we’ll introduce favicons, and run through some of the best ways to create them. Then we’ll discuss how to customize yours. Let’s get started!
What Is a Favicon?
You’ve probably seen favicons all over the web, sometimes without realizing it. They’re very small icons – usually 16 x 16 pixels – which sit next to a page’s title in your browser’s tab bar:
Favicons are so tiny that they may feel like inconsequential elements of your website. Admittedly, they play less of a role now than they did in the pre-Google Analytics era. At that point, they were practically the only reliable measure of web traffic, since they could help you tally up how many users had bookmarked a specific page.
However, favicons still serve as an important recognition of your brand within browsers, bookmarks, links bars, and sometimes even URL fields. They can also be used as your site’s shortcut icon on smart devices.
In short, if you care about user experience and want to maintain full control over how your business is branded, you’ll want to employ a favicon on your website. Plus, it’s one of the easiest branding elements to implement!
How to Create a Favicon
Actually creating a favicon isn’t too difficult, and will be a cakewalk for visual creatives in particular. However, it’s still within the reach of less artistic people, since the icon itself is so small and simple. The process can be boiled down to the following two steps.
Step 1: Choose a Suitable Size for Your Favicon
While favicons can be as small as 16 pixels squared, they can also be as large as 512 pixels. As such, you’ll need to make a decision about the devices and resolutions you’d like to cater to.
Here’s a quick breakdown of some recommended sizes for favicons:
- 16px: This is a general-use size for all browsers, and represents the minimum dimension.
- 24px: This size is used for a ‘pinned site’ in Internet Explorer 9.
- 32px: Several tools use this size, such as a new tab page in Internet Explorer, a taskbar button in Windows, and Safari’s Read Later sidebar.
- 57px: This represents the dimensions for a standard (i.e. non-Retina) iOS home screen.
- 72px: This size matches a standard iPad home screen icon.
- 114px: More modern Apple devices will want to use this size, as Retina displays take advantage of double-standard dimensions for crisp viewing.
Of course, it can make sense to create favicons for all of these sizes if you’re expecting visitors from many types of devices. However, you can also simply choose the sizes that correspond to the platforms you’re targeting, and forgo the rest.
Step 2: Design Your Favicon and Save It in an Appropriate Format
Actually creating your favicon, will be a little more time-consuming. The way you do this will be subjective, of course, and there are a lot of different methods you can employ.
If you don’t have a preferred tool you can use, we’ll talk about some easy-to-use options soon. In the meantime, you’ll want to keep in mind the following rules of thumb when creating your favicon:
- Keep the design simple, as it will be often be displayed at such a tiny size that complex details will be lost.
- Consider your favicon an extension of your branding. In other words, use the same color schemes, fonts, and graphics as your main logo or other key branding elements.
- Create the largest size you need first, and then scale the favicon down as necessary.
Once you have your design ready, you’ll need to save it in the correct format. Many graphics packages enable you to use the .ico extension, and your base file should have the name favicon.ico. This file will be pulled when no other icon can be found. For favicons of different sizes, you can incorporate their dimensions into the file names.
Best Programs to Create a Favicon
If you want to create a favicon quickly, there are a number of tools you can to use. Let’s look at a few of the more popular and powerful options.
Favicon.cc is a leading favicon creator, and is very simple to use. You simply choose a color, paint each pixel, and then click on the Download button:
Faviconer is also a solid choice, with boasts a slightly nicer interface and better overall usability:
This tool is arguably more powerful than Favicon CC. You can create a higher-resolution file for modern displays, and even upload your own image.
Finally, there are also tools that let you convert a pre-existing image to a favicon – such as Dynamic Drive FavIcon Generator, and RealFaviconGenerator. Both offer flexibility when converting your favicon to different sizes, although we have to give an edge to the latter, based on its comprehensive options for sizing your files.
How to Change Your Favicon
Once you have a favicon created, you’ll still need to add it to your site. Fortunately, many WordPress themes enable you to upload your favicon directly within the Appearance > Customize screen in your dashboard.
You’ll want to head to the Site Identity > Site Icon section within the WordPress Customizer, which will give you details on how to upload your favicon:
Of course, your site may already have a favicon in place that you’d like to change. Maybe you want to use a more high-definition icon, or include a variety of sizes.
The good news is that we’ve already covered how to do this in a previous article – How to Add a Favicon to Your WordPress Site. Within, you’ll find a wealth of handy resources to assist you when creating favicons for your WordPress website, including some helpful troubleshooting tips.
Get Support for More Common WordPress Questions from WP Engine
Favicons represent a small brand marker for your business, and at WP Engine, we believe the little things matter most. Although our powerful, reliable hosting takes center stage, there are plenty of other ways we can help you build the perfect website.
For example, our Resource Center is packed full of useful articles, tutorials, and other advice on all things WordPress. If you need assistance, this library combined with our stellar support team should be all you need!