Favicon: How it Impacts Web Design
- 6 min read
- Karla Sambolić
Images help us interpret information better. Since getting the right information as fast as possible is crucial when dealing with internet technologies, it’s no wonder that icons are an integral part of web design, as well.
In this article, we will talk about favicons. Favicons are probably the least important part of a website, but it's attention to detail that makes a site stand out.
They are critical from a branding point-of-view. We will also touch the subject of the use of icons on websites.
What is a favicon?Favicons are small images usually placed at the left side of the browser's address bar. They typically have dimensions of 16x16 pixels. Essentially, a favicon is a logo icon used for browsers.
It offers your website a level of uniqueness that`s absent when the browser adds a generic favicon alongside your website name.
Placement of favicons
What's the purpose of a favicon?In the early days of the internet, favicons were used as a way to estimate website traffic by counting the number of visitors who bookmarked the page.
The main reason for having favicons nowadays is to improve user experience.
They are used in all modern browser at the address bar, in the links bar, in the bookmarking area, and its browsing tabs.
Some browsers show favicons whenever you create a shortcut link for the corresponding website in your desktop and your mobile device.
The main reason to have a favicon is user experience.
A website without a favicon will show a generic browser symbol. With so many points of interaction, not using a favicon is a big no-no in terms of raising brand awareness.
The favicon can help improve your brand identity. It makes your website much more memorable.
Example of favicons
How to create a favicon?Creating a favicon is easy as it can get. You can do it on your own or use help online. There are lots of websites that can generate favicons for you.
You don't even need a graphic designer to make it.
However, if you are planning to launch a global site that will have global branding, then probably you should hire a professional designer to create something unique and matching your brand.
Formatting your faviconFavicons are not required to be created in .ico format as everyone thinks. Sure, the .ico format may be the most popular favicon file type, but it is by far the only one.
Favicons come in a wide variety of file types.
There is 4 common formats for favicons:
Regardless of file type, favicons are square images that typically are seen in sizes of 16x16 and 32x32, as measured in pixels. Although 64x64 and even larger sizes are possible, browser support is not consistent for anything greater than 16x16.
How to add it to the site?Once your file is ready, it's not much of a deal to place it on the server. By accessing the text editing tool and the root folder on your website to be able to adjust the HTML code of your website.
Firstly, you should upload the relevant file to your server. After that write your browser address bar to your FTP server, press enter button, log in, and upload the data to the root folder.
After that, you should change the HTML page of your website. You should insert the code in the head area of the „index.html“ file show on the image below.
If you are working with WordPress, insert the code in the head area of the „header.php“ file.
Use of icons on the websiteThe primary goal of using icons should be to help the user absorb and process information more efficiently. Usually, this is done by using a lot of whitespaces and using images that don´t distract from the content. The proper use of icons can enrich minimal content.
Icons give more substance to the content, and they enable effective communication without wordiness. They should be used to draw attention to your content.
The most common use of icons is in the listing of services, products or features. Using images in combination with your service lists will make them more engaging.
Example of icons used to support a list of services:
Use of animated iconsUse of animation in icons reflects the action an image performs in a way that adds polish and delight. With the use of motion users, attention is directed toward that section of the website.
Also, the use of animation is greatly improved user experience on the website or app. With appropriate animation, users can tell what effects their actions have on the website or app.
ConclusionFavicons are usually the thing that we don't pay too much attention to. They are far from being insignificant; they are a crucial part of the web, both from a user interface perspective and a branding point-of-view.
The more the site and the favicon have in common, the better. Also, the rest of the icons on the website or app have a significant impact on user experience and brand awareness.
They should be relevant and precise. User should immediately understand what is drawn on it, and it also has to be memorable.
Best practices for building a website mockup and prototype
Often, things we imagine in our heads that seem great regularly turn out to be bad ideas when we put them in the real world, such as a piece of paper or a computer screen. They say that the picture is worth a thousand words. What if this is not just a picture but a…
Favicon: How it Impacts Web Design
We can find icons everywhere in our everyday lives: from road signs, store logos, to our laptop keyboards. Images help us interpret information better. Since getting the right information as fast as possible is crucial when dealing with internet technologies, it’s no wonder that icons are an integral part of web design, as well.In this…
Website Logo Mistakes – And How to Avoid Them
The logo is arguably the most essential aspect of any brand to get right. It’s purpose is to show the personality of a brand and instantly convey what the company does at a glance.Website is the first place where your logo is presented to customers. It is the most critical place for your logo to…
Elements of Good SEO Check
SEO Check is an audit process to check all elements important for the search engine ranking. It is essential to perform this process to better understand what improvements need to be made to realize the full potential of your existing content.There are few different elements that need to be reviewed and evaluated. As a result,…