Favicons: How to create them and stand out

A favicon (short for “favorites icon”) is a small square image that represents a website in web browsers.

It is most commonly displayed in the browser tab (see the image above) and next to the page’s name in a list of bookmarks/favorites (see the image below).

Well-designed favicons are styled to match the logo or theme of your website. That way, users have a quick and easy way to recognize your website at a glance. Because of their tiny size, they work best as simple images or one-to-three characters of text.

I tend to keep several windows open at a time, so many that I can’t usually see the name on the tab, only the image. Favicons give me a quick visual that helps to immediately recognize and ultimately be able to easily maneuver from one site to another.

Sites that don’t have a favicon will show a generic image, which does not distinguish one site from another. So the goal is to create a favicon that is clear, memorable, and easy to see.

Benefits of Adding a Favicon to Your Site

• Brand awareness: When you use a favicon that reflects your business, people see it and get more familiar with your company. They’ll remember it later.
• Credibility and trust: If your site is missing a favicon, it will be conspicuous in its absence. On the other hand, adding one to your site will make your business look more professional, established and reliable.
• Easy to locate your page if it’s bookmarked: People don’t always remember brand names, but they recognize your business by its favicon.

A Bit of History

Back in 1999, the favicon was introduced in Internet Explorer as a way to help searchers tell bookmarked web pages apart from one another. They called bookmarked sites ‘favorites’ so they blended ‘favorite’ and ‘icon’ to create ‘favicon’. In December 1999, the favicon was standardized by the World Wide Web Consortium (W3C) with the recommendation of Hypertext Markup Language (HTML)

What Size and Format Should Favicons Be?

Originally, all favicons were created as ICO files—a format developed by Microsoft to store Windows program icons. Modern day web browsers let you use PNG icons as well with some browsers even supporting GIF, JPEG, and SVG favicons.

Generally, ICO favicons are now considered a bit outdated and most websites today have favicons in the PNG format. The reason for this is image quality: High cross-browser and cross-platform compatibility PNG favicons look a lot better in most modern browsers and devices. I like PNG because the background can be transparent, thus avoiding looking like a square and allowing the initial of your company to stand out. (I wish I could find an example of that.) Nothing wrong with it, it’s more of a preference.

Your favicon should be a square. The classic favicon is only 16×16 pixels in size, but if you want your favicon to look good on modern devices, you’ll want to use a higher resolution. WordPress requires 512×512 pixels for their favicon, which gets rescaled. The proper image will be displayed depending on its use, automatically.

How to Create a Favicon

Before actually creating and uploading your favicon, it pays to do a bit of planning. This tiny image will be representing you and your website, so you don’t want to slap something together in a hurry.

Keep the design simple. A favicon makes your business recognizable but doesn’t overwhelm the user with an intricate design. The sole purpose of this icon, remember, is to reinforce your brand to your audience and help them find you easier.

Favicons are very small, and therefore can’t contain much detail. To be effective, create something clean, brand-related, and recognizable.

There are several ways of creating a website favicon, such as:

1. Create it in a graphical editor like Photoshop, GIMP or PicMonkey.
2. Draw it up in special online services, such as favicon.cc and then download it from there in a suitable format.
3. Use an existing image of, for example, your logo.

Save the image you created for easy access. I like to keep my branding together in one folder. This makes it easy to locate.

Add Your Favicon to Your WordPress site

As of WordPress 4.3, all WordPress sites include a site icon feature that makes it easy to upload and crop an image to use as your favicon.

While there are other ways to upload your image, for most users, the simplest method is to use the WordPress Customizer, and therefore is the method I recommend. All you’ll need is an image that’s at least 512×512 pixels. WordPress will handle the rest of the process.

Navigate to Appearance > Customize in your dashboard, and select the Site Identity tab:

Along with some basic options, you’ll find a section here called Site Icon. Here, you can upload a 512 x 512 pixel version of your image, to be used as both a favicon and mobile app icon. You will instantly see what it will look like on a browser tab. 

This image shows the favicon already loaded. If you haven’t added yours, you will see a button that says Select Image. You can either choose an existing image in your WordPress Media Library or upload a new one (remember, you saved your image in your Branding folder).

If your image isn’t already a perfect square, WordPress will give you a chance to crop your image on the next screen. Use the box to highlight the portion of the image that you want to use for your icon.

Click Save and Publish. Your site icon will immediately show up in browser tabs on laptops, tablets, and mobile devices once published.

While there have been some useful plugins for adding favicons over the years, the WP team did a fantastic job integrating this feature into the Customizer. It couldn’t be easier these days. Prior to version 4.3, I created a favicon at favicon.cc and then uploaded it using my ftp program. This way is so much easier and quicker, and you don’t have to name it with a .ico suffix.

Ah, more time for other things.

If you prefer, I can create this for you. Just contact me to discuss it.