How to make a favicon file. A versatile way to create favicons. How to add a favicon to WordPress and other platforms

Today, let's talk again about images for a blog, that is, about a project icon called favicon. Let's discuss what a favicon is, how to make it and connect it to our website. And also, what size should this image be and why each of you should, simply must, install it. After all, even this icon can affect the traffic to your blog.

What is a favicon?

The concept of favicon is quite simple and is formed from two words in the Latin alphabet (in fact, like everything on the Internet) - favorites icon. This, in turn, can be translated as an icon or an icon. The meaning can be like that; favorite icon or favorite. Why such a name? Yes, everything is simple, favorites is just the name of bookmarks in the browser, respectively, the name can be interpreted as a picture for a bookmark or browser tab. After all, you could not help but notice that when you open a site or add it to bookmarks, we see not only its name, but also its picture, which is called a favicon. I hope I could explain what kind of animal this is?

What is a favicon for?

Well, here everything is simpler than a steamed turnip, a favicon is necessary for the individualization of an Internet project. That is, another distinctive feature of your blog will be this image, which will not only make it more convenient to use your site in the browser, but also, with the right approach, will increase the number of visitors to your project.

First, it can be convenient in the browser, why? For example, when I have a bunch of tabs open, I can navigate by the icon of the site that I need at the moment. That is, it is convenient for people like me.

Secondly, this picture can attract more visitors to your resource from the Yandex search engine if it is catchy and stands out from others, but without fanaticism. Due to the fact that Yandex substitutes a favicon on the first nine SERP pages, your blog will be different from others. Exactly because of this reason it is worth thinking about connecting a favicon to your project... This is how the first SERPs look like.

Make favicon will not be difficult, because the network has a huge number of generators that are able to make a favicon from ordinary images and make it possible to draw it from scratch yourself. Still, the image can be made using Photoshop, and then using generators to convert it to the desired format.

The differences between ordinary images and icons are small, but they are there. The picture should be simple (complex graphic elements will be difficult to see), 16 × 16 pixels in size and must be in ico format. Of course, you can also use png or gif formats, but such images will not be displayed in all browsers, so the best option is to use the ico format.

I don't see the point in telling each step about how to make this icon, because everyone can handle it. The main thing is to take into account the requirements for the images and everything will work out. In short, download or draw an image and make a favicon using online generators. Online generators can be found by typing in Google or Yandex search - favicon. Or here is a link to a service with which you can draw from scratch or make a favicon from a finished image: http://favicon.ru/

How to connect a favicon for a website?

Ok, the icon is ready, now how do I get browsers to start show favicon for the site?

After using the service, download the ready-made icon for your blog to your computer. And upload the picture using ftp-client to the root folder of the blog (public_html / site / your_file_in_ico_format) or to any other. But it's best to go to the root folder, it's just easier when composing the path to the file.

So, the file is uploaded, what next? Now, you can check if in doubt that the file is uploaded to the root folder: your_site / favicon.ico. If the file is downloaded to the root folder then it will be displayed at this address. Next, you need to register for each page of the resource between the tags and the following code:

And if the icon is in another folder, then it should be like this:

This code is generally accepted for many Internet resources and will work on any engine. But you can write it differently for different engines. For example, for wordpress, this code would look like this:

/favicon.ico "/>

Only, in this version, the icon must be in the template folder. For example (public_html / site / wp-content / themes / your-theme / favicon.ico).

After these actions favicon for the site will start working and you can see it in the browser tabs. But in Yandex search results, the file will not be shown immediately, you must first wait until the Yandex robot indexes the icon and only after that it will start to appear in the search results, and then provided that your blog will be on one of the first nine search results pages.

That's all. If something is not clear - ask - we'll figure it out. Until next time!

Favicons are a very small, but by no means the very last, part of every site. They appeared with the birth of the Internet and remain in demand to this day. There are several ways to create them. You can use plugins for programs, or you can use special web utilities. Let's talk about them.

X-Icon-Editor

Unlike the previous tool, favicon.cc contains fewer drawing tools. Here you can only draw individual pixels with a specific color and transparency. This tool also allows you to import images, edit them as needed and export them as favicon.

Thanks to a special panel, in the process of drawing a favion, you will immediately see how it looks within the Internet Explorer browser.

Antifavicon

The standard favicon size (16x16) is, of course, not enough for text. However, Antifavicon allows you to put two lines of text in this small space. The font used is certainly not so hot, but what can you do :).

The set framework is of course constraining. However, after looking at some examples, you can come up with something pretty interesting.

Faviconist

The last service we'll look at is Genfavicon. Here you can upload an image, convert it to an icon and immediately see how it will look in the browser. After that you can download the icon of the specified size.

All of the services that we discussed today have their pros and cons. However, there are those among them that can provide something more than the competition. So bookmark these sites. They will definitely come in handy.

A favicon is a small picture that is displayed on a browser tab. Also, favicons can be seen in browser bookmarks - this is done so that the user can quickly find the desired site. Despite its small size, the favicon is well distinguishable and greatly speeds up the search for a site or web page. For the first time, the ability to place an icon next to the name of the site appeared in 1999 in the Internet Explorer 5. At the same time, the minimum size of the favicon was determined - 16 by 16 pixels. Over time, this size became the standard and today it is difficult to imagine a professionally made website that does not have a favicon.

Any bitmap is suitable for creating a favicon. The main thing is that it should be laconic enough, since it is difficult to place a complex picture with many details in a 16 by 16 pixel square. Once the image is selected, you can use one of the many favicon generators and the result is an ISO thumbnail. This format is the standard, although almost all popular browsers support PNG, JPEG and GIF formats. the site brings to your attention the 10 best favicon generators.

A very easy to use favicon generator. The user just needs to select the desired picture and click the Generate Favicon button. In this case, the size of the image should not exceed 150 kilobytes. After that, the favicon must be placed in the root directory of the site and place the generated line of code anywhere between and... With this generator you can create icons in JPG, GIF and PNG formats.

This online generator converts JPG, GIF and PNG images to ISO format. There are no restrictions on the size of the uploaded file. You can create favicons of 16 by 16 and 32 by 32 pixels.

Faviconmatic generator Faviconmatic creates icons in a wide variety of sizes. If you suddenly need to generate a large icon, for example, 64x64 pixels, there is such an opportunity. But it's better, of course, to stick to the standards. According to the creators of the site, the generator is very good at converting images that are perfectly displayed on all browsers. Using the site is very simple - you just need to click on the image upload button and select the desired file. The minimum size of an uploaded image is 32 by 32 pixels.

With this generator, you can create favicons by uploading pictures from your computer or from the Internet. Also, users have the opportunity to draw the icon themselves - the site has an online editor. To get started, you need to select a background color and then edit the pixels by painting them in contrasting colors to the background. After the icon is created, you can see how it will look in the tab. If the result suits, then the user only has to select the size of the favicon (16x16 or 32x32 pixels) and click the Download button. The generator will create a favicon in ICO format.

Free online generator Freefavicon creates favicons from raster images in GIF, PNG and JPEG format. The creators of this tool recommend using simple images to create the icon, as complex logos and graphics do not display very well. It is also recommended to use square images, as the image is distorted when the image is scaled. After selecting the desired file, you need to press the Favicon Go! and download the zip archive with the favicon. Then everything is as usual - the picture is at the root, and the line of code between and.

The Favicon.pro generator converts to ICO files in JPG, PNG and GIF formats. The user can create icons in sizes 16x16, 32x32, 48x48, 64x64 and 128x128 pixels.

Unlike other generators on the site, there is no way to create a favicon by uploading a picture from a computer or from the Internet. Here the user can set the background color and write the name of his site. It is worth noting that the generator makes very clear icons - even the small print, 6 pixels high, reads well. The site also provides very valuable information that will be very useful for novice web developers. There are links to image converters, fractal and random text generators, and more.

The favicon generator Favicon.com has an extremely minimalistic design. The user is prompted to upload the image, crop it and download the finished icon.

With the Favicon.cc generator, you can create not only static, but also animated favicons. You can draw the icon yourself or convert any image to ISO. If the user has no idea how the icon should look, then you can see the gallery of the best favicons available on the site.

In this lesson, the creation of a Favicon is considered, you will find out what this icon is for, and 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 of 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, remembered, catch the eye against the background of other icons in the search results, and also have some associations with your site. A beautifully crafted and eye-catching Favicon can significantly increase the number of visits to your site compared to those that don't have it installed or look unattractive.

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

#1. The badge 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 symbol that is associated with your site. In addition, you can use the color scheme in which your website or logo was created.

# 2. Don't use standard icons. Many, after creating a site on a particular CMS, leave the icon, nothing, without changing. As a result, the search engine results may contain not one site with such an icon, but many. This will make your site stand out, so use only the 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 your 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 consider the process of creating it using Photoshop, using the example of the site site.

Create a Favicon Preset in Photoshop

#1. Create a new document in Photoshop, size 64 * 64px, for 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 is better to first create it the same size, and then reduce it to the required size.

# 2. In my case, I do not have any logo for the site, so I decided to use the symbol "W" with which the site address begins, 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 previously created document to blue.

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

To make the symbol stand out more against the blue background, I added a 2px black stroke to it. 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 key combination Shift + Ctrl + E.

To make the lines smooth and sans serif, 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 it will not be noticeable with an icon size of 16 * 16.

#4. Now you 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 must have the name favicon and the extension .ico. The fact is that by default Photoshop does not save images in the .ico format. Therefore, save it in .png format, for 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 the .ico format using the service. Go to this service and use the "Browse" button to select the previously saved PNG file 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 the Favicon to your site so that it appears for all of its pages. To do this, place the icon in the root folder of your site. If your site is already hosted, 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 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 / folder-with-your-theme / find in it and open the header.php file, and then paste the required lines and save the file.

If you are using Joomla, then go to the templates / folder-with-your-theme / 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 use 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, here it takes time for a special Yandex search robot to find your icon, after which it will appear in the search results.

Material prepared by the project:

Hello dear readers! Today's article is about creating a favicon (favicon.ico) for your site. From the post you will learn what a favicon is, what sizes this icon is and why it must be made and installed 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 is it needed, maybe you can do without it at all?

1. What is a favicon icon 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 basic Internet Explorer browser. 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 address bar of the browser immediately before the URL of the open page of the site or in the title of the bookmark:

Favicon Is a small file (16x16 pixels) with the .ico extension (this extension is used by operating systems to store icons). Almost every site has Favicon.ico, and it doesn't matter what hosting it is on or what engine / theme it uses. Online generators and favicon 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 are not yet using a favicon on your blog, then rather fix the situation.

What is this little picture for? Firstly, it is a mini-logo for your site, your visitors will remember it better. Therefore, if you decide to create it, then try to make it so that the favicon attracts the attention of visitors and is easy to remember. And secondly, the most popular search engine in Runet Yandex in its results next to each site places its favicon, which allows you to highlight your resource against the background of others that do not have an icon. Users are more likely to visit those sites next to which the image flaunts (it doesn't even matter which one), which means that the favicon allows.

By the way, Yandex even has a special bot that indexes not content on the site, but only indexes favicons of resources. After creating a favicon and installing it on the site, you will need to wait a bit until this very Yandex bot indexes it, and this process usually lasts from a week to a month. You can check if Yandex has indexed your favicon in three ways:

• Type the address of your site in the Yandex search box (for example, http: // site) and see if there is a favicon nearby.
• Follow the link http://favicon.yandex.net/favicon/ site(where you need to replace "site" with your site url). 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 generators and galleries Favicon

So, we have already figured out what a favicon is, so necessary for a site. We found out that it should be in pixels - 16 by 16, and its extension should be .ico. There are now several ways to create favicon.ico:

1. Download a ready-made icon from the favicon galleries.
2. Make a favicon from scratch using Photoshop or an online generator.
3. Make a favicon from a ready-made image (image dimensions are not important).

2.1 Collections and galleries Favicon

1. http://www.thefavicongallery.com/ - a small gallery that includes icons of a wide variety of topics. Contains about 300 images. To download a picture you like, you need to right-click on it and select "save as", then save the favicon to your computer.
2. 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 select the appropriate image.
3. http://www.favicon.cc/- a huge collection of favicons, but there are only 20 favicons on one page, it will take a long time to flip through.
4. http://www.favicon.co.uk/- also a good gallery containing many favicons. There are 144 icons on each page, which makes viewing very convenient. Favicon themes are very different.
5. - a small collection (84 pieces) of mini-images for your site.

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 favicons.

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

2.2.4 Favicon-Generator.org

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

There shouldn't be any problems with this generator either. On the screen, the functions of the online favicon generator are translated.

2.3 How to make a favicon for a site from an existing image

If you don't want to create a favicon for your site from scratch, then you can use some image, which will become the basis of the 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 online favicon generator service. Let's take a look at two of the 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 the simplicity of working with this service.

There are two ways to add an image:

• Use the "Select file" button to find the desired image on your computer and download it.
• Enter in the field the address of the picture on the Internet (this file may not even be on your computer), and the service will do everything by itself.

After the file is loaded, you just have to click on the " Create favicon.ico!»And wait a few seconds. Then you just 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).

Then click on the "Select file" button and upload the desired image. Based on it, a favicon for your site will be created. In this case, you will need to choose what to do with the image when it is reduced:

• Keep dimensions - keep the aspect ratio of the picture unchanged.
• Shrink to square icon - make the sides of the image square, and the picture may be distorted.

After uploading the picture, you can edit it in the online generator or leave it unchanged. If the received favicon.ico suits you, 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 particular option. This is done in two steps.

FIRST STEP... First, you will need to find a line of html-code in the theme indicating the path to the favicon. For a WordPress blog, you need to find the header.php file 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:

IMPORTANT! These lines must 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 named favicon.ico(16 × 16 pixels).

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