How To Make One For Your Website: What Is A Favicon?
By Eden Spivak (Design Expert & Writer),
Adding a favicon to a new blog could be frustrating sometimes if the original image (logo) comes with a poor quality, but you could still go along with below steps to get started.
When publishing their newly created website to the world, too many people overlook a little finishing touch that can make a big difference – the favicon. These tiny additions to your website leave an impression that’s much bigger than their actual size, so don’t underestimate their power and importance. Here’s everything you need to know about favicons and how to create them:
What is a favicon image
A favicon is a small, 16×16 pixel icon used on web browsers to represent a website or a web page. Short for ‘favorite icon’, favicons are most commonly displayed on tabs at the top of a web browser, but they are also found on your browser’s bookmark bar, history, and more. In some instances such as on Google Chrome, they even make an appearance on your browsers’ homepage. In other words, the favicon serves as your website’s icon, or a visual mark with which to identify your website around the web.
Why favicons matter
Despite their miniscule size, favicons are of great importance to any website, improving its user experience, branding and professionalism:
User experience: Favicons act as memorable visual cues to your website, enhancing its user experience. They help users easily locate your website’s tab on their browser and across different applications such as the bookmark bar, making it easier to come back to the site over and over again.
Branding: For a truly cohesive brand, it’s important not to overlook even the tiniest of details. Favicons contribute to the branding and visibility of your website, extending your style and language outside of the website and into the web browser.
Professionalism: Favicons add to the legitimacy and professionalism of your website, making it look sharp and thought-out.
How to make a favicon
For creating your favicon, you might want to consider hiring a professional designer (if you already work with one, you can include a favicon in your agreement). You can also create a favicon yourself using a design program of your choice, or several online tools. One such recommended tool is the Wix Logo Maker, which allows you to create a professional and personalized favicon to best reflect your style and needs.
Size: The optimal size for creating a favicon is 16×16 pixels, which is the size in which they are most commonly displayed. However, they can sometimes appear in larger dimensions too (such as 32×32 pixels).
File: The preferred file format for a favicon is JPEG or PNG.
Transparency: In case your design has a transparent background, be sure to save your file as a PNG and with its transparency setting turned on.
Tips for designing a favicon
Designing something so teenie-tiny may seem like a walk in the park. However, the fact that website icons are so small means that you have to be extra accurate, as there’s no room for error. Here are a few tips on creating a favicon that best suits your brand and website:
Simplicity: The small size of favicons requires your design to be precise. Refrain from going into too much detail such as little lines, texture or shading. Instead, aim for a bold, clear and simple icon that’s instantly recognizable.
Artist and illustrator Adam J. Kurtz’s Wix website is a great example of a simple favicon design, with its distinct yellow star. Another example is jewelry designer and Wix user Ilaria Bonardi’s favicon, which is made up of three simple dots.
Brand identity: A favicon should encapsulate the spirit of your website and brand, retaining the same visual language and color scheme as the rest of your website.
For fashion brand Sorry’s Wix website, the X shaped favicon is a continuation of the same bold, black-and-white visual language as their clothes and logo. Similarly, eBay’s favicon merges the brand’s colors with a little shopping bag icon, perfectly capturing the site’s spirit.
Little to no text: If you want to include typography (text) in your favicon, such as your brand name, limit yourself to one to three characters. Initials or abbreviations are often good solutions for shortening text.
The Wix website for the non-profit organization Arte, uses the A initial from their logo as a favicon, with an added neon green background to draw attention. Alternatively, the favicon adorning Brooklyn-based Red Fern’s Wix website has no text at all. Instead, it uses only their leaf icon, achieving maximum readability.
Logo use: While some logos can look their best even in favicon size, most are hardly legible when shrunken down. If you want to use your logo as a favicon, a few adjustments are probably needed. Omitting the tag line, or using only one initial, are some of the ways to make logos work in small sizes.
Notice how Google’s favicon is slightly different from its logo, while embodying the same design values. The favicon shows only the familiar G initial, while seamlessly incorporating all four of the brand colors into that single letter. A different approach was taken by illustrator and Wix user Charlotte Mei, who uses the initials from her hand-drawn logo as her favicon.
Color: Keep in mind that the favicon will be displayed on different colored backgrounds, depending on the context and browser used. Therefore, make sure to test your favicon on gray, white and black backgrounds before finalizing the design.
How to add a favicon to your Wix site
Wix sites automatically include a standard default favicon, but you can customize it by upgrading to a Premium Plan and connecting your site to a domain.
You can easily change your favicon on your Wix site:
1. In your site’s dashboard, go to Settings.
2. Click ‘Manage’ next to ‘Favicon’.
3. Click ‘Upload Image’, and select an existing image or click on ‘Upload Media’ to upload an image from your computer.
4. Click ‘Add to Page’. You’ll now see a preview of what your favicon would look like on your browser tab.
5. Click ‘Save’, and ta-da! Your website now has a favicon. It will appear on your website’s tab once you hit publish.