Make a favicon from an image. Create Favicon online

Today we will touch on a very interesting topic. When working on your website, sooner or later you will need to create a favicon. In simple terms, a favicon is an icon of your website that appears on a tab in the browser. You can also see it in the quick access area of your browser if your site has been added to Favorites.

Favicons of the most popular sites

I think there is no point in saying that the favicon should be of good quality, because it is, to some extent, the face of your site. In this article we will learn how to create favicons that meet our needs, and also get acquainted with a service for converting them. Read more below.

Video version:

What should a favicon be like?

Before starting to create the favicon itself, it would be nice to dwell on what they should ideally be. So, the ideal favicon:

Is clear and understandable
Made in good quality
Conveys the meaning of your site
Has a common style with your site
Stands out from other website icons

The above parameters can be classified as an ideal favicon. And we need to create just such an icon for our site. However, there is debate about what exactly should be depicted on the favicon. I believe that in this matter you need to proceed from the general style and theme of your site. It may contain some picture or text. If text is placed on the favicon, it should consist of no more than 2 letters. Otherwise, no one will be able to make out such text, because the favicon dimensions are generally 16*16 pixels.

What sizes are website icons?

As you know, there are now a huge variety of browsers, monitors and devices. And their requirements for favicon sizes are different. There are the following size options to consider:

16*16px - standard favicon sizes, suitable for most browsers and devices
32*32px - used in some cases in Internet Explorer And Safari
57*57px - used when displaying on iPhone
72*72px - used when displaying on iPad
114*114px - used when displaying on retina displays (57*2=114)
144*144px - used when displaying on retina displays iPad (72*2=144)

What format should favicons be?

Previously, browsers only accepted favicons in the format "ico". Now they have learned to understand other formats, including "png". In our case, we will kill 2 birds with one stone. First we will create a favicon in the format "png", and then convert it to "ico".

Several ways to create favicons

Today there are two main ways to create favicons:

Through special online services
Create it yourself using special programs such as Photoshop and Adobe Illustrator

Each method has its own characteristics. The advantage of creating a favicon through online services is that you do not need to have any special skills to do this. You simply upload the required image, modify it and download the finished favicon. Or you simply work with text and draw an icon using the tools of the online service. In general, the main advantage of this method is its simplicity. However, the other side of the coin is that the quality of such website icons leaves much to be desired. You will not receive a unique favicon for the simple reason that the gallery of icons for online services is not limitless. And when using your own images, using the service’s tools, it’s not so easy to create a high-quality product. In the case of drawing an icon manually using the tools of an online service, the result is “something unimaginable.”

Therefore, we choose the second, more complex but successful solution. To create a favicon we will use the program Photoshop. If you have no experience with this program, then it's okay. By following my instructions you will easily complete the task.

Creating a favicon

As I already mentioned, a favicon can be created using an image or just letters. In our case, I will use some kind of picture. For example, let's imagine that we have an automotive website. Therefore, we need to find an image from the auto area. I suggest making our site icon in the form of a wheel.

Selecting an image

You can take images from anywhere. For example, through the same Yandex pictures. The main condition is that the image be simple, without shadows or volumes. This is due to the fact that when it is reduced to 16 pixels, it will not have much detail. Due to excess volumes and shadows, the picture may become blurry.

I find a suitable image using search google on request "wheel". All I have to do is save it by right-clicking and selecting “Save Image As”.

Relevant image on google images

Next, we open this image using Photoshop. It is very important that the favicon has a transparent background. In our case this is not the case. To remove the background we use the Magic Wand tool. The essence of her work is very simple. With this tool we can select areas of the same color in an image. Since the background of our image clearly contrasts with the wheel itself, this will be very easy to do. By clicking once we select a single-color area. By pressing the keyboard shortcut CTRL+Delete we remove this area.

Removing the background of our wheel

We do this with all parts of the background of the image. Thus, in our picture the wheel is on a transparent background, which is what we needed to do. So, the template for our website icon is ready.

Create a favicon in 2 different sizes

I suggest making 2 favicons with sizes 64px and 16px. First we need to create a larger icon (64px). To do this we press the keyboard shortcut CTRL+N. In the window that appears, we select the height and width of the image to be 64px.

Setting the dimensions of the future favicon

Next, we need to move our wheel to the area of the newly created image. To do this, we return to the picture with the wheel and select the "Move" tool. The next step is to click on the wheel image and, while holding down the left mouse button, move it to the area of the new image. Make sure the layer with the wheel is selected when moving. Otherwise the transfer will fail.

Moving the wheel to a new image

After moving the wheels to a new image, we see that they do not fit. We need to reduce the wheel to 64 px. To do this we hold down the key SHIFT and by clicking on the diagonal point of the image we reduce it. So we created the first favicon for our website. Let me remind you that our size is 64*64px. Now we just have to save it by selecting the “Save for Web” function in the “File” tab. We choose the format PNG-24 and folder images. We also call the favicon itself, only in Latin letters - "favicon".

Save the favicon

Great. Now all we have to do is create a smaller favicon. To do this, we click on the “Image” tab and select the “Image Size” function. Here we set the width and height to 16px. Now all we have to do is save this image for the web. We can call it "favicon-2".

So, here we are, creating 2 favicons for our website in the format "png". We first created an option with a size of 64px in order to then easily reduce it to 16px. If you first create an option with 16px, then you won’t be able to increase it to 64px without losing quality. Therefore, keep this in mind so as not to do double work.

Installing a favicon on the site

To install a favicon on a site inside a tag we write:

If we have a favicon in the format " ico" then we instead " png" write " ico". For example:

As you can see, the site icon is displayed as we intended.

Converting the icon for the site to the "ico" format

Modern browsers can easily recognize and display favicons in the format "png". However, you may need to convert it to "ico". One of the advantages of this format is storing favicons of all sizes in one file. Agree that this is very convenient. So, to convert our icons we will use a cool service - xiconeditor.com. It's very easy to work with. Everything happens in 4 steps:
1. First, we need to upload our favicons. To do this we click on the button "Import".

Uploading favicons in the xiconeditor.com service

3. If desired, you can click on the button "Preview" and see how they will be displayed. To download our favicons in the format "ico" we click on the button "Export".

So, here we are, learning how to create favicons in "png" and convert them to format "ico". I specifically did not consider detailed image processing in Photoshop, since for many it would be unnecessary. If necessary, you can, of course, further improve the quality of the favicon by working with pixels in Photoshop. I tried to present all the essentials in a simplified form. And that's all for me. I hope this lesson was useful to you. If it is true:

Repost this article on social networks so that more people can benefit from it;
Subscribe to my newsletter so as not to miss useful and interesting blog posts.

This is where I don’t say goodbye to you. Thank you for your attention and see you in the next publications!

Favicon(abbreviated from the English FAVorites ICON - “icon for favorites”, from the name of the bookmarks folder in MSIE) - an icon for a website or web page. It is displayed by the browser in the address bar before the page URL, as well as as an image next to the bookmark, in tabs and in other interface elements.

Most professional websites tend to have them, on the one hand, this will not only place your site among the professionals, but will also help you stand out from the rest of the sites.

If you want one, then it is very easy to sign with our generator. All you need is an image (any size), submit it using the form below, and in a few seconds you will receive back some compressed images to use as a favicon. It's really simple!

Most versions of major browsers support favicons. For example Internet Explorer 5/6/7+, Firefox 1/2+, Mozilla 1/2+, Netscape 7+, Opera 7+, Avant 1.1, Konqueror 3+, Safari and others.

Original image (Maximum size: 150 KB):

Favicon is the face of your resource in the browser

Very often, when opening a site in a browser, users see a small icon next to the resource URL - favicon (favicon, favicon), which, in fact, is the face of the Internet project. Favicon is an abbreviation for the English phrase "favorites ICON", meaning "icon for favorites". If you “equipped” your resource with a favicon, then it will be able to stand out from other sites opened by the user in browser tabs. Very often, a favicon is a smaller copy of the logo of an Internet project or company (for example, like Wikipedia, Google or Facebook), but you can also see specially created icons that simply display the essence or theme of the project. The first favicon appeared in 1999, when the search corporation Microsoft introduced its web browser Internet Explorer 5: it was in this version of the browser that support for miniature icons for websites began. And in 2003, the favicon format was officially registered with the Internet Assigned Numbers Authority (IANA). Now Microsoft has lost its monopoly in this niche, and all modern browsers (both desktop and mobile) support favicons. What is the Favicon Generator tool used for? Using the Favicon Generator tool, you can create a unique favicon for your website. To do this, you just need to upload the original image in a special field, the size of which should not exceed 150 KB, select the required size of the future icon (16x16 or 32x32 pixels) and click the "Convert" button. The resulting icon in ICO format can be used for posting on the Internet: it will be compatible with most modern browsers. Please note that many modern web browsers automatically load favicon.ico from the resource root without requiring it to be specified in the page codes. However, if the webmaster wants to use a separate favicon for each page of the site, then he must indicate its position within the section in the HTML code of the resource. Also note that the icon will not be displayed in the browser if its Content-type in the web server response does not match the specified title field in the page code. What should a good favicon look like? Despite the fact that the size of the favicon is very small (16x16 or 32x32 pixels), this icon carries a very large semantic load, and its creation is a rather complex process that takes web designers the same amount of time as developing a full-fledged logo. It often happens that the company logo is absolutely not suitable for the role of a favicon. In this case, you will have to use all your skill and imagination. The future favicon should be etched into the user’s memory so strongly that in the future he will associate this icon exclusively with your resource. When creating a favicon, you won't have the opportunity to "scatter" pixels: each of the 256 (or 1024) pixels has a meaning. Manually correct pixels that have a “foggy” color in advance, because when you compress the picture, the icon may turn out blurry and will require adjustments in a graphics editor. Please note that the Adobe Photoshop photo editor does not save images in the ICO format, so you can convert the image to this format using our Favicon Generator service.

A very important element of blog design is the favicon - a small image (16x16 pixels). Small size – but huge effect! This article is devoted to how to create a favicon (favicon.ico) for an online website using special services. You will learn more about what this favicon icon is, what it is used for, what functions it has, how to add it to your blog and create it online. You will also find out where download a collection of ready-made favicon ico for the website.

In general, the post is very informative and interesting, I strongly advise those who do not yet have a favicon to read it.

First, let's take a closer look at what a Favicon is and what it is used for.

Favicon is an abbreviation of two words (English FAVorites ICON), which translates as an icon (a very small image) for “Favorites”. Favorites– this is what bookmarks are called in the Internet Explorer browser. The favicon looks something like this:

Making a favicon for a website has become very easy, so this mini one has gained wide popularity. In addition, you can download a ready-made favicon ico icon for the site, which you just need to add. Having chosen the right one from the gallery, you can decorate your website with it and admire it in the browser (here’s what this mini-image looks like in Chrome):

So, a favicon is a small image 16x16 px in size, with a .ico extension (icon extension). Because The icon has gained wide popularity; almost every site has it, and this is another reason to create a favicon for an online site. It doesn’t matter what kind of hosting you use, what engine your blog runs on - in any case, you can create online and then install a favicon or download a ready-made favicon for the site. Thanks to modern icon generators, their creation does not take much time - one or two minutes, and everything is ready.

Still don't have a favicon? Get better soon!

What is this mini-image used for? Firstly, a favicon for a website is like a logo for a trading company, this is a way to stand out from the crowd. Visitors will recognize your site by looking at the favicon image. Secondly, Yandex also uses favicon images and displays them next to the search results, which allows sites with favicons to look better compared to others. This means that users will go to your site more often, because the icon will “lure” them. In other words, this mini-image will help you. Here's what it looks like:

Well, now you want to know how to make a favicon? Read on and you can choose a favicon for your website from numerous collections.

By the way, the Yandex search engine even has a special robot that indexes these icons and loads them into the search engine’s database. After you create a favicon and install it on the site, after some time (usually no more than a month) Yandex will index it and begin to show it in the search results. You can check at any time whether your mini-logo is already in the search engine database. You can do this in one of 3 ways:

Type your site into the Yandex search box and you will see if there is a favicon next to it.
Enter the link http://favicon.yandex.net/favicon/ in your browser site.ru, where replace site.ru with the address of your site. If the fava is indexed, you will be able to see it.
Go to the Yandex.Webmaster panel, the favicon is also reflected there.

Now let's find out where you can download a favicon for the site.

2. Online favicon generators and collections

Now we know what a favicon is and why the site needs it. Remember that its size in pixels must be strictly equal to 16 by 16, and the extension must be only .ico. Now let's find out how to make such a mini-logo:

Download a ready-made fava from the gallery.
Create your own using the favicon generator.
Create from a ready-made image (again using a favicon generator)

2.1 Collections and galleries favicon

http://www.thefavicongallery.com/ - although a small collection, it is useful. Here you will find icons on a variety of topics. There are about 300 of them in total. In order to download your favorite favicon ico for the site, right-click on it and save to your computer.
http://www.iconj.com/favicon-gallery-page1.html - another favicon collection for the site, which contains more than 3 thousand mini-pictures. You can save your favorite one in two formats (ico or gif). But there is a drawback: you can only view 30 icons at a time; to see the next ones, you need to go to a new page.
http://www.favicon.cc/?action=icon_list&order_by_rating=1 – thanks to this gallery, you don’t have to create a favicon yourself online. Just select and download the picture you like. Again, you can view 20 favicons at a time, which slows down the selection process.
http://www.favicon.co.uk/gallery.php - this site allows you not only to create a favicon for the site, but also to download ready-made options. You can view 144 icons at a time, which is much more convenient than in the two previous options. Favas on a variety of topics.
http://favicon-generator.org/gallery/ - although small, but useful collection of 84 favicons. Choose any!

2.2 How to make a Favicon for a website from scratch

Of course, you can download ready-made fava for your website, but it’s much better to make your own. In this matter, we will be helped by the so-called Favicon Generators, which allow you to create beautiful mini-pictures online.

2.2.1 Logaster.ru

Our list starts with an online favicon generator
The main advantage of the service is that you don’t have to draw a favicon or convert it from a logo at all.
All you need to do is enter the name of the site or company and select a topic.
After this, the service will create ready-made favicon designs. Select the desired icon, font, color.
This is very convenient for those who do not know how to draw or work with graphics programs.

You can download favicon files in ICO or PNG formats.
You can read more about how to create a favicon using Logaster

In addition to the favicon, the service also creates logos, business cards, envelopes and letterheads.

2.2.2 Favicon.cc – favicon generator

This simple generator is one of the simplest and most popular used for online favicon creation for a website. You will be able to draw every pixel of the future fava (there are 256 in total). By going to the site, you will have access to a working window in which you can experiment.

The blue color in the screenshot above shows the work area - here you will directly create a favicon for the site. Just below you can see what a fava looks like in its original scale (highlighted in black).

Working with this generator is so simple that you are unlikely to have any questions about how to make a favicon ico for a website. Basically, on this site you can create entire favicon collections online and then, for example, sell them.

Each square in the work area is a pixel. You must paint it with the desired color. You can select a color in the palette located to the right of the work area. You can paint a pixel by pressing the left key, and erase the painted color by pressing the right key.

The image can be moved and moved around the work area, for which use the item move.

To download the resulting favicon that you made for the site, click on the Download Favicon link (highlighted in red).

2.2.3. Generator Amichurin.Appspot.com

Another Generator of beautiful favicons, in which you can create a beautiful picture online. The entire generator is in Russian, but its functionality will be simpler than in the previous case. By the way, the signatures made in burgundy are not mine.

Alas, I did not find any ready-made favicon collections on this site that could be downloaded for the site, so use it only as a generator.

2.2.4 Favicon-Generator.org Generator

A very good favicon generator. Very similar to the second option, but slightly inferior to it. In general, as you have already noticed, the principle of operation on all these sites is the same. Therefore, there should be no problems with them. Choose and work with the one you like best.

2.3 Favicon from a finished image

If you don’t want to create a favicon using online generators from scratch, and galleries and favicon ico collections for the site are not suitable for you, then try making a mini-image from a ready-made image. You can even use your photo. Such pictures are also created online using special favicon generators.

Prepare in advance the picture that you want to use as a basis.

2.3.1 Service Favicon.ru

One of the most popular services that helps you create a favicon for a website (by the way, a Russian-language website). Simple and easy to use, it helps you make a mini logo from a ready-made image.

You can add a picture or photo (base) like this:

Click on the button choose File» and upload the desired photo.
Enter the URL of the image in the white field (do this if the file is stored not on your computer, but on the Internet).

After the image is added, click " Createfavicon.ico!" and wait a little, the generator will generate an icon. After that, download the image to your computer. By the way, in addition to the generator, this site also has a large collection of favicon ico for your site.

2.3.2 Favicon.cc service

A similar generator, but with more powerful functionality. To create a fav from a finished image, first go to the “Import Image” tab.

Now click on “Select File” and add the file you are downloading. Based on it, a favicon ico will be created for your site. By the way, you may need the image stretching function:

Keep dimensions – if you reduce the aspect ratio, the pictures will remain the same
Shrink to square icon – the sides of the image will be squared (the image may be distorted).

After downloading the file, you can edit it online using this favicon generator. When you are satisfied with the result, download the fava to your computer.

3. How to add a favicon to a WordPress blog

We’ve figured out where to download a ready-made favicon for a website or how to make your own. Now let's discuss how to add a fava to a WordPress blog.

As a rule, the favicon is located at the root of the site (in the root folder) - this is what we will focus on. If your fava is not in the root, just move it there.

Adding favicon.ico in two steps.

STEP ONE

First of all, you need to find in your theme the line of code that is responsible for displaying the favicon. Open the Header file (header.php) for editing and find this (or similar) line:

If there is nothing similar at all that contains the word favicon.ico, then just add these two lines somewhere between the tags And.

STEP TWO

Now you need to add the favicon itself to your hosting, exactly in the root folder of the site (otherwise, it will not be displayed). Go to your hosting and upload the fava to the root of the site (the file name is required favicon.ico, sizes are required 16x16 pixels).
That's all, soon the favicon will be indexed by search engines and it will show off in the Yandex search results. And your site will have its own favicon.

At the end I provide a video tutorial on how to create a favicon for a website.

Now a personal site icon - Favicon - is a kind of business card of any web resource. This icon highlights the desired portal not only in the list of browser tabs, but also, for example, in the Yandex search results. Favicon, as a rule, does not perform any other functions other than increasing site awareness.

Creating an icon for your own resource is quite simple: you find a suitable picture or draw it yourself using a graphics editor, and then compress the image to the desired size - usually 16x16 pixels. Save the resulting result to the favicon.ico file and place it in the root folder of the site. But this procedure can be significantly simplified using one of the Favicon generators available on the Internet.

Most web icon editors offer all the necessary tools for creating Favicons. 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 your computer or a third-party web resource. The imported picture will also be placed on the canvas and will be available for editing.

As a result, you get a graphic ICO file called favicon and a resolution of 16x16 pixels. This icon is already ready to be used as an icon for your website.

Method 2: X-Icon Editor

An HTML5 browser application that allows you to create detailed icons up to 64x64 pixels in size. Unlike the previous service, X-Icon Editor has more drawing tools and each of them can be flexibly configured.

As in Favicon.by, here you can upload a 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 this. The ability to generate icons with a resolution of 64x64 pixels 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.

Nowadays it’s hard to imagine a website that doesn’t have a favicon. A favicon is an icon that is located in the browser's address bar 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 a site in the browser’s bookmarks list (in IE these bookmarks were called Favorites), and hence the name Favicon - favorites icon.

But making a favicon with your own hands is not so easy. It must have an ICO format, which requires special software in order to do something worthwhile and considerable skills. Therefore, to make life easier, it is better to use an online favicon generator.

There are many services that allow you to generate favicons from pictures (this could be a logo or a specially designed illustration). But most of them have problems with transparency.

Transparency problems with the favicon generator service

For clarity, we present the illustration “How different favicon generators process transparency and reduction in image size.”

In this comparison, we used the results obtained from the services favicon.cc and favicon-generator.org. To be honest, until recently, we ourselves used the favicon.cc service, but recently an excellent substitute was found - favicon generator No. 1.

The best favicon generator - www.xiconeditor.com

Like favicon.cc, this favicon generator has its own built-in online icon editor, but its advantage is its excellent work with transparency.

It is quite obvious that there is a difference in the quality of transparency (apparently the difference is in the quality of changing the size of 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 preview is much more informative than favicon.cc.

It might be useful to read: