Favicons: Small but Mighty Brand Boosters
A powerful, effective branding strategy is made up of several elements working together: logos, colors, taglines, tone of voice, fonts, and images.
As more companies expand their online presence, all these elements must translate to the digital experience.
A “favicon” is a small image that represents a website. If you’re like many people, you have at least several tabs open on your web browser right now.
Take a look at the favicons along the top.
Typically, they feature a small logo, image, or the first letter of a company’s name.
The New York Times features the stylized T from its logo, DropBox uses a blue box, and Google has its multicolored G.
Favicons were introduced more than 20 years ago by Internet Explorer to help searchers distinguish among bookmarked webpages, or favorites, creating the portmanteau from “favorite” and “icon.”
Favicons appear in several places:
- Browser tabs
- Bookmarks
- Browsing history
- Google search results on mobile devices
Designing a favicon
Web hosting company IONOS’ mission is to make information technology easy for everyone to use, and it provides one of the many online options for a free favicon generator like the one from IONOS.
Companies can upload their logo into the favicon generator, and it will automatically be converted to the proper size and format for a favicon. The favicon generator can also create a favicon from text or letters.
Once created, download your new favicon, which includes instructions and HTML codes.
Text versus images
A couple of things to consider regarding favicon design. If you’re using your logo as a jumping-off point, remember it needs to be recognizable at the favicon’s small size.
If you don’t have a logo yet, start creating one—and keep in mind what it (or a part of it) will look like when shrunk down to the size of a pencil eraser. Check out some options for online logo makers here.
The standard size for a favicon has changed over the years, and different contexts require different sizes of favicons, but if yours looks good at the smallest possible size, it will look good larger, as well.
You should strive to support a broad variety of devices and operating systems, including Android, Chrome, Safari, and Apple Touch.
Images are the easiest for favicons, but if you have a text-based logo, such as clothing retailer J. Crew, that wouldn’t be readable at 16 by 16 pixels, use a bit of the logo, ideally the most important or recognizable piece. J. Crew uses a black background with a white “J.” for its favicon.
TIP: Favicons are not marketing tools! Don’t incorporate prices or language like “new” and “updated.”
Color and format
Ensure the colors used in your favicon match the rest of your creative assets. Also, don’t be afraid of monochrome, which can enhance small designs and make them pop.
Keep in mind that the tab showcasing your favicon may have a white, black, or gray background.
A more advanced creative option is to make the favicon interactive, for example, Google Calendar’s favicon displays the date and productivity software Trello’s favicons change color depending on which of your boards are open, which is a helpful feature for keeping track of things.
Once you’ve settled on a design and color, export your favicon, and get ready to upload it. PNG format is the most widely accepted, but you’ll need an ICO format to support Internet Explorer.
TIP: Often, online favicon generators create files that are compatible with and support the individual specifications of all browsers.
Small wonder
Favicons are a smart, functional part of an interface, and, even though they’re small, they’re considered a major contributor to a positive user experience.
Google also recently started including favicons in search results, further increasing their value.
According to a blog post from Google, “with this new design, a website’s branding can be front and center, helping you better understand where the information is coming from. … The name of the website and its icon appear at the top of the results card to better anchor each result.”
Many web designers often comment on well-designed favicons—because great ones stand out. Think bright, clean, and simple so visitors will more easily be able to remember and recognize your site in their bookmarks and tabs for future visits.