website icon

Favicon: How it Impacts Web Design

  • 6 min read

Rating

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 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 favicon

Favicons 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:
· .ico
· .gif
· .png
· .jpg

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 website

The 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:


Source

Use of animated icons

Use 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.

Animated icons




Conclusion

Favicons 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.

Contact us

  • This field is for validation purposes and should be left unchanged.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

Share

Subscribe to our newsletter