The favicon is pretty important and it is easy to implement into your website design. Displaying a favicon is critical for site recognition in a browser full of tabs, and it is a great opportunity to expand your site’s branding. Bottom line, your site will look incomplete without one.

What is a Favicon?

First things first; A favicon is the little icon that browsers display next to a page’s title on a browser tab, or in the address bar next to its URL. It also is used when you bookmark a page.

Here are some favicon examples:

favicon

favicon

favicon

How to Create a Favicon for Your Website

Size

Favicons are displayed sized at 16×16 pixels. To create a graphic this size, I like to create a favicon image sized at 500x500px and saved for web. It is important to keep the file size under 100kb. Once your favicon image is uploaded to your root directory, or WordPress theme, it will be compressed down to the smaller size while maintaining its quality.

What To Show

Because you only have 256 pixels to work with, it can be a little challenging to know what to include in a favicon. Here are some common ideas:

Use your logo (or part of it)
If your logo doesn’t display well at such a small size, use a stylized version of the first letter (or letters) of your site or business name
Use an icon that communicates what your site does or represents (for example, Google Analytics uses a tiny chart for their favicon)

The Image Format

As the name suggests, favicons must use the icon (.ico) file format. In the past, it was a hassle to convert into this format. However, thanks to easy, free services, this is no longer the case. All you need to do is create a 16×16 image. The .ico format supports transparency, so you’re not limited to creating a square icon. If you want to take advantage of transparency, use the .gif or .png format when creating your image.