Favicons are something we’ve all seen, whether we know what they are or not.
If you take a look at your open browser tabs right now, you’ll see Webflow’s ‘W’ on this open web page. This small graphical embellishment is known as a favicon.
Let’s take a closer look at where favicons came from, how they’re used, and tips on designing your own.
The beginning of the favicon
Favicons trace all the way back to Internet Explorer 5. At the time, they lived in the root directories of websites, with the rather simple name “favicon.ico,” which is still in use today. If you favorited a website on Internet Explorer, a favicon would appear next to it in the address bar as well as your bookmarks list.
In addition to their role as a design element, favicons were also used as a primitive means of tracking visitor counts. One could gauge a website’s popularity based on the number of times a favicon had been downloaded. Thankfully, metrics and measuring blog visitors have come a long way since these rather crude beginnings.
Where you’ll find favicons
Favicons show up on the left-hand side of your desktop browser tabs. They may be small — generally at a resolution of 16x16 or 32x32 pixels on retina-based screens — but these bite-sized pieces of visual branding should not be overlooked when putting together a website.
A favicon image may take the form of a stripped-down version of a logo, a symbol, or even just a single character. Since they must fit into the small space afforded by modern browsers, they need to be simple, yet impactful.
- If you’re looking at the HTML code of a website that has a favicon, you’ll see it in the <head> tag, and in the form:
- You may also see additional favicon.png sizes in the code, to accommodate different apps and devices, we'll be getting into this a bit later on in this post. Favicons aren’t limited to browser tabs and can be seen in other places that list or display websites.
- You’ll find favicons in your browser’s history. Whether you’re using Chrome, Safari, Firefox, or any other capable browser, a favicon will appear next to the website it represents. Here is how they look in Google Chrome:
- Favicons also appear in Google search results and autosuggest in the search bar, as well as bookmark dropdowns and browser toolbars. In these busy lists, favicons allow us to identify websites without even having to read any of the text.
Use Webflow's visual development platform to build completely custom, production-ready websites — or high-fidelity prototypes — without writing a line of code.
How to use favicons — the right way
Favicons serve as visual guides, creating a more consistent user experience and overall brand identity. Just as you put effort into the harmony of CSS styles that come together in a web design, you should also pay attention to how a favicon fits into your overall theme and branding.
Examples to think of when designing your own favicon include YouTube’s play button, Twitter’s bluebird, and Google’s colorful ‘G.’ These favicons are unique, immediately identifiable, and make the brand easy to spot when scanning tabs.
When creating an equally memorable favicon — here are some things you should take into consideration
Make your favicon small but legible.
There are several favicon sizes to consider, but keep in mind at their smallest iteration of 16x16 pixels they need to be legible. This means coming up with a visual hook that captures the essence of a brand, giving it instant recognition.
A great example is this use of crisp text from one of our favorite design websites Behance. Even at this small scale, there’s no lack of definition, and the image appears high quality and easily identifiable.
Don’t overdo it
With such a limited amount of space, it’s best to take a minimalist approach. One of the easiest ways to create a favicon is to take an element from your preexisting logo.
Here are some examples:
- PetSmart has a rather large logo that would overwhelm the confines of a browser tab. For their favicon, they use just the bouncing red ball from their logo. This single graphic is an excellent representation of their brand, while still utilizing clean and simple design.
- When your logo is also a symbol, it’s easy to use it as a favicon. Apple’s logo is a great example of this.
- Instagram uses its camera logo for both its app button and favicon, which creates a sense of brand continuity across platforms.
Keep it to a few characters
Along with pulling a symbolic element from a logo, you can also use a character in a favicon. There are many brands out there with favicons that use a single letter to represent who they are.
Can you guess whose favicons these are?
The swooping letter “D” is instantly recognizable as Disney, the stylized P in a red circle is from Pinterest, and the blue square with “in” ties back to LinkedIn.
When designing a favicon, whittling it down to an essential letter or two works well in representing a brand.
Consider the color scheme
Beyond what your favicon is, how it utilizes color is just as important. Here are some things to consider when deciding on what colors to use:
- The background color of a browser tab is generally grey or white, or sometimes black if it has been switched to night mode. When designing a favicon, consider how it may appear against different background colors. For example, Marvel uses just red and white, which is a solid combination that stands out no matter what color a tab may be.
- Your canvas for creating a favicon is a tiny space. Use a refined palette, with colors that look good together at a minuscule scale.
- Use colors with enough contrast so that they’re distinct from one another. Clarity and definition are key.
Using a vector-based graphic is best
While it may be tempting to create something quick in Photoshop, using vector graphics will help you in the future. When you craft a favicon in Illustrator, Sketch, Figma, or another vector-based design application, it’s much easier to resize and alter it later on.
Many designers start with an SVG-based favicon graphic and then convert them into non-vectorized files like a png, gif, jpg, or ico.
Consider creating favicons with a favicon generator
Favicon generators offer a quick way to come up with an icon and generate multiple sizes. They’re also handy in producing HTML code you can implement into your designs by displaying them on different apps and devices.
Use the right file format
Today, favicon.ico still has widespread support across a variety of browsers. However, more contemporary websites tend to use favicon.png. Keep in mind that Internet Explorer only supports .ico, and the .png format will not display. You can get ahead of this issue by storing both a .ico and .png version of the favicon so it will appear properly on multiple browsers.
How to size favicons properly
The standard size for favicons is 16x16 pixels, but most designers start with 32x32 pixels to accommodate retina screens. This way, the larger favicons show up nicely on retina screens and can also be scaled down.
Of course, there are other favicon sizes out there, and it’s worth mentioning that Apple-touch-icons, like those for OS Safari require dimensions of 180 x 180, Android Chrome needs a favicon at 192 x 192, and Opera Coast works best at 228 x 228. Designers generally create a variety of different sizes to accommodate both desktop browsers and other applications.
Don’t skimp on favicons
Favicons are important. Without them, our open browser tabs feel empty. We’re left with a bunch of grey space with text, which is far from noteworthy.
Favicons provide visual cues that help people recognize and — more importantly — remember your brand. If you want your brand and site to be memorable, this tiny icon can pack a big punch.
Published
September 8, 2021
Category
Resources
.jpg)
