Favicon: How it Impacts Web Design
- 6 min read
- Bojan Zidarević
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 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 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:
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 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:
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.
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. If you want some more information or help with your favicon, contact us any time!
How Content Marketing Works
If you are an owner of a business and want to stand out from the competition, content marketing is something you should really put your efforts in. As we all know, traditional marketing strategies are becoming less effective on a daily basis. That is because the world has basically moved online, so marketing had to…
Magento 2 product categories
Product categories are key to building an effective catalog and user navigation to help customers find the products they want as easily as possible.The user category structure in the main menu can affect user experience and performance. As a best practice, it is usually best to identify one top category and avoid that there are…
SEO Link building
When it comes to SEO, there are numerous things you can do to improve your ranking on search engines. One of the most important parts of SEO – and simultaneously one of the hardest – is SEO Link building. You want to create a network of links on other sites (backlinks) that lead back to…
What to do if you end up on the Yandex Blacklist
Yandex is a russian international corporation specializing in internet services and products. It is incorporated in the Netherlands and primary used by the public in Russia. Yandex is ranked as the 4th largest search engine in the world. Yandex’s main competitors on the Russian market are Google, Mail.ru, and Rambler.Yandex Safe BrowsingYandex Safe Browsing verifies…