Create Favicon online. A universal way to create favicons Create favicon ico online

Easily create a 16x16px Favicon for a website. The online editor allows you to create your own and unique favicon for the site in a couple of minutes.

Create Favicon

How to add a Favicon to a website?

Adding your created favicon to the site is very easy. Rename the icon to favicon.ico, then upload it to the root of your site so that the icon is available at: www.mysite.ru/favicon.ico. After downloading the file favicon.ico, you need to add the following code to your site template:

This code must be placed at the top of your template page, between the tags ....

After this, you need to refresh the page in your browser. In some cases, if the browser does not display the Favicon, you may need to refresh the browser cache in the settings.

Features and capabilities of the Favicon editor?

Our online editor Favicon has a fairly simple interface, but allows you to create a very high-quality favicon icon for the site.

Possibilities:

Choose from 1 of 8 preset bright and vibrant brush colors.
Select any color for drawing in Hex code format (example: #ff5555).
Convenient selection of any color for drawing using a palette and sliders
Paint Brush Tool
The Background Fill tool allows you to paint the entire background or a separate part of the icon if there is separation.
The “Eraser” tool allows you to erase any part of the icon
The Eyedropper tool allows you to define any color that was previously used. This tool only works in the editor window area.
Ability to enable/disable the grid for more accurate Favicon drawing
Possibility to change the background to white or checkered

Why do you need a Favicon on a website?

First of all, the display of the Favicon of the site decorates the tab for opening the site in the browser and the browser bookmarks.

Also, the presence of a Favicon icon on the site gives the site a more beautiful display in the search results of popular search engines.

Why should I draw a Favicon?

DIY drawing on online service Favicon creation will give your icon complete uniqueness. You can draw a favicon for the site completely from scratch using simple tools(brush, eraser and fill). At the same time, you can draw with absolutely any colors and in any position.

How to draw a Favicon correctly?

When drawing a favicon for a website, it is important to know that there are 256 pixels in a 16x16px icon grid. When dotting a favicon with a brush, it paints 1px.

When creating a Favicon, pay special attention to the colors on the palette. If you want to make a high-quality icon that doesn't look pixelated, be sure to soften the corners. This is done very simply. It is enough to choose a color lighter than the main one in the palette and paint the required area with it. In this case, the icon will have soft corners. With this technique you can draw ideal shapes (circles, ovals, etc.). Examples of drawing Favicons can be found on the page

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 the favicon as a small image in address bar browser 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.

Once upon a time, favicons could only be created in the .ico format, because it was only supported by the old browser Internet Explorer. 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 visual search 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 attention target audience and will encourage the user to go to your site, and not the neighboring 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 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:

Upload the favicon.ico image to the root folder of your website;
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 website on a mobile phone, on the home screen quick access in the browser, this particular favicon is displayed. Your site can be added to main screen phone, and here the mobile favicon is also pulled up.

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

To make the favicon appear on iOS devices and in the Safari browser, you need to enter 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 Android versions(starting with Lollipop), your browser may recolor the interface color of the site.

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

Windows Phone

About favicon Windows Phone don't forget 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 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.

Hello, dear readers! Today's article is about creating a favicon (favicon.ico) for your website. From this post you will learn what a favicon is, what sizes this icon comes in, and why you definitely need to make it and install it 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.

First, let's figure out what a Favicon is, why it is needed, maybe we can do without it altogether?

1. What is a favicon 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 main Internet browser Explorer. For example, they look 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 the URLs of sites, but their small logos - favicons. By the way, in addition to this, the favicon is displayed in the browser address bar immediately before the URL open page site or in the bookmark title:

Favicon is a small file (16x16 pixels) with the .ico extension (this extension is used by operating systems to store icons). Almost every website 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 don’t already use a favicon on your blog, then quickly correct the situation.

What is this small picture for? Firstly, this is a mini logo for your website, 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, the most popular in RuNet search system In its search results, Yandex places its favicon next to each site, which allows you to distinguish your resource from others that do not have an icon. Users are more willing to visit those sites next to which there is an image (no matter what), 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. Having created a favicon and installed it on the site, you will need to wait a little until this same Yandex bot indexes it, and this process usually lasts from a week to a month. There are three ways to check whether Yandex has indexed your favicon:

Type the address of your site in the search box from Yandex (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, you will see it.
Go to Yandex.Webmaster (http://webmaster.yandex.ru) and check for the presence of favicon.ico

2. Online Favicon generators and galleries

So, we have already figured out what a favicon is, which is so necessary for a 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 a finished image (image dimensions are not important).

2.1 Collections and galleries Favicon

http://www.thefavicongallery.com/ — a small gallery that includes icons on a variety of topics. 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 will 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 many favicons. There are 144 icons on each page, which makes browsing very convenient. The themes of favicons are very different.
— a small collection (84 pieces) of mini-images for your website.

2.2 How to make a Favicon for a website from scratch

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

There shouldn't be any problems with generating the icon, because... everything is clear here.

2.2.4 Favicon-Generator.org

Another good online favicon generator. You can get to it using this link - http://favicon-generator.org/.

There shouldn't be any problems with this generator either. The screenshot shows the functions of the online favicon generator.

2.3 How to make a Favicon for a website from an existing image

If you don’t want to make a favicon for your website from scratch, you can use some image that will become the basis of a 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 the two most popular resources.

2.3.1 Favicon.ru

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

There are two ways to add an image:

Using the “Select file” button, find the desired image on your computer and upload it.
Enter the address of the image 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 downloaded, all you have to do is 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 complex. To get started, follow the link - favicon.cc, and then click “Import Image” (in the left window).

Next, click on the “Select file” button and upload the desired picture. 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 reducing it:

Keep dimensions – leave the aspect ratio of the image unchanged.
Shrink to square icon – bring the sides of the image to a square appearance, but the image may be distorted.

After you upload the picture, you can edit it in the online generator or leave it unchanged. If you are satisfied with the resulting favicon.ico, 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 file (Header) 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 tags And

SECOND STEP. Now you need to add the favicon to the root folder of the site. Go to your hosting and place a file called favicon.ico(size 16x16 pixels).

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

The favicon is visible in the browser tab, in bookmarks, on the screen mobile phone. Previously, you could create a favicon of the same size to display in the browser; now you need to generate icons for different mobile platforms and technologies.

What is a favicon

Favicon for a site is a “favorites icon”, an image that is the site’s logo. Initially it was used to visually highlight sites in browser bookmarks. But then it began to appear in browser tabs, in the address bar and on the search results page next to the site url.

For a very long time, the main favicon format for a website was ico. It is convenient because you can write several sizes of icons with different bit depths into a file at once. Nowadays png and svg formats are more popular. The svg format is used in Safari MacOS, and png in others operating systems and platforms. Favicon also exists in jpeg formats and gif, however we do not recommend using them because not all browsers support such favicons.

Check browser support different types favicons using the caniuse.com service.

The most promising format is svg. These are vector favicons that are lightweight but display well.

Submit your application

Favicon sizes

Desktop

Apple

How to create

At first glance the most in a simple way creating a favicon seems like a simple matter of renaming the file to required format. Let's say you have a file favicon.png and you simply rename it favicon.ico. We do not recommend doing this, because in many browsers such an icon will be displayed with an error or will not be shown. It is best to make an icon for a website using special services.

Realfavicongenerator.net– generates favicons of different sizes online. Upload a source file at least 260x260 pixels in size, preferably square. Then select settings for iOS, Android, Windows Phone, MacOS Safari. Optionally select the compression level. As a result, you get all types of icons and embed code.

Favicon.cc– another service for creating favicon in ICO format. You can upload a ready-made picture or draw it yourself using the tools of a graphic editor.

How to install

Set the correct name– favicon.ico or other extension type. However, remember that browsers previous versions will not be able to identify the icon if it is in a different format. Before uploading to the site, open the file properties, make sure that the required format is not only in the file name, but also in its type.

Make cross-platform icons. Write down the correct sizes and formats for different mobile platforms and browsers. Modern robots and browsers, when displaying them, select the most suitable format from those downloaded. It will be displayed better than during resizing, when the favicon is loaded alone and has to be changed to the required size. Use the realfavicongenerator.net service.

Place the files in the root directory of the site and check for correctness. To do this, enter “yoursite.com/favicon.ico” into the address bar for files in the ico format, for other formats - the corresponding file extension. The browser should display the icon.

Write the address in the code on home page in the tag . If the requirement is desirable, but not necessary, because browsers of new versions automatically look for the favicon in the root directory if they do not find it in. Using head you can set for different pages site own icons.

Desktop (ico) -

Desktop (png) -

Apple -

Safari -

Android -

Icons in Apple gadgets are always rounded at the corners; to avoid this, use apple-touch-icon-precomposed instead of apple-touch-icon.

Check the server response. The favicon is indexed by a special robot. For indexing to be successful, check that the link to the favicon is not blocked from indexing in the robot.txt file and returns an HTTP 200 server response.

Find out if the favicon is visible. Check through the services by substituting your website address:

Remember

The most common favicon format is ico, but it is outdated. Better to use png format and svg. Check which formats browsers support using the caniuse.com service.

Previously, it was enough to create one favicon size of 16x16 pixels. Now make icons in all sizes. If you created a favicon of the same size, then many browsers will be able to translate it to the desired size, but errors and incorrect display are possible. If all sizes are specified in the code, the browser will pull up the required one.

To make a favicon, use special services: realfavicongenerator.net, favicon.cc and others. Generate online icons for all types of browsers and mobile platforms at once.

Place the favicon in the root directory of the site or add a link in the tag. If you need different icons for each section of the site, add them on each page.

Check that the indexing is correct. The server response must be HTTP 200. Check the visibility of the favicon in Yandex and Google through search engine services.

The material was prepared by Svetlana Sirvida-Llorente.

Favicon - (from the English FAVorites ICON, translated as “icon for favorites”) - a website icon sized 16x16px or 32x32px, which is displayed by the browser in the address bar or next to a saved bookmark. Traditionally, the name and extension of the icon is favicon.ico.

Our service is capable of converting your chosen image (up to 175 KB in size) into an icon for the site icon (16x16px or 32x32px in size). After generation, you just need to upload favicon.ico to the desired site hosting directory.

Missing icon is an error technical optimization resource, this reduces brand awareness, reduces the CTR of search snippets, worsens the search for a web resource using browser bookmarks, etc.

Yandex has a special bot that individually indexes the favicon of all sites. The frequency of adding new icons to the search ranges from approximately two weeks to one month.

Where can I upload a favicon to have it online?

To display the favicon.ico you created as a site icon, you need to upload it to the root directory of the site (or to any directory) and specify absolute or absolute in the site template code relative path to it (), example code:

Why specify the path to the Favicon?

When using one site icon on the entire site, if favicon.ico is located in the root folder, you don’t have to specify the path to it - browsers will find it themselves and display it as a site icon. Large or unique resources use different site icons for each of their categories. To do this, the paths to different favicon.ico are specified in the corresponding templates.