Simple and Effective Tips for Designing Your Website’s Favicon

Favicon magnified

A favicon is a small, square icon used to identify your site in a web browser. The graphic is often a simplified version of your logo or a related piece of branding.

They display along with your website title in various locations. One such location is the bookmark toolbar and menu on the majority of browsers. Browser tabs and Google search results may also feature your favicon, depending on the web browser you use.

So, how do you create them and what should you focus on? Find the answers below. 

Decide on the imagery

A favicon should be eye-catching, related to your brand, but, above all else, simple. Whenever possible, design a favicon using the logo or recognizable parts of it.

A logo mark is a perfect candidate for your icon. Isolate it from the rest of the design, simplify it as much as possible without modifying it beyond brand recognition, and make sure it is readable at a smaller size. If you do that, your favicon is ready to go.

Complex and text-based logos can be a bit trickier. One option is to choose a prominent, single element of your logo. Considering a text logo, it might be the initials or first letter of the business name. Design your favicon to highlight that element in its simplest form. Another option is to use an image that relates to your brand. Be sure the chosen photo represents the brand, and the image subject is unmistakable at the small size. You do not want a misinterpretation of the image subject.

Use colors and a well-defined logo element to set you apart from other brands on the internet.

Pro Tip: Do not design an icon with words longer than three letters. The display size is too small, and readability will be difficult, if not impossible.

Pinter's Gardens & Pumpkins' & Decorah Rental and Sales' logo simplified to a favicon

Check the dimensions

WordPress suggests favicon images be no less than 512 x 512 pixels. That size may feel large when considering that the icon is typically displayed at 16 x 16 pixels. In the past, multiple files sizes were necessary to accommodate different browsers and devices used by visitors. Because WordPress requests a large image, they minimize the possibility of pixelation due to stretching an image beyond its original size. This practice saves designers and developers time. WordPress automatically resizes the icon to fit all devices with a single file.

No matter how you are building your site, the favicon must be a square. The graphic inside is not required to fill the allotted space, nor must it be square. Choosing not to utilize all the space is sometimes necessary to retain the integrity of the original logo design. There is not much space to work with; use as much of it as possible.

Saving your file

Save your favicon as a png file. This file type allows you to eliminate the white background automatically created when saving images as a jpg. The quality image will have a transparent background letting your icon stand out.

 

The space utilized for a favicon is tiny. The favicon should be consistent with your branding while being legible and recognizable. No amount of squinting will allow your visitor to distinguish the complexities of an over complicated favicon.

Recent Articles

Categories

Share


Last Updated: December 4, 2023