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 16×16 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 16×16 and 32×32, as measured in pixels. Although 64×64 and even larger sizes are possible, browser support is not consistent for anything greater than 16×16.
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.
Inbound Marketing: What Is It and Why You Should Use It
If you’re reading this you’re probably thinking about implementing inbound marketing methods in your business. In this post I’ll show you what inbound marketing is, what the three stages of inbound process are, and what makes up a good inbound strategy. Inbound marketing is the process of attracting visitors before they are ready to buy…
9 principles of Material Design
Material design is a design language created by Google in Summer 2014. It is made for Android to create better foundation for user interfaces. With features and natural motions, it mimics real-world objects.Although it primarily focuses on touch-based app design, it is also effective in web design. This article will cover some of the essential…
How to Conduct Web Design Review
Before launching any web design project, you might want to check with a review if everything is in order from the design aspect. There is a collective sense that design is a matter of taste and preferences. By that logic, you could color your website any way you like. That couldn’t be any further from…
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…