What is a favicon and how do you make one?
The favicon or favorite icon is essential to the brand of a website and is a finishing touch that many people tend to overlook. We'll discuss why the favicon is so important and what it is.
What is a favicon?
The term favicon comes from two words, favorite icon. And it is a file (typically an icon) that might contain one or more small icons. When created and assigned, they complete the brand of a website. The contribute to the SEO of the website as well. They can be displayed on the top of the tab in supported browsers, in the address bar or as an icon in the bookmarks folder. When using a plugin such as ‘Speed Dial’ for Chrome and other browsers, the favicon will be displayed with the text of the page to identify your website.
History of the favicon
The first browser to support the favicon was Internet Explorer 5 in March of 1999. It was originally a file named “favicon.ico” placed in the root of website’s directory. It was used in the favorites folder for Internet Explorer and would appear next to the URL if the page was favorited. At the time it was easy to estimate who had bookmarked the website by counting the requests to the favicon.ico file. Modern browsers now load them by default and so it is not possible to check how many people have bookmarked the website by this method anymore.
Originally the size of the favicon could only be 16x16 pixels and had to be 8-bit in color depth. Modern browsers now permit the use of 16x16, 32x32, 48x48 or 64x64 pixels with 8-bit, 24-bit or 32-bit color depth as favicons. Microsoft Edge, Firefox, google Chrome, Internet Explorer, Opera and Safari support ICO, PNG and non-animated GIF files as favicon, with Opera and Firefox further providing support for animated GIF, JPEG, APNG and SVG files. Safari also provides support for JPEG and SVG files.
Where is the favicon displayed?These icons can be displayed in multiple locations on a browser.
Internet Explorer and Safari can display it in the address bar. Microsoft Edge, Firefox and Safari display the favicon in the address bar drop down. All the modern browsers (excepting Safari) display the favicon in the links bar. The bookmarks and top of the tabs for all browsers will display the favicon.
The Apple MacBook pro with touch bar version also displays the favicon inside the touch bar as a quick switchable list.
How do we display the favicon?
Favicons can be displayed in varied methods. There is one standard method which uses a link element in the <head> section of the html document to specify the format and file details.
Eg: <link rel="icon" href="https://example.com/myicon.ico">
Why are favicons important?
Despite their tiny footprint, favicons are quite an integral part of a website’s user experience. Here are two reasons why we should not skip using a favicon:
These symbols can create a memorable pictorial representation of your brand. The way a logo is important to the brand of a website, a simple icon can summarize the brand of a website. In fact, logos are also used as favicons sometimes. Favicons can also be used as mobile app icons for websites that have the progressive app enabled.
Favicons can help when a person is organizing their bookmarks as it helps denote your website with visual cues rather than only text.
How can you make your own favicon?
The process of creating a favicon is like that of designing your logo, so it is advisable to hire a designer who might design a professional logo for you. It is also possible to use some tools that are available online to make your own that reflects your style. You can also use an online favicon maker. Here are few things that you should keep in mind when creating your favicon.
The color of your favicon should be such that it might be visible on both dark and light backgrounds. Most browsers now support dark mode and a simple black icon might not be visible.
Favicons can be created in the following sizes 16x16, 32x32,48x48 or 64x64 pixels. Keeping in mind the size can help in creating a favicon with the appropriate detail that is good for your favicon.
The recommended file format is a PNG as that supports transparency, if you need to use it.
Designing a favicon
The limited resolution of the image would mean that designing your own favicon will be a task that requires accuracy. Here are a few tips that might help you:
The low resolution (64x64 pixels) of the image would require that the image you use should be simple in design. Avoid fine lines, extended gradients and shades. Instead, clear and striking design might help your design stand out.
A favicon should follow the existing design language that your site employs. The favicon could be a simplified version of the logo for your site. Or the image of something that signifies. For example, a favicon for a banking site can be a stylized version of the dollar bill. A website on holiday planning might have a favicon with a beach umbrella. A website on cooking might use a steaming pot as a favicon. There are many methods to designing your own.
Since the size of a favicon is less, avoid as much text as possible when designing your own. In the case of Typographic style design, limiting the design to a fewer characters is advisable, for the sake of clarity.
Use of Logos
Not all logos are eligible for favicon use. The square aspect ratio, limits use of logos to simple versions. Logos can be any size therefore they can have a level of detail that is not possible for them.
A favicon is an essential part of your website. It helps create a good impression of your site and brings together your entire brand.
Check out our complete guide to creating a website. Find out what you should have before publishing your website.