What’s the point of creating a favicon for your website? Apparently, this minor detail is a part of forming your whole brand’s look and should be taken seriously. If you still think that it isn’t worth your attention, read on and find out why a well-designed favicon is a must for any company that wants to succeed online.
Want to get an eye-catching favicon for your website? Here you will find useful tips and workable solutions supported by the best favicon examples. We provide a list of platforms where you can create a favicon for your brand and describe how to do it in Figma. Let’s empower your online presence!
What is a Favicon Image?
Why do You Need Favicon Icons?
Best Favicon Examples
Favicon Design Tips
Where to Create a Favicon
How to Make a Favicon in Figma
What is a Favicon Image?
When you are a new player in the ecommerce field, you might not know about favicons at all. But if you need an online business card to represent your website, a favicon is the tool that you are looking for. It is a small logo that you see in the left corner of the tab when opening a website. A favicon helps users to recognize a brand among lots of browser tabs even without reading its name. How? We perceive images faster than words. Thus, when your website is opened together with the websites of your competitors, a favicon is specifically important to help you stand out.
Why do You Need Favicon Icons?
Favicon is obviously a small but powerful tool as it may have a big influence on your company’s promotion and recognition. If you still don’t believe that you need to take favicons serious, there are some more reasons to change your mind.
- User experience. This tiny image saves time on searching for a needed tab. As a result, favicons enhance the usability of the web interface and help to provide a positive user experience.
- Branding. Favicon is a catchy element that also helps users to remember the brand and its logo. A well-designed favicon can increase your brand awareness. Moreover, a favicon gives your website a more professional look. Have you ever seen a top brand without a favicon?
- Search engines. Most of the search engines like Google demonstrate website favicons in search results close to the title. It simplifies the process of searching for a specific link. Favicons help your regular customers to find your website and not waste time reading the descriptions.
Best Favicon Examples
There is a great variety of good favicons that could be used as examples but here we are going to discuss favicons that belong to different Google services. You may wonder why specifically Google? They use similar favicon style for all of their services and we would like to underline the elegant simplicity of their forms and colors.
Google favicons can be considered one of the best examples of how the set of favicons can follow the same style and concept, combine similar elements but still has enough specific features that single out every sign. It is not just a set of minor elements but a clear composition.
People are more likely to understand the idea and the message that the brand wants to share with the help of favicon when the structure is clear and simple. On the favicon example below you see not just an icon but a structured composition. When you create a favicon right and follow some rules, you can design an image that will be easy to perceive and remember.
Favicon Design Tips
Wondering how to create a unique favicon that will match with your website’s design? This tiny icon represents your brand as it is your first image that the users see. To help you with this web design task, we’ve created our top tips necessary to design a perfect favicon for your ecommerce.
Keep it simple and use the canvas right
You won’t disagree, that an icon with lots of elements may look messy and irritate visitors. One of the best approaches is to make a favicon simplifying your current logo. However, if you use the logo, take into account that its canvas has a square form. So, you will have to adapt the logo, if it doesn’t fit.
Choose the right colors
Picking colors for the favicon icon, pay attention to contrasting ones like yellow and blue, black and white and others. A favicon has a small resolution and it will be easier for users to perceive simple shapes and colors.
Use abbreviations
Designing a favicon image, many business owners prefer to use an abbreviation or capital letter of the company’s name. Here the aim is to make all the letters easy-to-read. It is not a good idea to use complex sophisticated fonts – simplicity is the key. Keep the abbreviation short and comprehensible.
Create two favicon versions
Why do you need two variants of a favicon? Different browsers have different tab background colors – white, grey, black and others and it should be taken into account when you design the image. To make sure that it all works well, create a logo on transparent and solid color backgrounds. A favicon with transparent background is used in the URL line, browser tabs and other places near your website name. While a favicon with a solid color background is suitable for bookmarks and context menu. After the favicon is ready, you should check how it looks in different browsers.
Pick appropriate sizes
The standard favicon icon size is 16×16. It is used by the majority of desktop browsers and can be viewed in the address bar, tabs and bookmarks. However, this favicon dimension may be too small for other places. There are other favicon sizes used by different websites and devices that we are going to list below:
24px – bookmarked website in Internet Explorer 9.
32px – new tabs in Internet Explorer, Windows 7 taskbar, Safari side panel View later.
72px – iPad home screen icon.
96px – Google TV favicon.
114px – iPhone home screen icon.
128px – Chrome online store.
195px – Opera speed dial.
Consider the preferred file format
Windows ICO is an original favicon format and is currently used by the majority of browsers. The advantage of ICO is that it can contain several bits and resolutions what is useful for Windows. ICO also offers a 32px icon that works best for Windows 7 and Internet Explorer taskbar. It is also the only format without the element.
PNG is one of the best formats to use. It is user-friendly as you don’t need any specific tools to create a PNG image. It supports alpha transparency and you get a file of the smallest possible size. However, you can’t use PNG for Internet Explorer since the browser doesn’t support this format. Internet Explorer supports only ICO files but this browser is not as widely used as the others.
SVG is a format that is used and supported only by Opera browsers.
GIF files are supported by outdated browsers. Such files usually attract the attention of users due to animation but quite often they irritate the user after some time. It hardly can be called an advantage.
JPG is not widely popular format and don’t have a high resolution like PNG. It also has a small icon size what result in losing original JPEG benefits.
APNG is an animated PNG used and supported by Firefox and Opera browsers. But it has the same problems as GIF files – they distract users’ attention and may have a negative influence on them.
Where to Create a Favicon
After you have chosen a file format for your favicon, you probably wonder where and how to design these icons. To generate a favicon automatically, you need to pick an appropriate image, your brand logo, abbreviation and websites where you can do it. The internet is loaded with either free favicon services or paid. But it doesn’t guarantee that all the available services will design proper images. You can choose a service among these favicon generators:
https://favicon-generator.org/
https://realfavicongenerator.net/
https://favicon.io/
https://favicon.cc/
https://genfavicon.com/
Creating a favicon on Favicon Generator for Real you need to follow these steps:
- Choose an image for your future favicon. If it fits the square frame, click the Continue button.
- If the image fits with the frame, press on Continue with this picture.
- Customize the image and favicon parametres according to a place where the icon will be used like Favicon for iOS – Web Clip, Favicon for Android Chrome, Windows Metro, macOS Safari and others. Fill out Favicon Generation Options. When everything is done, click on Generate.
- Finally, we can install the favicon. Pick Favicon package to download it. As a result, you get an archive with different favicon resolutions and favicon formats.
Online generators are not the only favicon source. You can use Photoshop, Illustrator, Adobe XD, Sketch, Figma or other less popular solutions.
Create Favicon in Photoshop
If you decide to work with Photoshop, you need to install an additional plugin provided by Telegraphics as Photoshop doesn’t support ICO files. If you don’t want to download it, you can create a picture in Photoshop and then upload it in one of the online services to change the format. On top of that, Photoshop doesn’t work with vectors. So, there can be some issues when you need an SVG format. It is a good tool when you want to create a custom favicon image but the absence of needed formats still makes favicon creation in Photoshop time-consuming.
Create Favicon in Illustrator
When you need an app to work with vector graphic – Illustrator is the best solution. This service allows to draw a custom favicon in vectors and save it in SVG but there can also be some issues with ICO format. In any case, Illustrator is a better option for favicon creation than Photoshop as you can easily change the size and format not losing image quality.
Create Favicon in Adobe XD, Sketch & Figma
All these programs are similar in their functionality. Here we can work either with vector or raster graphics. These solutions are popular among UI\UX designers who use them to create prototypes and layouts of websites and apps. The programs also have certain restrictions on the ICO format. But they are perfect when you need to prepare a picture to upload in online favicon generator.
Offline programs are a must for a professional favicon. If you need to know how to create a favicon in Figma, keep reading the article and follow our steps in designing process.
How to Make a Favicon in Figma
1. Create a 128×128 frame.
2. Using instruments, develop graphics or abbreviation for the favicon.
3. Change the favicon dimension using the right panel, if necessary.
4. Select and click on the Export button on the right sidebar. Exporting the favicon, we can set the format: .png, .jpg, .svg, .pdf.
5. If you need an ICO favicon, load it into one of the online generators mentioned above.
Why animate a favicon?
Why do you need an animated favicon? We have already mentioned that animated favicons may draw too much attention. However, animation also has some advantages. Imagine a user who has lots of tabs opened in the browser. Several tabs are for social networks or Netflix and another tab shows that some file is downloading. Using another tab, they don’t know whether the loading process is over or not. With the help of an animation, you can improve user experience and solve this problem. So, they won’t need to switch tabs all the time to check and lose their time. In this situation, an animated favicon is a helpful solution.
If you want an animated favicon, you can do it using CSS, in Photoshop in the GIF format or originally developed an animated picture. But remember that the favicon won’t be animated all the time.
Conclusion
Developing the design of your website, you need to take into account all the details. Favicon is a small icon in a browser but it plays a significant role in your online business awareness. In this article, we have covered the highlights of favicon creation and use. With our tips and guide, you can design an eye-catching favicon that will help to empower your online branding and add legitimacy to the website.
Want to know more about web design tricks? Share your ideas in the comments below and we will be happy to write more about themes of your interest.
The following people contributed to this article: Yury Kharchenko, Diana Zevan.
Partner With Us
Looking for a partner to grow your business? We are the right company to bring your webstore to success.
Talk to Andrey
