How to make an icon for a windows application. How to make an ico. Creating icons.ico for programs. Color is very important

This will be a simple and practical post without theory, just practice. I'll tell you how I make a favicon.

You, of course, can try to find a ready-made favicon.ico file on the website www.iconfinder.com, but I think many would like to make something of their own. After all, it is the favicon that will make your site stand out. search results. You can read more about this in the article “”. So let's get started.

How to make favicon.ico yourself

1. Open Photoshop.
2. Create a 32x32 pixel document.
3. Insert a smart object of the finished image from Illustrator.
4. Using the “Save As” command, save the favicon in .ICO * format.
5. Upload the resulting favicon to the root of the site and connect it through a WordPress theme, or manually register it in the site template. I already wrote about that earlier.

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

How to install the ICO (Windows Icon) Format plugin

1. 64-bit Windows (Vista/Windows 7):
   • Restart before installing;
   • Place the plugin in the folder C:\Program Files\Adobe\Photoshop\Plug-Ins\File Formats, but I have a different structure, I have this file stored here: C:\Program Files\Adobe\ Adobe 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)”).
2. 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 Mac OS 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)
3. If using Corel PSP Photo X2, put the plugin in C:\Program Files\Corel\Corel Paint Shop Pro Photo X2\Languages\EN\PlugIns
4. 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 quickly and is easy to use. It is used to convert desktop icons, application icons, and favicons for websites.

Now I will tell you in as much detail as possible how to make a normal “.ico” so that it is displayed correctly on Windows operating systems; in theory it should also be displayed on other systems, but this has not been tested. This lesson is created for a wide audience, both those who know and those who are completely unfamiliar with Gimp. For example, you are an excellent programmer, you create custom programs, integrate ready-made “.ico” into them, but suddenly you decide to create something of your own, but you do not own a single graphic editor, this lesson will help you. In this tutorial I will explain not only what tools to use, but also how to use them.

To begin with, I will tell people who don’t know what “.ico” is and what it is needed for.

“.ico” - format of “pictures” assigned specific program, For example:

Here is the executable file “Gimp 2.8”, and the one highlighted in red is the “.ico” file already integrated into the application.

That is, to put it in simple language, this is a picture of the program. Also, the “.ico” file can be a site icon, a cursor, but now we don’t need that.

Well, that's it, let's start the lesson. In this tutorial I will use this picture.

1. Zooming out

The first thing you need to do is reduce the image you want to make an “icon” to a size of “256x256”. This can be done in two ways, the first of them is simpler, but the second is not difficult either.

Method 1:

In the Gimp editor, in the top bar, click on “Image”, then select “Image Size”.

In the window that opens, set the height and width to 256.

It didn't turn out pretty, but it's ok for the lazy.

It’s better to do it the second way, because that’s what I did.

Method 2:

Create a new image, click “File” in the bar and select “Create”.

Specify the width and height as “256×256”, leave the other parameters untouched.

We can do this.

Click right key mouse on the “Background” layer and select “Add alpha channel”.

Now open your image in the Gimp editor. !Do not close the created image!

In the top bar, click the “Edit” button and select “Copy”.

We return to the created, empty “256x256” image.

And in the top bar, click the “Edit” button and select “Paste”.

You will end up with something similar:

After clicking on the “Scale” tool (we don’t change anything there), click on this picture that you want to reduce and a window will open with the scale settings. My “Width” and “Height” values ​​will differ from yours, it depends on the size of the image itself.

In the window, click on the broken chain so that it becomes whole and set any of the two values ​​to 256, this again depends on the picture. Since my image is rectangular and I can sacrifice the width, I set the value to “Height”; the width should also change, but automatically.

Click “Change”.

The area highlighted by the dotted line is your image, but it is behind the “canvas”, it doesn’t matter, it needs to be moved to the canvas.

Let's do this with the Move tool on the toolbar. Click on the tool.

Then move the mouse over the area highlighted by the dotted line and holding down the left mouse button, drag the layer onto the canvas.

Try to ensure that the image does not extend beyond the edges; if it does not, you can further reduce the layer with the “Scale” tool. I got it like this:

When we have adjusted the image to the canvas without changing its proportions (this was the task in this second method), we can delete the “Background” layer. In the Layers-Brushes panel, right-click the Background layer and select Delete Layer.

The last step left is to reduce the image. In the same panel, right-click on the layer with your image and select “Layer to Image Size” from the pop-up menu.

If the yellow dotted line is at the edges of the canvas like this:

Then I congratulate you, you have finished reducing the image.

Now let’s get down to creating a high-quality icon in the “.ico” format.

2. 15 copies of the layer

After creating a picture of the size we need, we need to copy the layer 15 times, that is, so that there are 15 identical layers in the “Layers-Brushes” panel. Yes, this is not a typo, exactly 15, because we will create a high-quality “.ico” file.

First, I'll explain what we'll do next with these fifteen layers. In the “.ico” file, the layer structure will consist of three “compartments” of different quality (each of them will have 5 different icon sizes), so that the file can be seen everywhere.

I’ll explain using the example of paper products: if you need to make a craft from paper, you are not guaranteed to be able to make it from cardboard, etc. I hope the example is clear. Let's get to work.

2.1 Copy

We create 15 copies. Using the “Layers-Brushes” panel, right-click on the layer and select “Make a copy of layer”.

And we do this until there are 15 layers in the list.

I stretched the panel so you can see that there are exactly 15 layers. This is not necessary, but it is convenient. Also, for ease of understanding, I renamed the layers taking into account their “compartments”, again not necessary, but convenient.

2.2 Scaling

Using the “Scale” tool, we change the layer that is named “2” without disturbing the structure of the building. Set the height and width to 48, that is, the layer should be 48x48. Layer "3" should be 32x32. Layer "4" should be 24x24 and finally layer "5" should be 16x16. You will get something similar.

We do the same with the rest of the “branches”.

And the last push.

As a result, we get:

3. Export (save) icons in the required format

A window opens to save your work. Please note that the file name does not matter, it can be anything, and the format should only be “.ico”, as in the screenshot.

Click “Export”, a window appears with detailed settings import. It is necessary to configure everything exactly as shown in the screenshot, otherwise I cannot guarantee correct operation.

That is, the first “branch” with five pictures should be “8 bpp”, the second should be “24 bpp”, and the third should not be changed. That’s it, congratulations, now you know how to make high-quality “.ico”. Here is an example of using this icon integrated into the program.

I will accept your criticism and help you figure it out if you don’t understand something. Thank you for your attention.

There are many sites that allow you to create favicon ico. So, when we upload our image to the site, we get a favicon ico as an output. However, in order to make a high-quality favicon ico, it is necessary that the favicon ico be clear and understandable. Here we will show you how to make a favicon ico using Adobe Photoshop. As a result, you will receive a high-quality author's favicon ico.

Install the plugin to make favicon ico

To get started, you need Photoshop to be able to save images in ico format. To do this you need to do the following:

A. download the plugin, unzip it and move it to the following folder: C:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats

b. Then restart Photoshop and start creating the favicon ico.

Now we can make a favicon ico

In order to make a favicon ico there is no need to know all the intricacies of Photoshop. A general familiarity with Photoshop is quite enough, since in order to make a favicon ico there is no need to know how to use graphic editors. Thus, ico is a completely simple and doable task.

So, launch Photoshop and to create a favicon ico, click the button in the upper right corner: File - Create.

The following window appears, in which we specify the width and height of the favicon ico, respectively 16x16 pixels. We can also set the background of the favicon ico. So we select the background of the favicon ico as transparent, the extension is 96 pixels/inch, the color mode is selected as RGB and, accordingly, 8 bits.

Subsequently, we take the scale tool and zoom in on the favicon ico so that it would be more convenient to draw the favicon ico.

Specify the size of the pencil

Specify the color of the pencil and draw a favicon ico by changing the pencil to the desired color.

Creating a favicon ico manually is due to the fact that if you reduce any image to 16x16 pixels, you get an incomprehensible spot and in order to get clarity and quality, the favicon ico is drawn manually. Therefore, the favicon ico you create should be quite simple.

After you have drawn the favicon ico, you need to save the created favicon ico. To do this, press the following commands: File - Save As or ctrl+shift+s.

Select the file type: ICO (Windows Icon)(*.ICO)

Specify the file name: favicon.ico

Note: In order for the favicon icon to be successfully preserved, it is necessary that the background on which the icon is drawn is transparent. Also, to check proper preservation You can right-click on the favicon.ico icons and select properties, then go to the Summary tab. If on this tab you see all the characteristics of the image, then the icon was saved correctly, otherwise you need to save favicon.ico again.

We save favicon.ico in the root of the site where the index.html page is located

Checking the correctness of the favicon ico

To check if the favicon ico is correct, just go to the site where you wrote the favicon ico and look at the address bar through the browser Mozilla Firefox,Opera, Internet Explorer. If the created favicon ico is displayed in address bar site means the favicon ico creation has been successfully completed.

All that remains is to wait for the favicon ico to be indexed and then in Yandex in the search results the favicon ico will be displayed opposite the site pages. Indexation of favicon ico can take from a week to several months.

When using any device, we often get bored with the same interface and want to change something. For every device appearance systems change in different ways. Icons are one of the elementary components of any interface, and changing them is not a difficult task. On the Internet you can find many icon sets for all types of devices. But they are not unique, not individual. Therefore, in this article we will look at how to make an icon yourself, so that it is yours, unique.

We will consider the example of two simple programs. Since it is very easy to make an icon for a folder, file, shortcut or other elements using them, this software becomes great tool in changing the appearance of the interface and its individualization. Thanks to these simple programs, you can make icons for any interface elements of various operating systems.

Fasticona 1.0 free portable

I have never seen a simpler program for creating icons. It doesn't even require installation. Fasticona 1.0 free portable does not allow you to draw icons; it makes them from ready-made pictures. You can make an icon from any image (even from your own photo) the program supports a variety of formats. In simple words, it's just an image converter.

Before making an icon from a picture, load the image into the program using the “Open file” button. Select the necessary parameters: size, color depth (colors and bits per sample), save folder (output path, by default, the folder where the launch file is saved) and the name of the icon file (output the name).

The resulting file is saved in *.ico format. And only in it.

Seanau Icon Tool Kit 6.0

Seanau Icon Tool Kit 6.0 will have to be installed on your computer, but it will take up very little space. Its functionality is more advanced. This program allows you to either make an icon from a picture or draw it yourself. To do this, she has a wide range of tools.

An integral part of modern websites is the Favicon, which allows you to quickly identify a particular resource in the list of browser tabs. It's also hard to imagine computer program without its own unique label. At the same time, sites and software in this case are united by a not entirely obvious detail - both use icons in the ICO format.

These small images can be created thanks to special programs, and with the help of online services. By the way, it is the latter that are much more popular for such purposes, and we will consider a number of such resources in this article.

Working with graphics is not the most popular category of web services, but when it comes to generating icons, there are definitely plenty to choose from. Based on the principle of operation, such resources can be divided into those in which you draw the picture yourself, and sites that allow you to convert a ready-made image into an ICO. But basically all icon generators offer both.

Method 1: X-Icon Editor

This service is the most functional solution for creating ICO images. The web application allows you to draw the icon in detail manually or use an already finished image. The main advantage of the tool is the ability to export images with a resolution of up to 64x64.

So, if you need to create a whole set of icons of the same type different sizes— you won’t find anything better than X-Icon Editor for these purposes.

Method 2: Favicon.ru

If you need to generate a favicon icon with a resolution of 16x16 for a website, the Russian-language online service Favicon.ru can also serve as an excellent tool. As with the previous solution, here you can either draw an icon yourself, coloring each pixel separately, or create a favicon from a finished image.

As a result, a file with the ICO extension is saved on your PC, which is a 16x16 pixel image. The service is perfect for those who only need to convert an image into a small icon. However, showing your imagination in Favicon.ru is not at all prohibited.

Method 3: Favicon.cc

Similar to the previous one both in name and in operating principle, but an even more advanced icon generator. In addition to creating regular 16x16 images, the service allows you to easily draw an animated favicon.ico for your website. In addition, the resource contains thousands of custom icons available for free download.

If the English-language interface does not bother you, then there are absolutely no arguments in favor of working with the previous service. In addition to the fact that Favicon.cc can generate animated icons, the resource also correctly recognizes transparency in imported images, which the Russian-language counterpart, unfortunately, lacks.

Method 4: Favicon.by

Another option for a favicon generator for websites. It is possible to create an icon from scratch or based on a specific image. Among the differences, we can highlight the function of importing pictures from third-party web resources and a rather stylish, laconic interface.

In general, there are no differences in working with the services already discussed in this article, however, the Favicon.by resource copes much better with converting images into ICO, and this is quite easy to notice.

Method 5: Online-Convert

It's likely that you already know this site as a virtually omnivorous online file converter. But not everyone knows that this is one of the the best tools to convert any images to ICO. As a result, you can get icons with a resolution of up to 256x256 pixels.

As you can see, create ICO icon using the Online-Convert website is not at all difficult, and this is done in just a couple of mouse clicks.

Find inexpensive, well-made icons and vector images is not difficult - that's what websites like Iconfinder (where the author of this article works) are for. Designers have thousands of premium icon sets at their disposal, and hundreds of sets are available for free download.

This article provides a guide to vector icon design that includes six steps. We'll look at these steps after we've covered the basic principles of successful icon design. These principles are well known and are discussed in detail in works such as John Hicks's Icon Design Guide, as well as in Google's guide Material Design in the development of system icons. The six steps we will discuss in this article should be taken as guidelines, not as dogma. The ability to sense when to follow rules and when to break them is an important quality that everyone should develop. good designer, and we will clearly demonstrate this.

All stages will be discussed using the example of correcting an icon with a picture of a dog (meet this Corgi). The icon wasn't bad, but it didn't live up to our high standards. Our experts gave the author several simple tips, and after revision the image was approved. Below are images of the Corgi before and after the corrections. Later in the article we will examine in detail how this transformation took place.

The image on the left is the original version. The image on the right is the icon after making corrections in accordance with the principles described in the article

It is worth noting that, despite the fact that we are talking about icons for the Internet, these recommendations also apply to icons for print. Standard Definition, used for printing is 300 dpi, so if you are a print designer, you may want to skip the sections where we talk about working with pixels.

Three Pillars of Effective Icon Design

All well-made icons are united by the unity of the three components of effective design: form, aesthetic integrity and recognition. When you start designing a new icon set, you need to consider all three elements, going from the general (shape) to the specific (recognition). Even if you're designing just one icon, these three essential attributes still apply.

Of course, effective design is not limited to these three concepts, but they are ideal places to start and are covered in one article.

Form

Form is the structure on which the icon design is based. If you omit the details and outline the basic shapes that make up the icon, will it be a square, a circle, a rectangle, a triangle, or a smoother outline? Basic geometric shapes such as circle, square and triangle provide a stable, visually balanced base for icon design. In our example, the dog's head consists of two triangles and two ellipses. Here we can draw an analogy with drawing - just as when making a drawing, the designer starts with large basic shapes, and then works out the details, adding exactly as much as is necessary and sufficient to convey his idea.

Red lines outline the main geometric shapes that form the shape of the icon.

Aesthetic integrity

Aesthetic integrity refers to a set of elements that are repeated among icons from the same set. These can be rounded or square corners, as well as their sizes (for example, 2 pixels, 4 pixels, etc.); line thickness; (for example, 2 pixels, 4 pixels, etc.); style (flat, outline, filled with color, glyph); color palette and so on. The aesthetic integrity of an icon set is a well-traced sequence of various elements and design techniques that allow all icons to be perceived as a single whole. In our example with the Corgi dog, such elements include the same rounding radius, eyes of the same size and shape, and a heart-shaped nose.

These three icons can be called aesthetically consistent because they use the same elements and techniques

Recognition

Recognizability is a derivative of the meaning of the icon, that is, what makes it unique. Whether an icon serves its purpose depends on how well the user understands what object, idea, or action the icon represents. Recognition can be achieved by displaying some qualities characteristic of the designated object, or by using a unique element, for example, a Corgi's nose. Remember, recognition isn't just about understanding what object, idea, or action your icon represents; this is the property that makes your icon set stand out. In this sense, the concepts of recognition and aesthetic integrity intersect. In the pictures below, thanks to distinctive features We recognize the breeds in the Corgi and Husky dogs, and we also see that they are part of the same icon set - due to the similarity of design and elements used.

The individual qualities of each dog make each one recognizable, while the similar design and elements used indicate that they are part of the same set

So, we've covered the three main components of effective icon design. Now we’ll take a closer look at how to put these three components into practice in six steps.

Six stages

Always start with the grid

The advantages of meshes of different sizes are a subject for a separate discussion; we will use a 32x32 pixel grid. Our grid also contains auxiliary lines that will help us create the basic shape of each icon.

So we have a 32 pixel grid with 2 pixel borders that we will leave blank. We call this space the free zone, and it serves to give the icon some space. Elements should not be located within this area unless it is absolutely unavoidable.

The shape of an icon starts with a basic shape and orientation. If you draw a line around the outer edges of the icon, like a bounding box, it will be in the shape of a square, circle, triangle, or rectangle.

Round icons are located in the center of the grid and, as a rule, touch all four edges without going into the free zone. The most common reason for violating the integrity of a free zone is the need to place an element outside the circle that is necessary to maintain the integrity of the design, as shown in the picture below.

Aligning a circular icon to the grid and main lines

Square icons are also aligned to the center of the grid, but, as a rule, do not reach the boundaries of the work area. To maintain consistency with round and triangular icons, most rectangular and square icons are aligned to a base line in the middle (orange area in the image below). The decision on which main line to align the icon is made based on its appearance, and the feeling of which size to choose in each special case, develops through practice. The three concentric squares discussed above are indicated in the figure in blue, orange and light green.

Aligning and selecting the size of round and square icons relative to the grid

In the following images, inside the 32x32 pixel grid, you will notice 20x28 pixel rectangles that are oriented horizontally or vertically, depending on the icon design.

Aligning and sizing vertically and horizontally oriented icons

Diagonally oriented icons are aligned along a circle inscribed in the work area. Note that the extreme points of the saw are only approximately at points along the circumference; great precision is not required here.

Aligning and sizing diagonally oriented icons

Remember that you are not required to strictly adhere to the described location of the icon relative to the grid and auxiliary lines. The grid is only an auxiliary tool; If you are faced with a choice between doing something truly original or staying within the rules, the rules can be ignored. However, this must be a deliberate step. As Hemmo de Jong, known as Dutch Icon, said:

“The individuality of the icon outweighs the need to maintain consistency across the icon set.”

Start with simple geometric shapes

Start your icon design by roughly sketching out basic shapes using circles, triangles, and rectangles. Even if you plan to create an icon with smooth, natural shapes, start with the Shape tool in Adobe Illustrator. When it comes to icon design, especially when it comes to drawing icons on the screen small size, drawing by hand inevitably entails the appearance of small disproportions along the edges, and this greatly detracts from the appearance of the icon. Starting with simple geometric shapes will help you achieve clean, uniform edges (especially around curves) and will also make it easier to size different elements and orient them relative to the grid and basic shapes.

The basis of the Corgi icon is simple geometric shapes: two triangles and two ellipses.

Everything is done by numbers: edges, lines, corners and curves

When making edges, fillets and corners, you need to strive for mathematical precision, but not to such an extent that the design looks boring and overly “mechanical”. In other words, you should not rely on the eye; withstand exact dimensions, because non-uniform execution of these elements negatively affects the quality of the icon.

Angles

In most cases, it is advisable to use angles of 45°, or multiples of this value. Smoothing out irregularities given value The angle adjustment is done evenly (the active pixels are well adjacent to each other), and the result is clear and concise. In addition, 45 degrees is an ideal diagonal, pleasing to the eye. Consistent use of such a familiar configuration allows you to get a holistic picture of both each individual icon and the entire set. If the design you choose requires violation of this rule, it is better to divide by two (22.5°; 11.25°, etc.), or use angles that are multiples of 15°. Each situation is individual and requires the same individual approach. The advantage of using angles that are multiples of 45° is that with such values ​​it turns out best smoothing unevenness during transitions.

Close-up of smoothing a path at a 45° angle

Curves

One of the most noticeable elements that can significantly reduce the quality of an icon that clearly shows the difference between a professional and an amateur is curves. While the human eye can clearly detect the slightest inconsistency in shape, our coordination does not allow us to achieve the same precision when drawing by hand. Therefore, when creating curves, it is recommended to use the ruler and shape tools in the program, instead of relying on your hand. When you can't get away from drawing by hand, use the constraint modifier key (for example, Shift in Adobe Illustrator), or, better yet, use VectorScribe and InkScribe from Astute Graphics - these tools allow you to get the best results when creating curves.

Hand-drawn lines are of poor quality

In the original version of Corgi, the irregularities of the hand-made lines are clearly visible; this immediately negatively affects the entire design.

These perfect curves were created in Adobe Illustrator using the Bezier curve tool.

Angles

The most common size for rounded corners is 2 pixels. For an icon sized 32x32 pixels, this radius value gives a clearly visible rounding, and at the same time does not “soften” the corners too much (which leads to a “blurry” appearance). The size of the curvature radius depends on the character you want to give to your design. The decision on whether to use rounded corners is based on an analysis of the aesthetic appeal of the entire set.

Precisely rounded corners

Returning to our Kogri: starting with geometrically complex shapes, we moved on to rounding the corners using the shape tool, using a corner radius value of 2 pixels. The appearance has already become better.

The first stage of the Corgi conversion

The main idea of ​​the new design is already visible: rounded corners and smooth curves.

Pixel Optimization

Perfect pixel alignment is especially important when working with small icons. Smoothing edges on small icons may result in blurriness. The space between the lines that is not aligned with the grid is smoothed out and will appear blurry. Aligning an icon to a grid will give crisp edges on straight lines, and will also add definition on corners and curves.

As already mentioned, the ideal angle is 45° (of course, after straight lines), because the pixels are located strictly diagonally relative to each other. The same can be said about corners and curves: the more mathematically precise they are, the better results you will get when smoothing. It is worth noting here that pixel optimization does not give a noticeable result for large sizes and for displays high resolution, such as Retina.

Line thickness

When it comes to line thickness, 2 pixels is ideal, but sometimes 3 pixels is better. The goal here is to provide the required consistency and variety, but not to get carried away so as not to violate the integrity of the icon set. Line thicknesses greater than 3 pixels will cause the set to lose its integrity. The advantage of using 2 and 4 pixel thick lines is that they easily scale from one to the other. In most cases, you should avoid using very thin lines, especially for glyph style and flat style icons. In general, unless your intention is to create an outline style icon, you should rely on light and shadow rather than lines to indicate shape.

This iPhone icon shows an example of the measured use of line weights

Consistently use different elements and do not shift emphasis within the same series of icons

Hemmo de Jong (Dutch Icon) gave a talk about this aspect of icon design at Icon Salon 2015. Hemmo and his partner have been designing badges for the Danish government for two years, and their signature style is the use of a slit mark. The cutout is not present on all icons, but on most of them. This kind of emphasis applied to the entire series ties the icons together and makes them recognizable among thousands of others.

Using Common Design Elements

In our dog example, we used one stylistic element in the form of a heart-shaped nose. This element not only connects all the icons with each other, but makes them special, causing additional sympathy for these cute creatures.

Common elements used for dog icon design

In many cases, even if icons within a series differ greatly in appearance, similar elements help maintain aesthetic integrity. This can be clearly seen in the image below: we created the same glyph style dog icons, but they still look cohesive and interconnected.

Using the same elements in a different style

Moderate use of details and decorative

The icon must clearly convey the meaning of the object, idea or action. An excessive number of small details make the icon not so informative, especially when it is small. The amount of fine detail in each individual icon also greatly affects the aesthetic integrity and recognition of the entire series. The unspoken rule for determining the number of details and elements in an icon is to use the minimum necessary to convey the meaning.

Minimal details convey meaning effectively

In the version in the picture above we are already close to the final version. The black lines around the ears have turned to fur, and the circumference lines of the Corgi's face are gone, although a hint of them remains in the form of a 2-pixel line above the white spot. You'll no doubt notice that we still have some of the old elements, like the smooth nose. Let's talk about this in the next step.

Make the icon unique

There seems to be a growing number of talented designers creating high quality icon packs (many of them for free). Unfortunately, many of them rely unduly on the authority of pre-existing trends created by popular designers. As creative professionals, we must look beyond computer design to sources beyond computer design—architecture, typography, industrial design, nature, and other fields—for new ideas. Many icon sets are similar to each other, so making your design unique is extremely important.

What makes the Corgi's design unique is the shape of its nose.

As finishing touch, which gave Corgi a special charm, novelty and lightness, we used a heart-shaped nose shape.

The described steps should be considered as recommendations and not mandatory requirements. There is no one right way to create icon designs. In this article, the authors have described their approach and techniques, but other designers may undoubtedly have alternative options. The best way To improve your skills is to read as much reference material as possible, sketch constantly (carry a notebook with you wherever you go), and practice, practice, practice.

The image on the left is the original version. The image on the right is the icon after making corrections in accordance with the principles outlined in the article

Conclusion

We have described the fundamental principles for creating icons High Quality. These principles are nothing more than skills, that is, they can be mastered by anyone if they practice. Remember that it is best to start with the general (form) and work towards the specific (recognition). Do not forget that it is necessary to maintain integrity and uniformity, both within one icon and for the entire series. Once you have mastered the technical fundamentals, you can focus all your energy and abilities on developing your creativity and finding unique solutions.

Wisdom is good because it can be
said for one reason, but useful for another.
“Fidget”, Sergei Lukyanenko.

In this post we’ll talk about how to install it on your resource, how to make an icon from a regular picture, and how to change an existing icon to a new one. I will describe how I do it. I do not rule out that there are other ways, but they are unknown to me.

In fact, creating an icon for the site- a simple and straightforward procedure. Questions about this, of course, arose periodically and I answered each questioner personally. But laziness finally overcame me and this note was written. Now you can send everyone interested here.

I repeat, mine is described here personal experience. That, how do I make icons. Aesthetes and gourmets may pass by.

So, let's get started.

Before, how to install an icon on a website, it needs to be created. Let's start with this.

§ 1. How to make an icon

What is a favicon is described. Therefore, let’s move on directly to the process of its creation. How I do it:

That's it - the icon for the site is ready.

The nuances of the method:

• ~ You need to select simple drawings of something. Large. If there is a lot of something in the picture and it is small, then the icon will appear in the form of a blurry spot. And it will no longer become an icon, but a trace of the life activity of birds;


• ~ The method was tested only in XnView. When saved, it recodes the image as needed.

§ 2. Creating an icon for the site

In fact, by saving the image as favicon.ico, we created an icon for the site.

§ 3. How to install an icon on the site

Copy our favicon.ico file to the root folder of the site (where it is home page site) and that's it. , and others with services will automatically find and display our icon. The main thing is that it is called favicon.ico and is in the root folder of the site.

§ 4. How to change the site icon

Replace the favicon.ico file located on , with your own, created using the method above.

§ 5. Why is it needed at all?

What does having an icon on a site do? Well, the most important thing is that the site gets its own identification mark. In the browser:

In the search engine (

Today we will talk about how to properly create an icon for your project. Below are useful tips about icon design, as well as services for creating them.

Association Analysis

Before you create an icon for your project, you need to define your keywords and then try to find the perfect representation or metaphor for them. You will need to look for images and symbols that have a direct connection with the desired keyword. This way you can choose the right images for your icons, which will be intuitive for the user.

Competitor research

Creating an icon design for mobile application, try not to repeat yourself or copy the design of other icons. Why is this necessary? Imagine that you are looking for a task manager. Look at the application icons below and ask yourself which manager would you choose to install on your smartphone?

The Wunderlist icon (the first one) compares favorably with other application icons. Most likely, the user will download Wunderlist and thus the application will receive more installations.

On the other hand, the analysis will help determine the main idea that competitors use in their icons to show the main function of the application.

Purpose of the icon

When designing an icon, it is important to consider how it will be used and what its functions are.

For example, the icon of a mobile application should serve as an identification function and distinguish it from other applications on the smartphone. This applies to both the list of programs already on the smartphone and in the application store ( App Store, Google Play).

You also need to understand that, while focusing solely on the marketing component of the icon, we must not forget about the scenarios when the application will begin to be used. It makes more sense to make the icon focused not on a single download, but on the daily use of the product by an ordinary user.

Uniqueness and recognition

When promoting your brand, you should make every effort to increase recognition of not only your logo, but also your icon. To do this, it must be unique and at the same time clearly associated with your project, as well as you can distinguish a Mercedes from other car brands by its badge or find a Nestle chocolate bar on the supermarket counter.

Fewer details

The more concise the icon, the easier it is to remember and recognize it in any case. Many designers strive for the most aesthetically pleasing appearance of an icon, adding a large number of details that serve no function other than decoration and concomitantly clogging the information field of the icon. This is not a photograph; meticulous detail is not needed here. Plus in a small size small parts they simply merge into a shapeless mass.

The second application icon looks better due to its simplicity and minimalism.

Prioritize size

There are two approaches to creating an icon.

First: create it in a large size with maximum detail, and based on it, work out options of a smaller size and a more schematic appearance. The second is the opposite of the first: first, an icon of the most commonly used size is created, and then other options are worked out by adding or subtracting details. Which way to choose? Decide for yourself, both options work.

Need multiple icons? Create a set!

If your project requires several icons, create them all at once in the same style. They may have the same color, outline thickness, individual details, and much more, but the content of the icons may differ. This way you can ensure a harmonious and uniform appearance of the interface.

Don't waste your space

Icons can be different: wide and narrow, high and low. They have one recommendation in common - do not waste free space and do not try to fill the entire available area with images or inscriptions. Let the icon “breathe”, leave a little space around the finished composition when placing it in the interface or anywhere else. At the same time, there is no clear indication of the size of the indentation in pixels for such cases; just be guided by your own visual perception.

Different icons for different platforms

If you need to create an icon for different platforms, you can take one option as a basis and simply make small stylistic adjustments to it in order to end up with several icons that will be different, while demonstrating their relatedness.

Color is very important

Choosing the right color largely determines the perception of your icon. Try not to use more than two contrasting colors. By the way, Google has set conditional restrictions and even specified sets of compatible colors in Material Design. Use them in your design.

Do without text

An effective icon does not require words to convey its content. Leave text for websites or advertising banners, and when creating an icon, try to do without it. Why is that? Because when the icon size is reduced, the text will become unreadable and will look like a regular spot of color.

Look for a balance between originality and ease of perception

As you can see in any app store, icons come in a wide variety. Experiments are good, the original form always attracts attention. But don’t forget about memorability: the simpler the shape of the icon, the easier it is to remember. A good illustration in this case is road signs - these are simple shapes, which are easy to read and remember, even if the driver is moving at a decent speed.

For your application, you need to come up with something similar - both original and simple in form. It should be taken into account that on the screens mobile devices icons are displayed differently - in larger or smaller sizes. Therefore, you also need to make sure that the version you create always looks attractive.

Don't forget about the background

In the app store, icons are usually displayed on a light background - white or gray. But the wallpaper of the device on which the user downloads your application can be any color. Therefore, do not forget to check how attractive and noticeable your icon is on a particular background.

Application interface elements have no place on the icon

Do not place application interface elements on its icon. This confuses the user and is considered bad manners.

The icon should be informative

An effective icon communicates the function of the application by its appearance. This way the user will be able to understand what your product is for before looking at the description. For example, images of notes, instruments or visualizers are used for player icons, for cameras or graphic editors- a camera lens, and for instant messengers like Viber - symbolic message bubbles.

Based on the icon, the user draws a conclusion about what awaits him inside the application. Therefore, the icon should be clear, concise, with a minimum of objects, the picture should be readable at a quick glance.

Ksenia Mayevskaya, developer of the application Remember-Remind.

Now that we have learned tips on how to create an effective icon, we present to your attention useful services for creating it.

Useful services and resources for creating an icon

Russian-language online service for creating both individual icons and entire sets. Big choice icons and options for editing them.

Font icons for use with Twitter Bootstrap

Here you can find seamless textures and ready-made palettes. This resource also has a forum where communication takes place. An excellent service for choosing the color of your icon.

A professional online service that allows you to generate a color scheme in accordance with the rules of color on the color wheel.

Automatic creation of gradients.

A resource that is ideal for those who can’t decide on colors and fonts for your project. Interestingly, the palette and fonts can be selected depending on the area of ​​business.

Management ,dedicated to Material Design for Android

Guides about iOS Human Interface from Apple.

Step-by-step instructions for creating an icon

You can create an icon for a website or application using graphics programs or online services.

The first method is suitable for experienced designers for painstaking work. Online tools are suitable for quick creation or a large number of icons, for example, for a website or service. Online tools are simpler and more intuitive, so they are ideal for beginners.

One of the online services that allows you to quickly create modern icons is IconsFlow.

A few words about the capabilities of the service:

• Ability to export icons in SVG (vector), PNG and ICO forms;
• Great editing functionality;
• Ability to create icon packs in the same style;
• Free options.

Now let's move on to the process of creating an icon.

To create an icon or a whole set, you need to online editor first find the icon you need or several at once.

Then, using editing tools, you can customize it, for example, you can set the desired color of the icon, background, add another icon, shape, text, or add a new element.

After the icon (or icons) have been edited, you can work on its background, scale, shadows, and add a gradient.

One of the advantages of the service is that if you are creating a whole set of icons, you can do all the above edits in batches.

That is, by clicking in one place, you change the design of all icons at once: shadows, size, background, etc. Very convenient if you need to create 3-5 or more icons.

After creating the icons, the service will ask you to create an account where you can download the icons for free or sign up for a paid plan.

That's all.

As you can see, even the creation of such a small element as an icon should be approached with all responsibility. A good icon design attracts users' attention, while a bad icon design can turn them off.