home Accounts How to make a favicon from a miniature. A universal way to create favicons. How to Create a Favicon with Logotizer Online Generator

How to make a favicon from a miniature. A universal way to create favicons. How to Create a Favicon with Logotizer Online Generator

favicon-(short for words "Favorite Icon") is a small picture of size 16×16 pixels, that a visitor to your site will see. It appears next to the site's URL in the browser's address bar. In addition, this icon is displayed next to the name of your site in the list of open tabs, in bookmarks and in search results, making it easier for the user to quickly find your site among other sites.

Default as icons site displays the browser icon. To make the site different from the rest and not get lost in the countless gray tabs opened by the user, you need to make your own original favicon.

While many modern web browsers support favicons in GIF, PNG, or other popular file formats, all versions Internet Explorer still require icons as files ICO(Microsoft format). In this format, any browser will understand your icon.

Why you need a favicon

A favicon is needed so that your site somehow stands out in the crowd on the search results page and is visible in many open tabs in the browser. A good icon is like a logo for your site, which will be recognizable and create a certain attitude and cause a special level of trust.

Naturally, the favicon is able to attract the attention of the user and he will read the title-link to your article. The title, in combination with a good snippet and a beautiful icon, will increase the click-through rate and, accordingly, the traffic of the resource.

Immediately I want to note that for sites that have the label "GS" - the icon itself is not able to improve the impression of the resource. But it's like a meeting on clothes. A wonderful favicon is sure to create the first impression of the site, conducive to visiting.

How to create a favicon

Of course, you can try to find a ready-made favicon.ico file at www.iconfinder.com, but I think many people would like to make something of their own. After all, it is the favicon that will make your site stand out in the search results. You now know how to do this. So let's get started.

Logaster is an online service for creating logos and corporate identity elements. In it, you will automatically, in just a few clicks, receive an icon for the site in ICO and PNG format.

But keep in mind that no automatic logo generator can replace human creativity.

Of course, large companies will not use such tools. They will find an expensive designer who will create a professional logo for them. But, for small firms, private entrepreneurs, such a tool can be just the way.

How is the process of creating an icon in Logaster

In order for the favicon to match with your logo, you will be prompted to create a logo first (it's free).
Write a name and, if you want, a slogan, indicate the type of activity, and Logaster will independently prepare many logo options for you.
Choose a suitable logo, you can change it later.

That's what I did

Now you can click on the "Download Logo" button. V free version it will have a watermark Logaster.com

The logo can be purchased. After that, you can download in the selected format (PNG, JPEG, PDF, SVG) and size (1024 px, 5000 px).

Now let's move on to creating the favicon.

Again, choose the option you like.
You can change the shape to be square, rounded, round, or not fit at all into a specific shape.
If desired, add a colored stroke by clicking on the Stroke tool.
Click on the "Save" button.

Here is the favicon. Basically, it looks good.

How to add a favicon to your site

Buy and activate a favicon.
Download it.
Unzip the downloaded file to the root folder of your site.
Paste the following code on all pages of the site in the tag :

discounted design package

Additionally, you can purchase the entire set of corporate identity. Here is one of the options.

Related article: How to connect Yandex.Speller to WordPress

Plugin for creating favicons

There are a huge number of different programs for creating favicons. Basically, they are primitive, allowing you to create icons using 16 colors.

You can create a favicon right in Photoshop. To do this, you need a plugin that can be downloaded from www.telegraphics.com.au. To install it, copy the file ICOFormat.8bi to c:Program FilesAdobeAdobe Photoshop CS2Plug-InsFile Formats directory.

With a plugin ICOFormat.8bi, you will be able to save pictures as ".ico-files".

How to install the ICO (Windows Icon) Format plugin

64-bit Windows (Vista/Windows 7):
- Restart before installing;
- Put the plugin in the C:Program FilesAdobePhotoshopPlug-InsFile Formats folder, but I have a different structure, I have this file stored here: C:Program FilesAdobeAdobe Photoshop CS6 (64 Bit)Plug-ins .
- If you are running on a 64-bit Windows system and are launching the 64-bit version of Photoshop CS4 or CS5, download the 64-bit version of the plugin and put it in the Plug-Ins folder corresponding to 64-bit Photoshop (i.e., the one in "Program Files" not "Program Files (x86)").
Move the plugin into the "File Formats" folder inside your Photoshop Plugins folder:
- For Windows (32-bit), ICOFormat.8bi
- For Windows (64-bit), ICOFormat64.8bi
- For MacOS X, ICOFormat.plugin(note that separate versions are provided for CS2, CS3/4 and CS5)
- For Mac OS X/Classic, icoformat
- For 68K macOS, icoformat(68K)
If using Corel PSP Photo X2, put the plugin in C:Program FilesCorelCorel Paint Shop Pro Photo X2LanguagesENPlugIns
Quit and relaunch Photoshop, if it's already running.

There is also an online service www.convertico.com. ConvertICO is free online converter ICO/PNG files. It works fast and is easy to use. It is used to convert desktop icons, application icons, and website favicons.

How to make favicon.ico yourself

Open Photoshop.
Create a 32x32 px document.
Paste from Illustrator a smart object of the finished image.
Use the "Save As" command to save the favicon in .ICO * format.
Upload the resulting favicon to the root of the site and connect it through the WordPress theme, or manually register it in the site template. I already wrote about how to connect favicon .

* If you do not have a special plugin installed ICO (Windows Icon) Format, you can download it from www.telegraphics.com.au/sw/ . There is for Macs, Windows 32, 64-bit with support for all versions of Photoshop, including CS6.

favicon display

To your site display favicon, it can simply be placed in the root of the site. The browser and search engines themselves will determine that you have a favicon.ico file and will display it automatically. This method is the simplest and it is effective in 95% of cases. But, you can explicitly include a favicon.

In this tutorial, you will learn how to create a Favicon, you will learn what this icon is for, get recommendations on how to improve its appearance and attractiveness.

In addition, we will look at the process of creating and adding a Favicon for the site.

favicon- this is a small icon that you can see in the address bar of the browser and on the tabs open pages, as well as when adding a site to the browser bookmarks, this icon is also added there.

In addition, the Yandex search engine displays the Favicon icon in the search results next to your site. Your task is to make this icon stand out, be remembered, catch the eye against the background of other icons in the search results, and also have some association with your site. A beautifully crafted and attention-grabbing Favicon icon can significantly increase the number of visits to your site compared to those that don't have it or look unattractive.

Here are some guidelines to keep in mind when creating a Favicon.

#one. The icon should be easily recognizable and have associations with your site or the niche your site belongs to. As an icon, you can use a logo or a symbol associated with your site. In addition, you can use the color scheme in which your site or logo was created.

#2. Don't use standard icons. Many, after creating a site on a particular CMS, leave the icon without changing anything. As a result, in the issuance search engine there may be more than one site with this icon, but many. By doing this, you will not make your site stand out, so use only unique Favicon icons created specifically for your site. This also includes the situation when icons from various collections or interface elements of other sites are used. Remember, you need a unique favicon to stand out.

#3. Try to use brighter and lighter colors when creating an icon, as a rule, they attract more attention.

#4. Don't use animated icons. Firstly, animation is not supported by all browsers, and secondly, the visitor's attention should be focused on the content, and not on the icon.

Now let's look directly at the process of creating a Favicon. There are many services for this. However, they are more suitable for those who already have a ready-made icon that they ripped off somewhere or took from some collection. But as I said above, the icon must be unique, so here I will look at the process of creating it using Photoshop programs, on the example of the site site.

Create a Favicon Preset in Photoshop

#one. Create new document in Photoshop 64*64px , to do this, go to the menu "File" >> "New..." or press the keyboard shortcut Ctrl+N. In general, the icon itself should be 16*16px , but it's better to create it in the same size first, and then reduce it to the required size.

#2. In my case, I don't have any logo for the site, so I decided to use the "W" character that starts the site address, as well as the colors that prevail at the top of the site are blue and yellow. So I set the color value to #6A91D0 and using the Fill Tool (G) set the blue color to the previously created document.

#3. After that I selected the Type Tool (T), added a "W" character and gave it the following color value #FAC31D.

In order for the symbol to stand out more against the blue background, I added a black stroke to it and a size of 2px. To do this, go to the menu item "Layer" >> "Layer Style" >> "Stroke", choose a color and size for the stroke.

After that, you need to merge the layers, for this you need to go to the menu item "Layer" >> "Merge Visible" or press the keyboard shortcut Shift + Ctrl + E.

In order for the lines to be smooth without serifs, I added a blur. To do this, go to the menu item "Filter" >> "Blur" >> "Gaussian Blur..." and set the radius to 0.3 pixels.

Place your symbol or image so that it takes up as much space as possible, because if it is small, then with a 16 * 16 icon size it will not be noticeable.

#4. Now we need to resize the icon. To do this, go to the menu "Image" >> "Image Size" and set the size to 16*16px.

#5. It remains to save the icon. The Favicon icon must have the name favicon and the extension .ico. The thing is that by default, Photoshop does not save images in .ico format. Therefore, save it in .png format, to do this, go to the menu item "File" >> "Save As ..." and select PNG from the drop-down list.

Converting an image to .ICO format

After that, we convert it to .ico format using the service. Go to this service and using the "Browse" button, select the previously saved file in PNG format, and then click on the "Create favicon.ico" button.

After that, the link "Download favicon.ico!" will appear on the loaded page. by clicking on which you can save the finished Favicon icon to your computer.

Now it's time to add a Favicon to your site so that it appears on all of its pages. To do this, place the icon in the root folder of your site. If your site is already hosted then this folder is usually called "public_html". Then, in every page of your site, before the closing tag add the following lines:

But these lines must be added to each page if you have an HTML site. But since, most likely, your site was created on the basis of some kind of CMS, then it will be enough for you to add these lines to the main file of your theme that you use for the site.

If you are using WordPress, then go to the wp-content/themes/your-theme-folder/ find it and open the header.php file, then paste the necessary lines and save the file.

If you are using Joomla, then go to the templates/your-theme-folder/ and open the index.php file, insert the necessary lines and save.

Some themes in WordPress and Joomla may already have their own paths to the favicon.ico file, in this case, delete them and replace them with your own.

If you are using any other CMS, then do everything by analogy.

On the page tabs and in the address bar of the browser, your icon will be displayed immediately, as for the Yandex search results, it takes time for a special Yandex search robot to find your icon, after which it will be displayed in the search results.

The material was prepared by the project:

Hello, dear readers of the blog site. The conversation in today's article will focus on the so-called Favicon.ico icons. We will figure out what a favicon is, why it is mandatory to install it on your site, and how to create an icon of the right size yourself.

In principle, to create a favicon, it is not at all necessary to use any special online generators, although this is quite convenient and simple. You can try to make it in Photoshop, but by default, unfortunately, it does not know how to save images in the ICO format. Therefore, in order to teach Photoshop to work with ICO, you will need to install a special plugin.

But if you are not on a friendly footing with Photoshop (as well as with it), then it will be much more convenient for you to use one of the many online services below. At the same time, in some of them you can completely draw a new icon from scratch, while in others you can remake an image you already have (which suits you) into a favicon format.

Well, the easiest option is to download a collection of Favicons from some online gallery or catalog. Read below to find out where you can get hold of them.

How to create a Favicon online and where to download their collection

Let me first give examples of services (so-called favicon generator), where you can design quite a decent mini-logo for your site without any special skills, or at least automatically convert a suitable image into the format necessary to upload a favicon to the site.

favicon.cc— pretty handy online favicon generator. Using it you can, for example, create your own icon from scratch (full exclusive) by drawing it pixel by pixel. To do this, you will need to click on the "Create New Favcon" button on the left side of the service window.
In the center of the generator page is an area where each square is a pixel of your future favicon. Your task is to color these squares with different colors. To paint one square with a color, you need to check the box on the right side of the service window in the “Color Picker” field, select the desired color on the palette located there and click on the desired square. To remove incorrect shading, check the "transparent" box and click on the square, as a result of which it will become colorless (transparent).
To move a pixel across the generator canvas, you will need to check the "move" box. You can see the result of your work in real scale in the “Preview” area under the canvas. If the Favicon you created suits you, then click on the "Download" button to save it to your computer. As a result, you will receive a graphic file, which you can then download and upload to the hosting server.
Now you know how to make a mini logo for your website from scratch. But if you do not have graphic talents, then you can use the online generator service upload any image for future favicon, which will serve as a blank. The picture can be absolutely any size and format. To upload an icon file to an online service, you will need to click on the “Import Image” button on the left side of the service window.
In the window that opens, by clicking on the "Browse" button, find a suitable image on your computer. Then choose what to do with the aspect ratio of your picture when converting it to 16 by 16 (square). This is relevant if the image you are uploading is not square. In this case, there are two options: leave the aspect ratio unchanged (Keep dimensions), or convert the image to a square view (Shrink to square icon). In the second case, the image of the future favicon will be distorted along one of the axes.
To upload to the online generator and convert your image, you will need to click on the "Upload" button. The Favicon.ico created from it will be editable in the same way as the one you drew. When you finish conjuring on a masterpiece, then click on the "Download" button in order to download it to your computer.
This online service also has the ability to use collections of favicons created by other users and posted in general access. In order to view the exhibits available in the gallery, you will need to click on the left side of the window either on the “Latest Favicons” button to view collections sorted by creation date, or on the “Top Rated Favicons” button to view galleries sorted by rating.
favicon.ru- once this service was much simpler than the online generator described above, but recently it has become almost its analogue, but only in Russian. Favicon.ru allows you not only to convert any image you have (on a computer or on the Internet) into an ICO format with a size of 16 by 16 pixels, but also makes it possible to draw it from scratch pixel by pixel.
This version of the online favicon generator is notable, perhaps, only because it is domestic. That is why he is included in this article. So, to work with it, you need to click on the "Select file" button on the main page at the top and specify the path to the desired image on your computer. The image downloaded and converted to the Favicon.ico format can be corrected and then saved to your computer. Everything is simple and convenient.
Logaster.ru is an online logo generator, but in addition to logos, it also creates a favicon. Unlike all other services, you do not need to draw a favicon design or convert it from a logo.
In order to create a favicon, you first need to enter the name of the site or company and select the type of activity. The service will offer several dozen favicon templates ready for use. You can read more about how to create a favicon. After creating Favicon.ico, you can download the file to your computer in ICO or PNG format.

After that, you just have to click on the "Create" button. On the page that opens, you will see a link to download the resulting favicon.

A selection of online generators, collections and galleries of favicons

If for some reason you did not like the favicon generator described above, then I can offer to try your luck on one of the following free online services:

FaviconGenerator - allows you to convert any image downloaded from your computer to the desired favicon format (you can upload pictures).
AntiFavicon is quite an interesting Favicon Generator. On it you can create a favicon with an inscription. You will need to enter the text of the inscription in the "Top text" and "Bottom tex" fields, and adjust the color scheme in the "Colors" area.
FavIcon from Pics is another simple online service - you specify the path to the image on your computer, convert and download the resulting file in ICO and GIF format.
Iconj - it is noteworthy that you can either download the created icon or leave it on the service and get a link to this file
DeGraeve is a fairly powerful Favicon Generator, similar in functionality to the previously discussed Favicon.cc. Here, too, you can do everything either from scratch, or upload an image, which can later be corrected and downloaded already in the ICO format of a suitable size.
Generator - allows you to both generate a favicon from an uploaded image, and create it from scratch in a special editor.
The favicon.ico online icon editor - well, everything is with it - both the creation of favicons from scratch, and the refinement of an existing image.
Online Favicon is a very functional tool for creating and editing mini logos
Free Favicon Generator - in case none of the above list suits you.
Favicon generator - simple and tasteful...

If you don’t give a damn about the exclusivity of your mini-logo for the site, and mess around with editors and generators, you can find the right icon for yourself on sites where they are a dime a dozen. After all, in fact, absolutely any 16 by 16 pixel icon that you can download from the network or find in the depths of your computer will suit us.

But you need to remember that the favicon should first of all attract the attention of users. Ideally, the user will recognize your site just by looking at the Favicon, so it's better if it's unique, but you can also look for something not hackneyed in the bins of the Internet.

If you have no desire or opportunity (you are not an artist and never were), then the easiest way is to try to search in galleries with collections of free favicons:

Iconj is a fairly large collection of icons designed by other people and made available to the public.
Favicon.cc - 55 thousand different options for all occasions. There are also animated favicons, which will only be visible in the FireFox browser.
The Favicon Gallery - a few more icons that fit the size

If you know of any other similar resources, then I will add your links to this list.

How to install Favicon on the site and set the path to it

Your browser and Yandex crawler will look for the favicon first of all in the root folder of your site. Therefore, you can simply connect to the site via FTP and upload to its root directory (usually the public_htm or htdocs folders) your Favicon.ico file (it is better to write its name with a small letter). Now open your resource in some browser and see if the icon on the tab has changed. Changed? Not? Well, that's okay.

If you didn’t succeed in putting the favicon in this way, then you may have to, because. it often happens that it loads from the cache old version. You can try, for me it responds best to ongoing changes without clearing the cache. If it's not the browser cache, then it means that your site has a different location for the favicon, which is different from the root folder. How to check it?

Open the source code of any page on your site. To see its source code, just click on the page right click mouse and select the appropriate item context menu(For example, " Source" in the old Opera, or "Page Source Code" in Mazila Firefox, or "View Page Code" in Google Chrome, or "View HTML Code" in IE) or press the keyboard shortcut Ctrl + U. Now look at the top of the page code for a line that specifies the path to favicon.ico.

It might look something like this:

Now, knowing this path, you can again connect via FTP and upload your favicon to the specified path, replacing it with the one already on the site. If there are no changes in the address bar of the browser again, then try clearing the browser cache again.

V Joomla The favicon usually lives in the folder with the template you use (the path to it in Joomla 1.5 was written in the index.php file from the directory of the same template, but in Joomla 3 everything became a little more complicated). Those. to change the favicon in Joomla, it will be enough to follow this path and upload your favicon.ico file there, and answer the question about the replacement in the affirmative:

/templates/folder_with_design_template_used/favicon.ico

favicon file in WordPress by default, it can also be in the folder with the theme you are using (the path to it is also set there):

/wp-content/themes/Folder_with_the_design_you_use/favicon.ico

Basically, if you want set or change the path to your favicon, which would be understood by both browsers and the Yandex search robot, then you will need to write in the corresponding template file of Joomla, WordPress or any other engine, between the opening and closing tags HEAD, the following lines of code:

In which template file you need to write these lines depends on the engine of your site. For example, in in WordPress you need to open the header.php file for editing: wp-content/themes/Folder_with_your_theme_of_design. Open header.php in the editor and at the very beginning find the opening Html HEAD tag. Anywhere after it, but before the closing HEAD, you write one of the above lines of code with the path to your mini-logo image file.

How to install animated favicon? Basically, exactly the same as the usual one. Only the code inserted into your site template will differ, with the help of which you indicate to browsers and the Yandex search robot the path to the desired graphic file. The fact is that the animated Favicon will have a GIF extension, and, therefore, in the lines of code you will need to write something like this:

That's the whole difference between animated favicons and regular favicons. But it should be noted that the animated icon will work only in FireFox, in other browsers it will be static. Yandex, when loading your animated favicon, converts it to a static PNG format. But, in my opinion, the game is not worth the candle - it does not make much sense to install an animated one instead of the usual mini-logo for the site. But that's just my IMHO.

Good luck to you! See you soon on the blog pages site

Where to download the finished version

far from the best choice but someone is using it. You can download a ready-made favicon from the Internet and don’t particularly bother creating your own. All of them are presented in convenient formats and the right sizes.

Just enter the desired query into the search engine, something like “Download ready-made favicon”, after that you will be presented with a huge number of different variations.

Download the picture to your PC, and then install it on the site. Everything is simple. They are available absolutely free of charge, no one will scold you. Although if we are talking about a company, even a small one, then when someone else's logo is found, unpleasant incidents may arise.

Ready-made options can be searched on various sites. As a rule, there are whole collections of various thematic logos that some webmasters may like.

But I will repeat once again that it would be better to create a favicon yourself.

Create a favicon

Online Services

You can draw a favicon in online services. Simply enter the appropriate query into the search engine, after which your attention will be presented with a whole list of sites that can help you realize your plan.

This course will cover the most important features of competent creation information projects, interaction with the team and other useful aspects that you will definitely need when developing your business.

Favicon - the term literally translates as "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 the search bar and other places, and plays an important role in the personalization of the site.

Due to the non-standard format and small size, creating a favicon can be difficult, both from a technical and design point of view.
An equally difficult task is to ensure that the favicon is compatible with different browsers.

In this article, you will learn how to make a favicon - we will give design tips and tell you about services for creating a favicon, and how to add a favicon to the site.

What is a favicon and why is it needed

Even though the favicon is a very small graphic object, it is extremely important in website design and in general.

Click to enlarge the picture.

Firstly, favicon makes your site more personalized and consistent uniform style with other graphic elements such as a logo.

Secondly , the favicon makes your site stand out among other web resources in the search results list. A site without this mini-icon will look faded and lose to competitors. In a word, the favicon is just a “must have” for websites.

Thirdly , a favicon allows the user to find your site faster in a directory of bookmarks or other desktop icons.

Creating a favicon design

The favicon should capture the essence and brand in a tiny sign the size of a smiley face. good decision will become a simplified version of the company logo, but please note: a full-fledged logo with text and trademarks is not suitable for this purpose.

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

Don't use text

You should refuse to use text, because due to the small size of the favicon, the inscriptions will be unreadable. Place 1, maximum 2 letters on the icon - for example, the first ones in the name of your company or web resource; in this case, they can still be distinguished.

Favicon pixelization

The favicons are so small that every pixel matters. Often when you reduce a full-sized logo, the image is blurry.

This is a snippet of the full size Facebook logo after it has been scaled down to 32x32. It is easy to notice that the image "floats" along the edges. To avoid such a defect, you should edit at the pixel level.
When working with icons, I prefer to use bitmap editing software (such as Photoshop or Pixelmator). First, I scale down the full size logo to 64x64px since that's the largest favicon I'll need. The work is very painstaking, it can take an hour or even two, but the result is simply excellent.
If you don't have the time and skills for such operations, it's better to use online services, such as the logotizer.ru

Favicon size

Given a 64x64 icon, I create 32x32, 24x24, and 16x16 px icons in the same way. Each of them has its own purpose:

- 64x64 - "Reading List" in Safari and Windows
- 24x24 - Pinned sites in IE9.
– 32×32 – For high resolution screens.
– 16×16 – Commonly used in browsers such as IE, Safari, Chrome, etc.

But the creation of smaller favicons is not limited to: additional editing at the pixel level is often required. You can also add an alpha channel if you see fit. If earlier this caused difficulties, now almost all browsers support transparency in favicons.

Favicon Formats

In the past, when only Windows ICO format files were supported, we could save time by saving a 16x16 favicon as a GIF and giving it the .ico extension. This approach worked flawlessly! But now this method is not necessary as tools for creating ICO files can be easily found on the Internet. Moreover, and are now used for favicons, but only the following two are the most common.

ICO

The palm belongs to the ICO format. Unlike PNG files, ICO files can have different resolutions and bit depths (which is great for Windows). Internet Explorer uses favicons of various sizes (for example, 32-pixel icons for the Windows 7 taskbar), and therefore, in this case, the ICO format is the only option.

PNG files are very convenient because you don't need any special tools to create them. This format supports the alpha channel and allows you to create files of the smallest sizes. Perhaps the only disadvantage of the PNG format is that it is not supported in Internet browser explorer.

There are other options:

– The GIF and animated GIF formats have no advantage other than being compatible with very old browsers.
– The JPG format is not recommended even if the image is in the form of a photograph. This format lacks the crispness of PNG, and the only advantage is smoother transitions between colors - a nuance that is completely invisible in a very small image.
- SVG could be a great option if more browsers supported favicons in this format. So far, there is only compatibility with Opera.
– There is also a so-called “sub-format” of PNG – APNG (animated PNG), which is supported by Firefox and Opera. However, the feasibility of its use remains in question. An animated favicon can be distracting and even annoying to the user.

Create favicon online - tools and online services

We have selected for you the most useful services that will help you create a favicon online.

Logotizer

Logotizer is a new, simple and convenient service for creating a favicon and logo for your website.
With this online favicon maker you can create a favicon from scratch. The service is aimed at beginners, so develop good design won't be difficult.

How to Create a Favicon with Logotizer Online Generator

The main workspace is on the left. On the right, you can see how the favicon will look on different media - a browser tab, a computer taskbar, or a smartphone screen. Very convenient and visual.

First you need to choose a shape for the favicon. There are a lot of them, more than 50. We advise you to choose simple and uncomplicated shapes to make the favicon easy to understand and remember.

At this stage, you also define the color of the shape that will be used as the background of the favicon, and choose the border. See what color dominates your logo (if any), what colors are the main ones on your site. It is within this range that we recommend creating a favicon design.

Below the “Form” block is a collection of shapes (symbols). There are not so many of them, it’s a pity that you can’t upload your own options; but the choice is still quite interesting.

Change the color, size, position of the shapes! In a word, experiment, good, the service allows you to do this.

Once the shape is selected, you can add your own 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 a plus. As with shapes, you can change the color, size, and position of the text.

If you decide that some favicon layer is temporarily bothering you or not needed at all, you can simply hide it.

After creating a favicon, the service will offer to save it. Register an account (in 2017 there is no way without registering), and after that you can download files for a small payment - 199 rubles.

The site also contains a small instruction on how to add a favicon to the site, so you should not have any problems adding a favicon to the site. Below in this article are also similar recommendations.

After payment, the user immediately receives 10 favicons of different sizes for all devices needed today (Apple touch icon, Microsoft Application Icons and others).

The favicon.ico file itself is multi-sized and contains icons of 4 sizes in 1 file (16px, 24px, 32px, 64px). Accordingly, if you add the site to your browser bookmarks or open the history, you will be able to observe icons of different sizes, but they will be displayed clearly and without blur.

In general, the service is good. Simple, convenient, nothing more.

RealFaviconGenerator.net

is a simpler favicon generator that allows you to create favicons for any platform. Moreover, you can test the favicon on the resource. Enter your site's URL and you'll see how your favicon looks in every browser and every operating system. Real Favicon Generator will also tell you how to fix imperfections and make your favicon even better.

favicon.by

favicon.by is another free and easy to use favicon generator that converts PNG, JPG and GIF files to .ico format. Upload an image from your computer, choose a size (16x16px or 32x32px) and click on the "Create" button. To save the received favicon on your site, follow the instructions.

The service also makes it possible to draw a logo by pixels, but, to be honest, not everyone can do it. For example, I couldn't. That's how curvy I am :)

How to add a favicon to a website

You can add a favicon to the site by making a few edits in the HTML code of the site page.

Step 1: Upload the “favicon.ico” file to your hosting server.

To do this, go to your FTP server using this link:
ftp:// [email protected]
Enter your username and password. They can be obtained from your hosting company's admin panel.
Upload the favicon files to the root directory. The root directory is usually named "public_html" or "www".

Step 2: Add a favicon to the HTML.

Keeping the FTP server window open, download the “index.html” or “header.php” file.
Then you need to upload the code. The downloadable code depends on your website.
If your site is in HTML, find the HEAD area in the index.html file and paste the following code:

If your site is WordPress, find the HEAD area in your header.php file and paste the following code:

/favicon.ico” />

These codes allow browsers to find your favicons.
So, you have installed your favicon!

How to Add a Favicon on WordPress and Other Platforms

If your resource is based on WordPress or another CMS, then adding a favicon to the site is very simple. In general, the algorithm for adding a favicon for different platforms will be the same.
1. You need to go to the site console.
2. Find the "Design" or "Appearance" section.

3. Go to the “Theme Settings” section and find “Favicon” there.

4. Upload a favicon from your computer.

5. Save and refresh the page.

How to create more complex favicons

This article covers simple and quick ways to create favicons that are compatible with almost any browser and operating system. But when it comes to web design and development, there is no limit to perfection. If you want to learn how to make more advanced favicons, iOS home screen touch icons, Windows Metro interface icons, Google TV icons, and more, I recommend you check out these tutorials: favicon cheat sheet. It contains complete information on the topic and good sources are given. This is a great option for those designers and developers (myself included) who are constantly looking to expand their knowledge.

With Favico.js you can create dynamic number favicons.

You may also need a dynamic favicon, which has an icon with a changing number. To create such favicons, I advise you to use the service favico.js, available on Github. While dynamic favicons are not compatible with all browsers. But for those browsers that support them, these icons can be an interesting and useful addition.

If you want to add another tip to this article or ask a question, leave a comment below!

How to Create a Website Favicon - Tips and Services updated: February 7, 2018 by: admin

Setting up and optimizing operating systems