Program for creating favicon online. A universal way to create favicons. Where to upload a favicon so that it is online

11.12.2021

Hello dear readers! Today's article is about creating a favicon (favicon.ico) for your website. From the post you will learn what a favicon is, what sizes this icon is and why it must be made and installed on your blog. In addition, the article will provide favicon generators that allow you to create a favicon online in a couple of minutes, as well as sites where you can download galleries and collections of ready-made favicons.

To begin with, let's figure out what a Favicon is, why is it needed, maybe you can do without it at all?

1. What is a favicon icon and what is it for

concept favicon comes from two English words Favorites Icon, which can be translated as icon (small image) for "favorites". "Favorites" is the name of the bookmarks in the base Internet Explorer browser. They look, for example, like this in the Chrome browser:

For each resource, there is a small image, something like a mini . Agree that it is more convenient to bookmark not url-addresses of sites, but their small logos - favicons. By the way, in addition to this, the favicon is displayed in the address bar of the browser immediately before the URL of the open page of the site or in the bookmark title:

favicon is a small file (16×16 pixels) with the .ico extension (this extension is used by operating systems to store icons). Almost every site has favicon.ico, no matter what hosting it is located on or what engine/theme it uses. Online favicon generators and galleries allow you to make an icon in a couple of minutes from any image, draw it from scratch or download a ready-made one, so if you are not using a favicon on your blog yet, then fix the situation as soon as possible.

What is this little picture for? First, it is a mini-logo for your site, your visitors will remember it better. Therefore, if you decide to create it, then try to make sure that the favicon attracts the attention of visitors and is easy to remember. And secondly, Yandex, the most popular search engine in Runet, places its favicon next to each site in its results, which allows you to distinguish your resource from others that do not have icons. Users are more likely to visit those sites next to which an image flaunts (it doesn’t even matter which one), which means that the favicon allows.

By the way, Yandex even has a special bot that does not index content on the site, but only indexes resource favicons. After creating a favicon and installing it on the site, you will need to wait a bit until this very Yandex bot indexes it, and this process usually lasts from a week to a month. There are three ways to check if Yandex has indexed your favicon:

Type the address of your site in the Yandex search box (for example, http: // site) and see if there is a favicon nearby.
Follow the link http://favicon.yandex.net/favicon/ website(where you need to replace "site" with the URL of your site). If the icon is indexed, then you will see it.
Go to Yandex.Webmaster (http://webmaster.yandex.ru) and check for favicon.ico

2. Online Favicon Generators and Galleries

So, we have already figured out what a favicon is, so necessary for the site. We learned that it should be 16 by 16 in pixels, and its extension should be .ico. Now there are several ways to create favicon.ico:

Download a ready-made icon from the favicon galleries.
Make a favicon from scratch using Photoshop or an online generator.
Make a favicon from the finished image (image dimensions are not important).

2.1 Favicon collections and galleries

http://www.thefavicongallery.com/ — a small gallery that includes icons of various subjects. Contains about 300 images. To download the picture you like, you need to right-click on it and select "save as", then save the favicon to your computer.
http://www.iconj.com/- more than 3 thousand icons for every taste and color. It is possible to save the image in .gif or .ico format. You can even take the html-code of the icon. There are animated favicons. The only drawback of the collection is that there are only 30 icons on one page, so you have to look through many pages to choose the right image.
http://www.favicon.cc/- a huge collection of favicons, but there are only 20 pieces on one page, it will take a long time to scroll through.
http://www.favicon.co.uk/- also a good gallery containing a lot of favicons. There are 144 icons on each page, which makes browsing very convenient. Favicons have different themes.
- a small collection (84 pieces) of mini-images for your site.

2.2 How to make a favicon for a website from scratch

The advantage of creating a favicon from scratch is that the resulting favicon will be unique, and uniqueness is very important! Therefore, it is better not to be lazy and spend 5-10 minutes creating your own favicons.

There should be no problems with generating the icon, because everything is clear here.

2.2.4 Favicon-Generator.org

Another good online favicon generator. It can be accessed via this link - http://favicon-generator.org/.

There should be no problems with this generator either. On the screen, the functions of the online favicon generator are translated.

2.3 How to make a favicon for a site from an existing image

If you don't want to make a favicon for your site from scratch, you can use an image that will become the basis of the mini-logo. In this case, you will need to prepare a picture in advance (preferably a square one, otherwise the pattern may be distorted when creating favicon.ico), and then use it in the favicon generator online service. Let's look at two of the most popular resources.

2.3.1 Favicon.ru

The online generator is very easy to use, it will easily convert any image of any size into a small 16x16 pixel icon. Now you will see for yourself how easy it is to use this service.

There are two ways to add an image:

Use the "Choose file" button to find the desired image on the computer and upload it.
Enter the address of the picture on the Internet in the field (in this case, this file may not even be on your computer), and the service will do everything itself.

After the file is uploaded, you just have to click on the " Create favicon.ico!' and wait a few seconds. Next, you will only need to download the favicon to your computer.

2.3.2 Favicon.cc

This online generator is more powerful than the previous one, but also more complicated than it. To get started, follow the link - favicon.cc, and then click "Import Image" (in the left window).

Next, click on the "Choose file" button and upload the desired image. Based on it, a favicon will be created for your site. In this case, you will need to choose what to do with the image when it is reduced:

Keep dimensions - leave the aspect ratio of the image unchanged.
Shrink to square icon - bring the sides of the image to a square shape, while the image may be distorted.

After uploading a picture, you can edit it in the online generator or leave it unchanged. If the resulting favicon.ico suits you, then download it to your computer.

3. How to install a favicon on a WordPress blog

Most often, the favicon is located in the root folder of the site, in addition, it is more convenient, so we will consider this option. This is done in two steps.

FIRST STEP. First, you will need to find a line of html code in the theme that specifies the path to the favicon. For a WordPress blog, you need to find the header.php (Header) file and find the line, it should look something like this (it may differ slightly depending on the theme):

You need to replace this line with the following two:

< link rel= "icon" href= "/favicon.ico" type= "image/x-icon" >

< link rel= "shortcut icon" href= "/favicon.ico" type= "image/x-icon" >

IMPORTANT! These lines should be placed inside the tags And

SECOND STEP. Now you need to add a favicon to the site's root folder. Go to your hosting and place a file with the name favicon.ico(size 16×16 pixels).

If you did everything right, now your site has got its own favicon.

Greetings, dear visitors of my blog. Today I have prepared for you a selection of 10 services that will help you make a favicon online. And also at the end of the article, I highlighted the 5 most convenient sites, in my opinion.

To begin with, it is worth understanding what a favicon is? I think many of you are familiar with this concept, but I will tell you again. In a word, it is the icon of your site. When searching in Yandex, you saw a small 16x16 icon next to the site, so this is the favicon. It can also be seen in the address bar and in the bookmarks of some browsers.

This little picture is your brand first and foremost. People will recognize your site by it. Therefore, it must be original and memorable so that it is immediately visible in Yandex search. It is difficult to draw such a small icon on your own, and online services come to the rescue that will help you make a favicon from a picture. Let's take a look at some of them in order and identify their strengths and weaknesses.

Convenient to use.
It is possible to make a favicon from a picture or draw it yourself.
You can order from professionals.
Preview of the result.

I think they are not there, everything you need is on the site, I can only highlight that there is no gallery of ready-made icons.

- It is possible to create from a picture or draw it yourself.
- After generation, an example of a link to add to the site is shown.
- Everything is in English.
- Ugly design.
- It is not possible to crop an image during creation.
3 www.chami.com
- Beautiful user-friendly interface.
- It is possible to make a favicon from a picture or draw it yourself.
- Large palette of colors for drawing.
- There is no preview.
- Everything is in English.
- There is no gallery of ready-made icons.
- Convenient interface.
- Nothing extra.
- There is no gallery of ready-made icons.
- You can't draw yourself.
- You can not crop the image during generation.
- Convenient beautiful interface.
- Nothing extra.
- It is possible to draw yourself or generate from a picture.
- There is a gallery of ready-made icons.
- You can keep the size of the icon when you create it, or compress it.
- Preview.
- You can make an animated icon.
- A huge number of colors to draw.
- Everything is in English.
- There is a choice of icon sizes 16x16 and 32x32.
- There are no additional functions, only the creation of a favicon from an image.
- There is no preview.
- Preview.
- Large collection of ready-made icons.
- There is an option to crop the image.
- Everything is in English.
- There are errors on the site.
- Inconvenient interface.
- You can choose icon size 16x16, 32x32, 48x48 and 64x64.
- Everything is in English.
- Nothing extra.
- It is possible to choose the size of the icon.
- You can draw yourself or make a favicon online from a picture.
- There is no option to crop the image.
- There is no preview.

I introduced you to only 10 online services, although there are many more. In my opinion, these are the most popular among all. If you use any others, write them in the comments, it will be interesting for me and other readers to learn about them.

And now, as promised, TOP-5 convenient and high-quality services, in my opinion.

This is my top five. I want to know which service you will put in the first place, and which in the last? I will be glad to hear the answers in the comments.

P.S. If you have not yet come up with a favicon for yourself, then be sure to check out the site faviconka.ru. On it you will find more than 2,000 ready-made icons for every taste. I hope the article was useful to you and you found your service to make a favicon online.

An integral part of modern websites is the Favicon icon, which allows you to quickly identify a particular resource in the list of browser tabs. It's also hard to imagine a computer program without its own unique label. At the same time, sites and software in this case are united by a not entirely obvious detail - both of them use icons in the ICO format.

These small images can be created both thanks to special programs and with the help of online services. By the way, it is the latter for such purposes that are much more popular, and we will consider a number of such resources with you in this article.

Graphics work is not the most popular category of web services, but when it comes to generating icons, there are definitely plenty to choose from. According to the principle of operation, such resources can be divided into those in which you draw a picture yourself, and sites that allow you to convert an already finished image into an ICO. But basically all icon generators offer both.

Method 1: X Icon Editor

This service is the most functional solution for creating ICO images. The web application allows you to draw the icon in detail manually or use a ready-made image. The main advantage of the tool is the ability to export images with resolution up to 64×64.

So, if you need to create a whole set of the same type of icons of different sizes, you won’t find anything better than X-Icon Editor for these purposes.

Method 2: Favicon.ru

If you need to generate a favicon icon with a resolution of 16x16 for a website, the Russian-language online service Favicon.ru can also serve as an excellent tool. As in the case of the previous solution, here you can either draw an icon yourself, coloring each pixel separately, or create a favicon from the finished image.

As a result, an ICO file is saved on your PC, which is a 16x16 pixel image. The service is perfect for those who only need to convert an image into a small icon. However, it is not forbidden to show imagination in Favicon.ru.

Method 3: Favicon.cc

Similar to the previous one both in name and in the principle of operation, but even more advanced icon generator. In addition to creating regular 16×16 images, the service makes it easy to draw an animated favicon.ico for your site. In addition, the resource contains thousands of custom icons available for free download.

If the English-language interface does not bother you, then there are absolutely no arguments in favor of working with the previous service. In addition to the fact that Favicon.cc can generate animated icons, the resource also correctly recognizes transparency on imported images, which, unfortunately, the Russian-language counterpart is deprived of.

Method 4: Favicon.by

Another option for favicon icon generator for websites. It is possible to create an icon from scratch or based on a specific image. Among the differences, one can single out the function of importing pictures from third-party web resources and a rather stylish, concise interface.

In general, there are no differences in working with the services already discussed in this article, however, the Favicon.by resource copes much better with converting images to ICO, and this is quite easy to notice.

Method 5: Online-Convert

It is likely that you already know this site as an almost omnivorous online file converter. But not everyone knows that this is one of the best tools for converting any images to ICO. As a result, you can get icons with resolution up to 256×256 pixels.

As you can see, creating an ICO icon using the Online-Convert website is not difficult at all, and it is done in just a couple of mouse clicks.

A new lesson in the style of a workshop and this time we learn the secrets of the favicon. favicon - a small icon that is displayed in bookmarks and the browser bar. If you have your own website and want to compare favorably with others even in small things - favicon necessary. The most beneficial, of course, it looks among the bookmarks, against the backdrop of a faded list of addresses without any graphic identification. However, our lesson is not so much about how to attach a favicon to the browser line, but about how to draw your own favicon in Photoshop.

In what format should the favicon be saved?

It all depends on the browser. For Microsoft Explorer fit icon format ICO. We already encountered this format when we made the cursor. For other browsers from Google Chrome before Apple Safari normal fit gif or PNG. favicon may be translucent. To do this, it must be saved in translucent PNG, and then convert to the format ICO. You can do it in a good program IcoFX. However, there are many third-party sites for generating a favicon, and the most obvious of them is www.favicon.ru

How to put a favicon on a website?

How to be sure that favicon will it work? 4 conditions must be met.

The file should be called - favicon.
Favicon size 16 on the 16px
The best place for a favicon is the site's root folder.
Write the address of the icon in the meta tags header in the site index.

In HTML it looks like this:

You can create several icons for different browsers, for example one in the format ICO, and the other in PNG and all this is indicated through the tag link . Modern browsers most often themselves look for a file in the root site called favicon, however, to be sure, it does not hurt to indicate the exact links.

Create a favicon in Photoshop

Create favicon very simple. Do you want to do the same favicon like Vkontakte or Odnoklassniki? Good favicon You can’t do it by reducing large pictures in all sorts of “generators” of favicons, which are abundant on the Internet. The favicon is very small. In fact, we are kind of pixel art, which has its own characteristics. You can't write a letter and just reduce it to 16px .

Like favicon will be blurry and fuzzy, since the edges of the letter will extend by a few pixels when resized. Get kinda anti-alias, which is usually a good thing, but in the case of pixel art, such transitions are just not needed. On the other hand, it is worth avoiding excessive “tatteredness” on roundness, otherwise it will turn out hello gifs 1999.

Create a file of size 16 X 16px . We will create a very simple translucent favicon with in the form of a letter, with a bit of depth. The depth will be created by the shadow and the gradient.

Draw the background

Why in the intro of this lesson you see a huge smooth and licked favicon? Because I increased it for the intro to the lesson. How did I manage to enlarge the image 16px? Very simple, I always work in vector if it is possible to use it and if it makes sense. And the vector easily transfers any transformation and does not lose in quality.

Choose a tool Rounded Rectangle Tool. On the settings panel, select the mode, which will allow you to draw in vector. In the drop-down menu of the panel, check mark - Snap To Pixels. This is necessary so that vector paths snap to pixels and do not draw "in between" them.

We have a surface favicon, and translucent edges will create a smooth roundness. Now it's time to get rid of the white background, we don't need it. Turn off its visibility. Or double click on the layer, turning it into a regular layer, and then delete it.