A universal way to create favicons. Favicon creation online Favicon creation

Favicon is an icon of a website or page in the form of a small icon, 16x16 pixels in size (or larger). The user can see a favicon in the form of a small image in the browser address bar to the left of the link to an open site, near the site name in bookmarks and tabs, in the results of some search engines, directories, bookmarking services, etc.

At one time, favicons could only be created in the .ico format, because it was only supported by the old Internet Explorer browser. This is where the name favicon comes from (short for the English word FAV orites ICON– “icon for favorites”). “Favorites” was the name given to bookmarks in the IE browser.

Today, icons for websites and pages can be created in many other formats, including jpg, png, gif and, of course, the good old ico.

Why do you need a favicon?

Installing such icons allows you to speed up the visual search for the desired tab, especially if there are many of them open. Seeing a recognizable picture is much easier and faster than looking at page titles.

This is what favicons look like in a browser.

If search engines show the favicon of your project in the search results, this will have a positive effect on the growth of its positions. A beautiful, stylish and at the same time simple logo will attract the attention of the target audience and encourage the user to go to your site rather than the next one. All this will help increase click-through rates and, accordingly, increase behavioral factors.

Moreover, the icon will be remembered by users, and after some time it will become recognizable to a wide audience, which will also be an additional attraction for visitors.

On a note. It is better to install a favicon on an already optimized web resource.

For example, the Yandex search engine has special YandexFavicons robots that index favicons. They visit sites to collect and update badges approximately once a month.

In this regard, updates, after which it is worth checking for a changed or new icon for the site, rarely occur. Therefore, after installing a new image, changes in the display of your relative resource should wait at least two weeks (this is the minimum).

Once the search engine finds the icon, it will need to convert it to PNG format (if it is made in ICO format). After this, you can find the favicon of your resource at the address (using Yandex as an example): http://favicon.yandex.net/favicon/URL-address-of-your-site.

How to create a favicon for a website?

It is not enough to make a favicon purely for show. If you want it to become an additional source for attracting visitors, it is important to know how to create a site icon correctly.

Catalogs and services for creating favicons

You can make an icon for a website or one of its pages yourself, especially if you are comfortable with Photoshop and other similar programs. If you have neither the skills, nor the time, nor the desire, today there is an abundance of special convenient services available for generating favicons and galleries, which offer ready-made icons for your projects:

And these are not all generators and catalogs, so a modern webmaster can easily find the favicon that he likes.

Icon appearance

The standard favicon size is 16x16 pixels. There are also sizes 24x24, 32x32, 48x48 and 64x64. You need to understand that a site’s icon is its face, on which traffic depends to a certain extent. Therefore, it is necessary to approach the creation of a favicon wisely. Here are a few rules of how an icon should look to attract users' attention:

• Style corresponding to the theme of the site. The image should be dominated by the same colors and elements that are used in the design of the Internet resource or its logo. In fact, this is the main task of the favicon – to correspond to the site.
• Easy to understand. You should not draw an abundance of elements and sculpt them on top of each other. The user, looking at the icon, should understand what is depicted on it, and not try to unravel your “hidden meaning”. Reasonable minimalism is the key to success.
• A memorable image. This point is closely related to the previous two. The theme and simplicity of the favicon will ensure that users will remember it faster and easier. Try to use an image that, when a person looks at it, can describe it in some word. For example, the same search engine “Yandex” approached this issue perfectly, and now, when you see the logo in the shape of the letter “I”, you will immediately remember this search engine.

Installing a favicon

After creating a favicon, it must be installed on the site. It's very easy to do this:

1. Upload the favicon.ico image to the root folder of your website;
2. Write the following code in the HTML code of the site itself, in the head meta tag:

The favicon code should be located between the tags. It is generally accepted that when coding it is used as high up in the code as possible.

Displaying Favicon on mobile

Favicon for mobile sites used as the main icon of your site. When you open a site on a mobile phone, this favicon is displayed on the main quick access screen in the browser. Your site can be added to the main screen of the phone, and the mobile favicon is also included here.


As you can see in the screenshot above, on VKontakte and Avito, the favicon is not adapted for mobile devices, so the first letter of the domain is used.

In the era of mobile phones, every website is required to use such Favicons to display on mobile phones. This creates a convenient experience for your site visitors.

Icon for iOS

In order for the favicon to be displayed on iOS devices and in the Safari browser, you need to write the following code:

Android

For devices running on Android, we write:

But this code will display your favicon, only in the browser. And in order for the icon to be displayed on the smartphone’s desktop, you need to specify a manifest file.

Its contents:

( "name": "%title%", "icons": [ ( "src": "\/android-chrome-36x36.png", "sizes": "36x36", "type": "image\/png ", "density": "0.75" ), ( "src": "\/android-chrome-48x48.png", "sizes": "48x48", "type": "image\/png", "density" : "1.0" ), ( "src": "\/android-chrome-72x72.png", "sizes": "72x72", "type": "image\/png", "density": "1.5" ) , ( "src": "\/android-chrome-96x96.png", "sizes": "96x96", "type": "image\/png", "density": "2.0" ), ( "src" : "\/android-chrome-144x144.png", "sizes": "144x144", "type": "image\/png", "density": "3.0" ), ( "src": "\/android -chrome-192x192.png", "sizes": "192x192", "type": "image\/png", "density": "4.0" ) ] )

But that is not all. In new versions of Android (starting with Lollipop), your browser may be recolored to match the site's interface color.


To make such a feature, write a line and set your color:

Windows Phone

Don't forget about favicon in Windows Phone either:

For more advanced icon settings in Windows Phone, you can use the following values:

#8A2BE2

The configuration file itself:

Services for favicon generation and verification

digitalagencyrankings.com

Enter your website address and get an analysis.


Don't neglect setting up your favicon for mobile devices. Remember that this is convenient for your visitors, it is easy for them to see your site in the browser and go to it.

Conclusion

Today, almost all browsers support favicons. The icon of each site is unique, and creating it correctly will convey the entire essence of the site and increase the click-through rate of your site in the search results.

Based on this, we can conclude that favicon serves as an additional way to distinguish your project from a huge number of other sites, increase its memorability and recognition. This will certainly help increase search traffic.

Favicon generator - will help you convert and edit any image, turning it into a favicon for the site. Today is an article about the best favicon generator for websites today.

Nowadays it’s hard to imagine a website that doesn’t have a favicon. A favicon is an icon that is located in the browser's address bar or in the window title (depending on the browser), and which distinguishes the open site/tab from many others. Initially, these icons were developed in IE in order to highlight a site in the browser’s bookmarks list (in IE these bookmarks were called Favorites), and hence the name Favicon - favorites icon.

But making a favicon with your own hands is not so easy. It must have an ICO format, which requires special software in order to do something worthwhile and considerable skills. Therefore, to make life easier, it is better to use an online favicon generator.

There are many services that allow you to generate favicons from pictures (this could be a logo or a specially designed illustration). But most of them have problems with transparency.

Transparency problems with the favicon generator service

For clarity, we present the illustration “How different favicon generators process transparency and reduction in image size.”

In this comparison, we used the results obtained from the services favicon.cc and favicon-generator.org. To be honest, until recently, we ourselves used the favicon.cc service, but recently an excellent substitute was found - favicon generator No. 1.

The best favicon generator - www.xiconeditor.com

Like favicon.cc, this favicon generator has its own built-in online icon editor, but its advantage is its excellent work with transparency.

It is quite obvious that there is a difference in the quality of transparency (apparently the difference is in the quality of changing the size of the loaded image).

In addition, xiconeditor.com has another advantage - an excellent favicon preview system, which allows you to view the result in different guises without downloading the generated favicon. Their preview is much more informative than favicon.cc.

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’s 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, this is the icon of your site. When searching in Yandex, you saw a small 16x16 icon next to the site, so this is a favicon. It can also be seen in the address bar and in bookmarks in some browsers.

This little picture is first and foremost your brand. People will recognize your site by it. Therefore, it must be original and memorable so that it is immediately visible in Yandex searches. 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 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 resulting result.
• I think there are none, everything you need is available on the site, I can only highlight that there is no gallery of ready-made icons.

1. 
   

   • You can create one 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 impossible to crop an image when creating it.

2. 3 www.Chami.com

3. 
   

   • Beautiful user-friendly interface.
   • It is possible to make a favicon from a picture or draw it yourself.
   • Large palette of colors for drawing.
   • No preview.
   • Everything is in English.
   • There is no gallery of ready-made icons.

4. 
   

   • User-friendly interface.
   • Nothing extra.
   • There is no gallery of ready-made icons.
   • Impossible to draw by yourself.
   • You cannot crop the image during generation.

5. 
   

   • Convenient beautiful interface.
   • Nothing extra.
   • It is possible to draw it yourself or generate it from a picture.
   • There is a gallery of ready-made icons.
   • You can keep the size of the icon when creating it or compress it.
   • Preview.
   • You can make an animated icon.
   • A huge number of colors to paint.
   • Everything is in English.

6. 
   

   • There is a choice of icon sizes 16×16 and 32×32.
   • There are no additional functions, only creating a favicon from an image.
   • No preview.

7. 
   

   • Preview.
   • Large collection of ready-made icons.
   • It is possible to crop the image.
   • Everything is in English.
   • There are errors on the site.
   • Inconvenient interface.

8. 
   

   • You can choose the icon size from 16×16, 32×32, 48×48 and 64×64.
   • Everything is in English.

9. 
   

   • Nothing extra.
   • It is possible to select the icon size.
   • You can draw it yourself or make a favicon online from a picture.
   • There is no option to crop the image.
   • No preview.

I only introduced you to 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, I and other readers will be interested to know about them.

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

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

P.S. If you haven’t come up with a favicon for yourself yet, be sure to check out the website 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.

Honestly, I really love the favicon. I have a deep, equally chaste platonic love for him. This doesn’t mean that I tell my fellow webmasters stories about how I changed the favicon and traffic increased by 10% (although wait... maybe that happened), but it does mean that when the favicon of my new site appears in the Yandex index, the site itself is starting to seem a little more SDL to me.

What is a favicon?

Favicon (Favicon – short for “favorite icon”) is an image that is displayed in the browser’s address bar before the address, in the tab corresponding to the window with the open page of the site, as well as when adding a resource to the favorites tabs. These images can help the user better remember the brand or company and increase site recognition. Often, a reduced or slightly altered image of a company or brand logo is used as a favicon.

Benefits of using a favicon

Using a favicon brings benefits over time. For example, check out these options:

• When a user opens many tabs in the browser, he can immediately determine which of them the site is on, even if the text with the name is no longer displayed;
• In Yandex search results, the favicon is displayed to the left of the site or its page, which attracts the attention of visitors and distinguishes it from others;
• The picture is well remembered and remains in memory - as a result, the site becomes more recognizable and attractive to users.

Thus, a favicon is part of the site’s image, which performs not only an aesthetic function, but also makes it more convenient for the user to search for the portal in bookmarks, tabs, and search results.

Features of Yandex working with favicons

The Yandex search engine is one of the few that highlight site favicons and display them when building a list of search results. To do this, a special bot periodically indexes sites and updates information about the presence of favicons.

Previously, favicon updates occurred once every couple of months. Now, in 2018, Yandex indexes them much more vigorously and on some of my new sites the favicon appears within a few days.

To check whether Yandex displays a favicon, you can find your portal in the search list and see if the icon is visible to the left of it. You can also enter the following construction in the address bar: for Yandex - http://favicon.yandex.net/favicon/www.site.ru (where instead of www.site.ru you need to type the domain of your site). A correctly created Favicon will be displayed on a black background, and this means that Yandex sees it.

If the favicon is not visible, this may be due to the following reasons:

• The image size does not correspond to the required size: 16x16 pixels;
• The image format is not the same - it should be ico, jpeg or png (the first option is more preferable for Yandex);
• The picture is blurry or not unique - sometimes for these reasons the search engine blocks icons;
• Yandex is updating the system - then after some time everything should correct itself;
• The site is located further than the hundredth position in the search results - in this case, the favicon may also not be displayed.

After checking the picture according to these criteria, you need to correct the shortcomings. If after this the icon is not displayed, you can contact Yandex support.

For a favicon to be displayed in Yandex.Direct, it must be correctly designed and located in the right place on the site. Then the Yandex search robot will index it and start showing it in search results. This usually happens 2-4 weeks after the site is published with changes. There is no need to notify or ask Yandex to publish the favicon; this will happen automatically after a certain time has passed after it appears on the portal.

How to create a favicon

If you want to create an ico file from a large image in a format, for example, png, then it would be a good idea to install Adobe Photoshop first. Then the ICO plugin for Photoshop is installed (look for the plugin for your version of FS in a search engine). When it is installed, we copy the desired file ICOFormat.8bi (for 32-bit) or ICOFormat64.8bi (for 64-bit) to one of the following paths:

C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Plug-ins\File Formats
C:\Program Files (x86)\Adobe\Adobe Photoshop CS6\Plug-ins\File Formats

If there is no “Plug-ins” or “File Formats” folder, then you need to create it. Now in the save dialog you can select the ico format. The sizes of the created icons can be multiples of 8 (16×16, 24×24, 32×32, and so on, but it is most reliable to choose 16×16).

The image that is to become the favicon is then opened in Photoshop. Click “Image – Image Size” and the image size changes to 16x16 pixels. Then press “File – Save as” and select the ICO format (the file name should be favicon.ico).

I myself have recently been converting images into ico format without Photoshop. Using the service https://realfavicongenerator.net/.

After some time, the favicon will appear on the site.

Some smart people make a favicon in the form of an arrow, a triangle, and add red elements so that the user clicks. This, of course, can be done, but for this the site can be artificially lowered.

Yandex scares favicon geeks

When designing an icon, keep in mind that the image should be clear and clearly visible, despite the small format. Therefore, it is better to use as few individual objects as possible and not too many colors. You can look at competitors' favicons and think about how you can stand out from them.

Services

There are also special programs and resources for creating icons, among which the following are popular:

• favicon.cc - the simplest editor will allow you to create a simple image, the principle of operation is a bit like Paint. Colors are also selected, and a drawing is made by clicking on the pixel squares that need to be painted over. There is a fix tool. The created image can also be saved to your computer as a finished favicon image. As you work, at the bottom of the screen you can see the preliminary result in the form in which it will be displayed in the browser. The resource also offers a large selection of ready-made icons;
• favicon.ru – here it is better to create favicons from ready-made images. The picture is downloaded from the computer, processed by the system and converted into a favicon.ico file, which can then be downloaded;
• iconj and audit4web are databases where you can find ready-made favicons.

There is also such a service:

You can turn to a designer to develop the image, but this will cost significantly more.

Another point is that the image for the icon cannot be animated, it is always motionless, even if a picture with any non-static effects was used as the basis.

In today's lesson I will tell you about Favicon icons (favicon). I'll show you how to make favicon.ico for a website(or for a blog, it doesn’t matter) and I’ll show you how it’s possible insert favicon.

Surely, many still do not know what “miracle” I am talking about. Simply put, a Favicon is a picture (icon) that appears in the browser before the site address. I’ll show you the Favicon of my blog:

This icon is a kind of logo for your blog. Therefore, the creation of a favicon must be taken with full responsibility. Remember, it can make your blog stand out from others.

Lesson Plan:

1. Creating a Favicon from scratch.
2. Creating a favicon from a finished image.
3. Services with ready-made icons for the site.
4. Attaching the resulting icon to the site.

How to create a Favicon from scratch

There is one very convenient service. It has the address favicon.cc. This favicon building service looks like this:

– Yes, this service also has ready-made favicons.

How to make a Favicon for a website

After we have created the favicon, we need to “attach” it to the site. To do this you need to do the following:

As you can see, everything “fell” correctly. I hope you don't have any problems either. If you have any questions, please ask them at