FAVICON - (from English. Favorites icon Translated "Icon to Favorite") - Website icon 16x16px or 32x32px, which is displayed by the browser in the address bar or next to the saved tab. Traditionally, the name and extension of the icon uses Favicon.ico.

Our service is able to convert the selected image (up to 175 kb) to the site icon icon (16x16px or 32x32px sizes). After generation you only need to download Favicon.ico to the desired catalog of the site hosting.

No icon is an error technical optimization The resource, it reduces the brand awareness, reduces CTR search snippets, worsens the search for a web resource on the browser bookmarks and others.

Yandex has a special bot, which individually indexes the Favon of all sites. The frequency of adding new icons in the search is from about two weeks to one month.

Where to download Favictionon to be online?

To display the Favicon.ico created in the form of the site icon, you must upload it to the root directory of the site (or in any directory) and specify the absolute or relative path to it in the site template code (), sample code:

Why indicate the path to Favonka?

When using one site icon on the entire site, if Favicon.ico is in the root folder, you can not specify the path to it - the browsers themselves will find it and bring it in the form of the site icon. Large or unique resources use different site icons to each of their categories. To do this, in the corresponding templates, they have a path to different Favicon.ico.

The topic of today's article is how to make Favicon Online for a site or blog on the WordPress. If you for some reason, do not know what this file is needed yet, I recommend reading the article already written by me on this topic:

In general, this little picture should be every site.

How to create Favicon.ico for site

So, now I will try to tell where, than and how to make Favicon. But for a start, you need to know what size should Favon for the site should be?

Favicon. - This is a picture in ICO, JPEG, PNG, BMP and GIF formats, which can have different sizes, starting with 16 × 16 pixels. The icon of this size must be downloaded to the site for indexing the Yandex robot.

Other sizes have a secondary role and are not displayed in search Yandex, and serve to display in browsers, such as iPhone or iPad. If you want your site to stand out in search results, remember the following rule.

In the case of several fixed blocks of different sizes, in the page code, you must first position the path to the picture of 16x16 px, since the phava robot of Yandex reads only the first address.

The easiest way to draw Favicon in Photoshop or any other graphic editor. You can do it even easier and take an already ready picture or photo and simply convert it to the necessary format and size. Since such an icon is very small, then small details of the image will be bad on it. Therefore, it is better to make your Favicon as simple as possible, but at the same time, attractive and unique. After all, this is a business card of your web resource.

If you are not a big sign of Photoshop, it does not matter, there are many free generators for creating Favicon for the site. Some of them can only convert images into ICO format, others make it possible to edit or create a fixer from scratch. I bring to your attention a small review of such online generators.

Services Online Favicon Generator - Creation of Favicon Online

I will start with myself simple servicesAnd then gradually go to more advanced, where you can make static and animated icons from scratch and edit ready-made.

When you just run your blog or company website and you still do not have a logo, a wonderful solution for you will serve the logaster service. With it, you can create a logo, and then on the basis of this logo, the generator will create a set of fixes on your choice. Convenience is that the logo and phavicon will be created in one style, so your site will look more professional.

Simple phawacon generators

For a start, several sites where you can easily make an icon for the site, converting any picture to Favicon.ico file, without editing.

www.favicongenerator.com - perhaps the most minimalist service. Nothing superfluous - chose the image, click "Generate Favicon! "And downloaded the created icon.

tools.dynamicDrive.com/favicon. - Simple I. understandable servicewhere you can make Favicon in three sizes. To download the received files, you need to click on the "Download FAVICON" button.

www.cy-pr.com/tools/favicon and www.favicon.co.uk - Services similar to the previous one. In the first one can make the size of the phanique of 16 × 16 and 32 × 32, and in the second additional 48 × 48 and 64 × 64.

www.genfavicon.com - the entire process of creating an icon includes three steps:

1. Select file (JPEG, GIF, PNG) on your computer or simply register the URL pictures and click " Upload image“;
2. Select the size (16 × 16, 32 × 32, 48 × 48, 64 × 64 or 128 × 128) and the required pattern of the pattern, if we want to generate only part of the image by clicking " Capture and image“;
3. We look at the result and, if everything suits, download the file.

Creating an animated Favicon for online generators

Now let's see several services where you can make animated Favonons, as well as add text on the Latin, which will scroll together with the icon in the form of a running line. True, the animation is not supported by all browsers.

www.favicon.by - service in Russian. All that is required, select the file, enter the text on the Latin (if necessary) and click the "Create Favicon" button. Below you can see the result and download file archives.

www.favicon.com.mx - service, fully identical to the previous one, only in English.

Where to make Favon from scratch - Online Editors Favicon

antifavicon.com - this service, for some reason, with the anti-art, is interesting, which allows you to create a Favicon.ico file itself, but not in the form of a picture, but as text on a color background. All that is required is to enter suitable letters and choose colors. By the way, I did my Favon here. I thought then redid, and now I'm used to it.

favicon-generator.org - here, except for the converter, there is also an editor of the icon. In addition, you can download the created Favon to the public gallery, where it can freely download other site users.

fAVICON.RU - Popular Russian online generator, where you can create Favona from pictures and draw them. Also here you can order the creation of Favicon specialists for $ 20. I wonder, someone makes orders there?

www.favicon.cc is another popular generator similar to the previous one. An interesting feature of this service is that here you can make a frame animation for up to 20 seconds.

See Animated Favicon and download it in the preview window.

www.degraeve.com/favicon is another Online Favicon Generator. This editor, like previous, allows you to make transparent background Icons.

Perhaps this is enough for today, although this is not all online services. But even these are quite enough to create a beautiful Favon for your site or blog and be noticeable in search results.

And yet, another online generator icons for the site I used to follow. This service deserves a separate post, where I will tell you how to make Favicon for iPhone, IPod Touch. and IPad browsers And I will stay in more detail on installing animated icons on the site. In addition, will introduce you to the Favicon Validator service, where you can check and see all the Favicon.ico icons, if this file contains more than one image .. So far!

An integral part of modern websites is the Favicon icon, which allows you to quickly identify one or another resource in the browser tab list. It is also difficult to submit computer program Without your own unique label. At the same time, sites and software in this case combines not quite obvious item - both use icons in ICO format.

These small images can be created as due to special programsSo with the help of online services. By the way, it is the last for such purposes that are much greater popularity, and we will consider a number of such resources with you in this article.

Working with graphics is not the most popular category of web services, however, in terms of generating icons, there is definitely to choose from. According to the principle of operation, such resources can be divided into those in which you yourself draw a picture, and sites that allow you to convert an already ready image in ICO. But mostly all generators icons offer both.

Method 1: X-Icon Editor

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

So, if you need to create a whole set of single-dimensional size icons - nothing is better than X-Icon Editor for these purposes you do not find.

Method 2: Favicon.ru

If necessary, to generate the Favicon icon with a resolution of 16 × 16 for a website, an excellent tool can also serve as a Russian-language online service FAVICON.RU. As in the case of the previous solution, here you can independently draw the icon, painting each pixel separately and create Favicon from the finished picture.

As a result, an ICO extension file that represents a picture of 16 × 16 pixels is saved on your PC. The service is perfect for those who need only convert the image into a small icon. However, and to show fantasy in Favicon.ru is not at all prohibited.

Method 3: Favicon.cc

Similar to the previous one as the name and on the principle of operation, but even a more advanced generator icons. In addition to creating conventional 16 × 16 pictures, 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-speaking interface does not bother you, then there are absolutely no arguments in favor of work 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 is a Russian-speaking analogue, unfortunately, deprived.

Method 4: Favicon.BY

Another option of the Favicon icon generator for sites. It is possible to create icons from scratch or based on a specific image. Of the differences, it is possible to highlight 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 considered in this article, however, with converting images in ICO, the Favicon.BY resource copes significantly better, and it 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 in ICO. At the exit you can receive icons with a resolution up to 256 × 256 pixels.

As you can see, create iCO icon With the help of the Online-Convert site, it is completely simple, and it is done literally for a couple of mouse clicks.

In today's lesson, I will tell you about favicon icons (favon). I'll show you How to make Favicon.ico for site (or for a blog, here without a difference) and show how you can paste Favon.

Surely, many still do not know about what "miracle" I say. Simply put, Favicon (Favon) is a picture (icon), which is in the browser before the site address. I will clearly show the Favicon of my blog:

This icon is a kind of logo of your blog. Therefore, to the creation of a favikon, it is necessary to treat with full responsibility. Remember, he can highlight your blog among others.

Lesson plan:

1. Creating Favicon from scratch.
2. Creation of Favonki Is. ready image.
3. Services S. ready icons for site.
4. Attaching the received icon to the site.

How to create Favicon (Favon) from scratch

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

To draw Favicon It is enough to choose a color and just draw. If you drew something, somewhere wrong, to remove the image fragment, select the TRANSPARENT tool (check) and "poke" on the pixels ("squares") that you need to remove:

I drew the following Favonka:

Most of all in Favicon.cc I liked the fact that you can instantly see the result of your work in the original size. To do this, you need to go down a little down in the PreviW section:

Or you can right in the browser (Opera, Firefox, Internet Explorer. etc.) View the outcome:

Creating Favicon (Favon) from the finished image

Suppose you do not want to create an icon from scratch for your site, but you want to make it from the ready image. In this case, the service will be convenient for you to create Favicon.ru fixing.

Service in Russian, so you should not have problems. Simply specify a picture you want to see the icons of your site ("Overview" button), then click " Create Favicon.ico.", And then already" Download Favicon.ico”.

Favon - The term is literally translated as a "favorite icon" - is considered one of the most complex elements of modern web design. This is a small image that is located on the browser tab, in local line And other places, and plays an important role in site personalization.

Due to non-standard format and a small size, the creation of a favon can be associated with difficulties, both with technical and designer point of view.
No less challenging task It is providing phavicon compatibility with various browsers.

In this article, you will learn how to make Favon - we will give advice on design and tell about services to create a favicon, and how to add Favon to the site.

What is Favon and why he need

Despite the fact that Favon is a very small graphic object, it is extremely important in the design of the site and in general.

Click to enlarge the picture.

Firstly, Favon makes your site more personalized and weathered in a single style with other graphic elements, such as logo.

Secondly Favono highlights your site, among other web resources in the list search results. Site without this mini icon will be fading to look and lose competitors. In short, Favon is just "Must Have" for sites.

Thirdly Favon allows the user to find your site in the bookmarks catalog or other icons on the desktop.

Creating a Favicon design

Favon must reflect the essence and brand in a tiny sign of the size of the emoticon. Good decision It will be a simplified version of the company's logo, but note: a full-fledged logo with text and trademarks is not suitable for this purpose.

These websites use the graphic sign of their brand (or at least something similar to it).

Do not use text

It should be abandoned from the use of text, because due to the small size of the inscription favon will be unreadable. Place on the icon 1, the maximum of 2 letters - for example, the first in the name of your company or web resource; In this case, they can still be distinguished.

Pixelization Favicon

Favonons are so small that each pixel is important in them. Often, with a decrease in the full-sized logo, the image is obtained vague.

This is a fragment of a full-size Facebook logo after it decreases to 32 × 32. It is easy to see that the image "floats" at the edges. To avoid such a defect, editing on a pixel level.
When working with icons, I prefer to use editing software raster images (For example, Photoshop or Pixelmator). At first I reducing the full-sized logo to 64 × 64 pixel, because it is the biggest Favon, which I will need. The work is very painful, can take a whole hour, or even two, but the result is just excellent.
If you do not have time and skills in such operations, it is better to use online services, such as the Logotizer.ru.

Favicon size

Having received an icon with a size of 64 × 64, I also create an icon with a size of 32 × 32, 24 × 24 and 16 × 16 pixels. Each of them has its own destination:

- 64 × 64 - "List for reading" in Safari and Windows
- 24 × 24 - fixed sites in IE9.
- 32 × 32 - for screens with high resolution.
- 16 × 16 - is usually used in browsers as IE, Safari, Chrome, etc.

But the creation of smaller Favonov is not limited to: often required additional editing on the pixel level. You can also add an alpha channel if you find it necessary. If earlier it caused difficulties, now almost all browsers support transparency in the phaniques.

Favicon formats

Previously, only Windows ICO format files were supported, we could save time by saving a 16 × 16 phavique in GIF format and giving it an extension .ico. Such a reception worked trouble-free! But now in this method there is no need, since the tools for creating ICO files can be easily found on the Internet. Moreover, now for Favonov used, but the most common two are still common.

ICO.

Palm Championship belongs to ICO format. Unlike PNG files, ICO files may have a different resolution and bit depth (What is great for Windows). Internet Explorer browser uses the fixes of various sizes (for example, 32-pixel icons for Windows 7 taskbar), and therefore this case ICO format is the only option.

PNG files are distinguished by great convenience, since they do not need any special tools to create them. This format supports the alpha channel and allows you to create the files of the smallest dimensions. Perhaps the only drawback pNG format lies in the fact that it is not supported in internet Browser Explorer.

There are other options:

- GIF and animated GIF formats do not have any advantages, in addition to compatibility with very old browsers.
– JPG format It is not recommended to use, even if the image is presented as a photo. This format lacks the clarity of PNG, and the only advantage is more smooth transitions Between the colors - the nuance, which is completely impaired on a very small image.
- SVG could be an excellent option if more browsers Supported the Favona of this format. So far there is compatibility only with Opera.
- There is also the so-called "conformat" PNG - APNG (Animated PNG), which is supported in Firefox and Opera. However, the expediency of its use remains in question. Animated Favon may distract attention and even annoy the user.

Create Favon online - Tools and Online Services

We chose the most useful servicesSuppose to create Favon online.

Logotizer.

Logotizer is a new, simple and convenient service for creating a favon and logo for your site.
With this online constructor, you can create a fixer from scratch. Service is focused on newcomers, so to develop good design Will not work.

How to create a favy with online generator Logotizer.

The main workspace is located on the left. You can see the right to see that Favon will look at various media - the browser tab, computer taskbar or smartphone screen. Very comfortable and clearly.

Initially, you should choose a form for a favon. There are a lot of them, more than 50. We advise you to choose simple and uncomplicated forms to make a favin easy to perceive and memorize.

At this stage, you also define the color of the form, which goes as a background of the Favonki, and select a frame. See what color dominates in your logo (if any), which colors are the main on your site. It is within this gamma that we advise you to create a Favicon design.

Below the block "Form" is a collection of figures (characters). They are not so much, it is a pity that you can not load your options; But the choice is still quite interesting.

Change color, size, location of figures! In short, experiment, good, the service allows it to do.

After the figure is selected, you can add your text. As I wrote earlier, it is better to use 1 or 2 letters, no more.

There is an extensive selection of fonts. This is definitely plus. As in the case of figures, you can change the color, size, layout of the text.

If you decide that some kind of layer of the Favicon temporarily interferes with or not at all, you can just hide it.

After creating a Favon, the service will offer to save it. Register an account (in 2017 without registration in no way), and then you can download files with a small payment - 199 rubles.

There is still a small instruction on the site, how to add Favon to the site, so with the addition of Favicon to the site you should not have problems. Below in this article also provides similar recommendations.

After payment, the user receives 10 fixes of different sizes at once under all the necessary devices to date (APPLE Touch Icon, Microsoft Application Icons and others).

Favicon.ico file itself is multi-sized and contains 4 sizes icons in 1 file (16px, 24px, 32px, 64px). Accordingly, if you add a site to bookmark the browser or open a story - you can watch icons of different sizes, but they will be displayed clearly and without blur.

In general, the service is good. Simple, comfortable, nothing superfluous.

RealFaviconGenerator.net.

- This is a simpler Favon-generator that allows you to create Favonons for any platforms. Moreover, the resource can be tested by Favon. Enter your site URL and you will see how your Favon looks like in every browser and in each operating system. Real Favicon Generator will also prompt you how to fix the shortcomings and make your phavicon even better.

Favicon.BY.

Favicon.BY.- another free and easy-to-use Favon generator, which converts pNG files, Jpg and gif in format.ico. Load the image from your computer, select Size (16x16px or 32x32px) and click on the "Create" button. To save the received Favon on your website, follow the instructions.

Also, the service makes it possible to draw logo on pixels, but, to be honest, it is not for everyone. For example, I could not. Here I am crucial :)

How to add Favon to the site

You can add Favon to the site by making several edits in HTML - site page code.

Step 1: Download the file "Favicon.ico" to your hosting server.

To do this, go to your FTP server for this link:
FTP: // [Email Protected]
Enter your username and password. They can be obtained in the administrator panel of your hosting company.
Load files with favoks in the root directory. The root directory is usually called "public_html" or "www".

Step 2: Add Favon to HTML.

Holding the FTP server window open, download the file "index.html" or "Header.php".
Then you need to upload the code. Downloadable code depends on your website.
If your site is on HTML, find the HEAD area in the index.html file and insert the following code:

If your site is on WordPress, find the Head area in the header.php file and insert the following code:

/Favicon.ico "/\u003e

With these codes, browsers will be able to find your favo.
So, you installed your Favon!

How to add Favon to WordPress and other platforms

If your resource is based on WordPress or other CMS, then add Favon to the site is very simple. In general, the algorithm for the addition of Favicon for different platforms will be the same.
1. You need to go to the site console.
2. Find the section "Design" or "Appearance".

3. Go to "Theme Settings" section and find "Favon" there.

4. Download Favon from your computer.

5. Save and update the page.

How to create more complex Favona

This article discusses simple and rapid ways to create Favonov compatible with practical any browsers and operating systems. But when it comes to web design and development, there is no limit to perfection. If you want to learn how to make more complex Favon, touch icons for iOS main screens, Metro interface icons in Windows, icons for Google TV and much more, I recommend that you familiarize yourself with these materials: favicon Cheat Sheet. There is full information on the topic and are given good sources. This is a great option for those designers and developers (including me), who are constantly seeking to expand their knowledge.

Using Favico.js, you can create dynamic Favoron with numbers.

You may also need a dynamic Favon, which has a changing digit icon. To create such Favonov, I advise you to use the service favico.js.Available on GitHub. While the dynamic fixes are compatible with all browsers. But for those browsers that support them, these icons can be an interesting and useful addition.

If you want to replenish this article by another advice or ask a question, leave comments below!

How to create a favy for a website - Tips and services Updated: February 7, 2018 by the author: admin.