Favicon creation online. A universal way to create favicons Favicon Service
Favicon Generator is a free online service that allows you to create favicons and icons (favicon.ico file) for your website. This tool allows you to create favicons in all popular sizes, such as: 16x16, 32x32, 48x48, 64x64, 128x128. Select the size and image (JPG, GIF, PNG) you want to convert to ICO format from your computer and click Create.
Create a favicon
To create a favicon you need:
- Choose your favicon size
- Select file and click Create Favicon
- Save the resulting Favicon to your computer
How to add favicon to the site?
Note. If the link to the favicon is specified several times in the HTML code of the page, the robot will select the icon at its discretion. For example, 2 different icons are specified to match different search engines.
Yandex requirements for a favicon
Note: To be displayed in search results, Yandex loads a favicon from the HTTPS version of the site, if it is available. If not, the favicon is not displayed.- The size: 16×16, 32×32, 120×120 pixels.
- Format: ICO (recommended), GIF, JPEG, PNG, BMP.
Google favicon requirements
- Size: The website icon must be square and sized in multiples of 48 pixels, for example: 16×16, 48×48, 96×96, 144×144 pixels
- Format: ICO (recommended), GIF, JPEG, PNG, BMP.
- Make sure the site favicon looks good at 16x16 pixels as the favicon will be rescaled to show up in search results. Note that you shouldn't add a 16 x 16 px icon.
- The site icon should serve graphical representation your brand. This will help users quickly recognize your site when browsing search results.
Favicon display
If the robot has downloaded a favicon, it will appear in search results in within two weeks.Easy creation of a Favicon for a 16x16px site. 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 favicon to the site?
Adding your custom favicon to your 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, must be added following code to your website template:
This code must be placed at the top of your template page, between the tags
....After that, you need to refresh the page in the browser. In some cases, if the browser does not display the Favicon icon, it may be necessary to refresh the browser's cache in the settings.
Functions and features of the Favicon editor?
Our online editor Favicon has a fairly simple interface, while allowing you to create a very high quality favicon icon for the site.
Capabilities:
- Select 1 of 8 preset bright and rich colors for the brush.
- Selecting 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 completely fill in the background or separate part icons if there is separation.
- The Erase tool allows you to erase any part of the icon
- The eyedropper tool allows you to define any color that has been used previously. This tool works only in the area of the editor window.
- Ability to enable / disable the grid, for more accurate drawing of the Favicon
- Ability to change the background to white or checkered
Why do you need a Favicon on a website?
First of all, displaying the Favicon of the site, decorates the site opening tab in the browser and browser bookmarks.
Also, the presence of the 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 creating a Favicon will give your favicon a complete uniqueness. You can completely draw a favicon for a site 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 quality icon that doesn't look like a "pixel", 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 over the necessary area with it. In this case, the icon will get soft corners. With this technique, you can draw ideal shapes (circles, ovals, etc.). Examples of drawing Favicon can be viewed on the page
Now the site's personal icon - Favicon - is a kind of business card any web resource. Such an icon highlights the desired portal not only in the list of browser tabs, but also, for example, in Yandex search results. As a rule, the Favicon does not perform any other functions, in addition to increasing the site's recognition.
Creating an icon for your own resource is quite simple: you find a suitable picture or draw it yourself using graphics editor, and then compress the image to the desired size - usually 16x16 pixels. The result is saved to the favicon.ico file and placed in the root folder of the site. But even this procedure can be greatly simplified with the help of one of the Favicon generators available on the web.
Most web icon editors offer all the tools you need to create favicon icons. In this case, it is not necessary to draw a picture from scratch - you can use a ready-made image.
Method 1: Favicon.by
Russian-language online favicon generator: simple and visual. Allows you to draw an icon yourself, using the built-in 16x16 canvas and a minimal list of tools, such as a pencil, eraser, eyedropper and fill. There is a palette with all RGB colors and transparency support.
If you wish, you can upload a finished image to the generator - from a computer or a third-party web resource. The imported picture will also be placed on the canvas and become editable.
As a result, you get a graphic ICO file with the name favicon and a resolution of 16x16 pixels. This icon is now ready to be used as your website icon.
Method 2: X Icon Editor
An HTML5 browser application that allows you to create detailed icons up to 64x64 pixels. Unlike the previous service, X-Icon Editor has more tools for drawing and each of them can be flexibly configured.
As in Favicon.by, here you can upload the finished image to the site and convert it into a favicon, editing it properly if necessary.
If you want to preserve the details of an image that you intend to turn into a favicon, X-Icon Editor is great for that. It is the ability to generate icons with a resolution of 64×64 pixels that is the main advantage of this service.
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.
Now it's hard to imagine a site that does not have a favicon. A favicon is an icon that is located in the address bar of the browser 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 the site in the list of bookmarks of the browser (in IE, these bookmarks were called Favorites, and hence the name Favicon - favorite icon.
But making a favicon with your own hands is not so easy. It must have an ICO format that requires special software in order to make something worthwhile and considerable skills. Therefore, to simplify life, it is better to use online generator favicon.
There are many services that allow you to generate a favicon from images (it can be a logo, or a specially designed illustration). But most of them have problems with transparency.
Problems with transparency in the favicon generator service
For clarity, we give an illustration "How different favicon generators process transparency and image size reduction."
In this comparison, we used the results obtained on the favicon.cc and favicon-generator.org services. To be honest, until recently, they themselves used the favicon.cc service, but recently an excellent substitute has been found - the #1 favicon generator.
Best favicon generator - www.xiconeditor.com
Like favicon.cc, this favicon generator has its own built-in online icon editor, but its advantage is excellent work with transparency.
It is quite obvious that there is a difference in the quality of the transmission of transparency (apparently the difference is in the quality of resizing 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 previews are much more informative than those of favicon.cc.
Structure: A favicon is a small icon that is used to visually identify your site in bookmarks, and you also see it next to your site or page name in browser tabs. As a rule, a favicon is a 16x16 pixel square in the favicon.ico format. In this article, we will explain what kind of “base” you need to get started, help you create a favicon using image editors, and talk about ways to add a favicon to your site. What do you need to get started?
- Your logo must be at least 512x512 pixels (required square);
- .PNG image format;
- Graphics editor Adobe Photoshop or GIMP.
Create a favicon with Adobe Photoshop
Favicon on a transparent background:
1) Open the logo in PNG format on transparent background in the editor by clicking: “File” - “Open” and select an image on your computer. 2) Remove the company name from the logo to use only the icon by selecting the tool "Eraser" and changing the main color to white.
3) Now, resize the logo to 16x16px by clicking: “Image” - “Image Size”. 
4) And resize it to 16x16 pixels. Your favicon will seem tiny to you, but don't worry, it's how it should be. 
5) Save the image by clicking “File” - “Save As” and select file type PNG. 
If your logo looks great, then go to step 4. Favicon on the background with the corporate color:
1) As in the first option, open the PNG file, but not on a transparent background, but on a background with a corporate color. 2) Remove the text and leave only the icon: use the tool "Pipette" to select a color according to the background - the color on the palette will automatically change to the desired one. Now, click on the brush tool and paint on the text.
3) Resize by clicking “Image” - “Resize”, and enter 16x16 pixels in the corresponding field. If the image looks proportional, save it as a .PNG and proceed to step 4. 
Creating a Favicon with GIMP - GNU Image Manipulation Program
GIMP is a graphics editor that allows users to work with vector graphics. The advantage of this program is that you can create a favicon in .ICO format and do not have to use image converters, as is the case with Adobe Photosop. 1) Open the file in the program by clicking “File” - “Open” and selecting the desired image from the computer.
2) Now you need to remove the text so that only the icon remains: click on the color palette and specify the color code for the corporate background. If you don't know it, just click on the tool "Pipette", point it at the background of the logo and click the left mouse button - the color will be set automatically. Now using the tool "Brush", draw unnecessary text. 
3) Reduce the size of the logo to the standard favicon size - 16x16 pixels by clicking: “Image” - “Resize Image”. 
4) Export the logo by clicking "File" - "Export as ...". 
5) And select the file type to export - Icon Microsoft Windows with ICO extension. and click "Export". 
Ready! Now, you can use the favicon on the site! Benefits of using .ICO over .PNG or .GIF
- Compatibility: All browsers, including IE 5.0, support the .ico format.
- Avoiding 404 Server Errors: All modern browsers (tested with Chrome 4, Firefox 3.5, IE8, Opera 10 and Safari 4) will always request a favicon.ico file, so it's best to always have a favicon.ico file.
- An .ico file can contain more than one icon, so there is no need to create multiple files for 16x16 and 48x48 pixel icons.
Convert .PNG to .ICO with online converters
In order to convert .PNG file to .ICO you can use online converters. For example, we chose online-convert.com, but you can choose any other from the search results, the principle of their work is approximately the same. So: 1) Enter the site and in the left sidebar select: “Image Converter” - “Convert to ISO”.
2) Select files to convert on your computer by clicking the button “Select Files”, or by dragging and dropping files into the appropriate field, and click the “Start Converting” button. 
3) Now, click "Download" to download your .ico file to your computer. Also, it is possible to upload the file to cloud storage or download the file as a ZIP. 
How to install a favicon on WordPress?
Upload your favicon (favicon.ico) to the main (root) directory of the site. The root directory is the main folder where all your WP files reside, such as index.php and the wp-admin, wp-content + wp-includes folders. Be sure to place favicon.ico on the same level as these folders and index.php. 1) On WordPress open "Admin Panel".
2) Enter the section 
3) Click on 
4) Click on the file that is called Header or to edit. 
5) Find the line of code that starts with and ends with /favicon.ico "/>. Change it if it exists or add the following code below the HTML tag
. In the example, we use the name of the favicon as "favicon.ico". You can name your favicon whatever you like. The code: /favicon.ico"/>; 6) Save your changes. conclusions: When designing your site, you must be sure that you don't miss important details, even as small as the favicon. Adding an icon is really not difficult. But this tiny thing shows that you have thought through your design and taken care of the details. Do you have any questions or want to share your experience of creating a favicon for your website? Welcome to the comments.
