3,526
Content
- What is a favicon
- Why is it vital to have Favicon?
- Favicon examples
- How to create a favicon?
- How to create an icon in Photoshop?
- How to add an icon to the site?
What is Favicon?
Favicon is a small icon associated with a particular website or web page. It is designed as a mini-logo of the company and helps to identify the exact site, especially when there are too many pages open and the headings disappearal together.
The standard icon size is 16 x 16 pixels with 16, 24 or 32-bit color and transparency support. Much later, new extensions appear: 32 x 32, 48 x 48, 96 x 96, and others. In spite of this, older browsers still prefer to reduce it to 16 x 16. The size depends on the type and operating system of the device you’re using.
It can be seemingly useless, but that’s not true. Favicons are very important from a branding point-of-view. The main function of favicon is a visual representation of the site in one small image. So, this tiny icon almost represents your website and your company in general.
Most of the time, favicon is created based on the company’s logo or the color scheme of the brand. This icon should be associated with the site, be simple, clear and unique.
Why is it vital to have Favicon?
Favicon can be useful for several reasons.
First of all, itimproves the user experience on the site and helps quickly navigate through browser tabs. It allows to find the desired resource by the icon rather than digging into different URLs, names or descriptions.
Secondly, it contributes to the recognition of the brand. In some search engines, favicon is displayed in search results opposite each site. Yandex Search Engine has long implemented this feature, while Google has begun testing its implementation only in 2019 (in the desktop version of Google favicons yet, while in the present results).
Example of displaying a favicon in Yandex search engine results:
Example of displaying favicon in Google mobile search results:
Reasons why favicons appear in search results: increase the clickability of snippets by adding an additional graphic element. It is quite likely that a user can click on a link that occupies a lower position if they see a familiar icon. In this regard, sites without icons have a lower CTR, since they get less attention due to the lack of favicon in the output snippet.
And the last but not least – improving the appearance of the site in the search engines. If there is no icon, the snippet is less visible, which can negatively affect clickability.
In general, the benefit of creating a bright and memorable icon for your site is obvious.
Favicon examples
Since favicon has become a vital element in creation of the site, we suggest you familiarize yourself with some examples in order to understand the principles of creating your own icon. You can see favicon in browser tabs, toolbar, search bar, browser history, etc. Wherever you see favicons, they attract attention, help you remember the brand and distinguish it from others. On the picture below you can see some of the favicon examples:
To find out how your favicon looks in different browsers, use our on page SEO checker tool.
How to create favicon for your website?
Creating your own icon for the website is easy.
There are several ways to create favicon:
1. Draw it yourself in a graphical editor.
2. Draw an icon in a special online service designed for creation of favicons.
3. Find and download the icon using the free stock (Findicons.com or Iconizer.net).
4. Download the existing logo or any other image into the online favicon generator presented below, and then save it:
As you can see, there are many simple ways to create icon by yourself. But if you want to launch a global site, then you should probably hire a professional designer to create a unique and suitable icon for your company.
How to create Favicon in Photoshop?
Photoshop is a popular graphics editor for creating images. Unfortunately, there is one problem – it does not support full-fledged work with «.ico» format files. In this case, you will need to download and install its plugin from Telegraphics.
However, I personally recommend using a bunch: Photoshop + Art Icons Pro program – it is a popular icon editor that allows you to create and edit icons. The program supports the export and import of many graphic formats.
Working at «Art Icons» is easy. As I usually do personally, when I want to create a favicon:
- I go to the site for which I need to make an icon.
- I take a screenshot of the place on the site where the logo is placed.
- I open Photoshop, paste the image from the clipboard.
- I crop the image of the screenshot so that the logo is in its center + you need to keep in mind that after cropping the image itself should be square.
- Next I save it in PNG. Close Photoshop.
- Then I open the saved picture in «Art Icons».
- I reduce the image to a size of 16 x 16 pixels: "Tools -> Convert Format..." and select a size of 16 x 16 and the colors "True Color + Apha (32 bits)".
- Then select "File -> Save As..." and select the format "Icon (* .ico)".
- That's All.
Well, the easiest option is Favicon online generators. Examples of similar online services:
How to add a favicon to the website
Now that you've created a little favicon, you need to upload it to the site, insert it into the page code. Most favicons are placed in the root folder.
To do this, follow these steps:
- Download favicon.ico to your server in the root folder.
- In the HEAD section of your site, add this line of the code:
- <link href="/favicon.ico" rel="shortcut icon">.
That’s it! See? Creation of favicon is very easy! Just try to do it!
Other articles:
