Small detail, surprisingly visible: especially for people with twenty tabs open.
A favicon is the small icon that appears in the browser tab, in your bookmarks, and sometimes in search results. It seems like a detail, but it is one of the few brand elements that remain visible when your page is not in view: for someone with many tabs open, it is the only thing that makes you recognizable.
IN COMMON LANGUAGE
What you need
An SVG scales to any size and is the most useful basis. In addition, a PNG for older browsers and a larger size for the home screen of phones.
Design for small: A reduced logo with fine details becomes a blob. Usually one letter or one shape works better than the entire logo.
WHY IT MATTERS
Where things go wrong
Reduce the entire logo to sixteen pixels. What works on stationery is unrecognizable at that size.
And don't forget the version for the home screen: anyone who pins your site to their phone and gets a gray area will see an unfinished impression.
- SVG as base — scales to any size.
- Design for small — one letter or shape.
- Also a version for telephones — for the home screen.
- Test on a dark background — browsers have dark mode.
- Also appears in Google — next to your mobile search result.
FREQUENTLY ASKED QUESTIONS
More about a favicon
Will my favicon appear in Google?
On mobile it often does, next to your search result. A recognizable icon helps more than you might think, because it is the only image in a list with text.
What formats do I need?
An SVG covers most of it, with a PNG as a fallback and a larger size for phone home screens. We supply this as standard.
Can I use my logo?
Usually not unchanged. When reduced to a tab icon, details disappear. A simplified version: one letter or one shape: works better.
CONTINUE READING
Of course, continue reading about this subject.
Recognizable in every tab?
We supply the complete icon set with every site, including for telephones.