How to make a favicon with your own hands?

A site without a favicon is like a ship without a flag. Favicon is an integral part of a website s brand, image and identity. By the way, look at the results of a search engine (for example, Yandex). You will surely find favicons next to the titles of the pages and documents found. Those. A favicon is also a factor that increases the click-through rate of your site in search results. Therefore, there is nowhere without a favicon!

How to make a favicon? The process can be conditionally divided into 2 stages:

  1. Making a favicon or finding a ready-made one;
  2. Installing it on the site.

There can be several approaches to the first task, as indicated. If for some reason you do not want to make favicons yourself, you are too lazy, have no time or do not know how, and you have no desire to try and experiment, you can find it on one of the library sites of ready-made favicons. The main drawback of this option is that your icon is unlikely to be original. Most likely, it is already used on dozens, if not hundreds or thousands of sites. Therefore, in this case, the actual question is: “Do we need such a favicon at all?” For me, this element must be unique, even if it is as simple as “3 kopecks”.

Therefore, it was better to refuse such an option and made a favicon with my own hands. Let s dwell on this process in more detail. In the course of work, you can use:

Graphic editor

You can start making a favicon in a desktop program or using a special service. In the first case, it is not necessary to resort to the help of a desktop application (for example, Photoshop), you can use a free online raster graphic editor. All you need is to create a 16×16 pixel document and render something on this “canvas”. Fill the background, try to draw something with a “pencil” or put some symbol or letter.

The screenshot shows an example of a “masterpiece” that I started to depict using the Pixlr service:

Pixlr creating favion

The result can be saved in “.gif” or “.png” format.

Online service

For me, using a graphic editor as a tool is the most organic option, but it is not the only one, because there are special web projects with which you can draw favicons. An example is the site, which allows you to create an icon pixel by pixel: service

This is just one example, in fact there are a lot of sites – services for creating favicon online – free, with different functionality and for every taste.

Online favicon generators

Another option for solving the problem is web services that automatically generate a picture. For example the Logaster project.

Logaster service

Since the site was initially geared towards developing logos, you will first have to start with it. Then a special tool will select different favicon options for your case. The editor allows you to change the appearance of picture objects, texts and design. Read more about this in the article about creating a favicon in Logaster. The note is useful for beginners if it is difficult to figure it out right away.

Installing favicon

Whichever option you choose, creating a favicon is not very complicated and interesting. Installation will also not cause problems. After you save the finished icon on your computer, you can convert it to the “.ico” format, or use the “.gif” or “.png” files. There will be no fundamental difference, almost any option, if desired, can subsequently be animated. The last thing is left – to fill the favicon in the “root” of the site (named favicon) and add a code fragment to the head section:

<link rel="shortcut icon" href="Путь_к_иконке/favicon.ico" type="image/ico" />
<link rel="icon" href="Путь_к_иконке/favicon.ico" type="image/x-icon" />

(If you have a favicon of a format other than “.ico”, you need to specify the desired file type)

On this, the process of creating and installing a favicon can be considered complete. If you need any additional information on icons, you can take a look at my article from 2 years ago on another blog – everything about favicon.ico icons – most of the data there is still relevant.

PS Sentry. Reading and Watching Retro Web Design – Interesting Article!
An important step in promotion is the search engine optimization of a website or blog.
Useful online magazine handmade – everything that is done by hand.

Leave a Reply

Your email address will not be published. Required fields are marked *