How to make an icon for a shortcut. How to make an ico file

1 vote

Good day, dear readers. Sometimes, a small thing can make a difference. Today we’ll talk about such almost invisible gizmos that bring significant benefits to the site.

From this article you will learn why favicons are needed, where to look for them and how to make an icon in ico format simply and quickly.

An invisible element that is deposited in the subconscious of everyone

A favicon is a small picture. In Yandex, it appears next to the name of the portal already in the search, and is also necessarily displayed in the browser as soon as you open the resource.

You probably paid attention to them. This is exactly what they are used for. Icons contribute to the memorization of a particular resource, because visual information is absorbed much faster and penetrates into the subconscious itself. You can see a person once, chat with him for three hours and pick his memory for a very long time; it’s worth meeting him a second time. Visual information (the face) is etched into memory much deeper than any other.

If you see the icon two or three times, it will be deposited on a subconscious level, you will trust the portal and will be more willing to choose it from the crowd.

If you are looking for information on a specific query and open several tabs, then you will look first at those whose favicons are familiar to you, and you will most likely close the rest if you are satisfied with the information received from the first sources.

I'll tell you a story about how an icon for a website played a cruel joke on me. I needed to download some book. I saw a familiar favicon, and this was not the first time I had seen the design either. Great, I've been here before! I clicked on download almost without thinking. Before I had time to save, the antivirus software began to scream wildly, and the computer could no longer be saved, I had to reinstall the system. Only at that moment did I remember where I knew this site from and remember it well. The exact same situation happened about a year ago, on the same resource.

How to create a favicon in just 2 minutes

The icon for your site can be in png or ico format, 16 x 16 pixels in size.

You can use the converter and create a favicon from any image. For example, here https://www.icoconverter.com/ . Choose File.

For example, I have already prepared a drawing. It is best to choose the png format, then the edges will be transparent.

Select 16 pixels. Some people prefer 8-bit images (Bit depth). Then the image will load faster. It seems to me that this is no longer particularly relevant. Use beautiful and high-quality things. It will be much more useful.

So, it would seem that's it. However, I get an error. The fact is that the image size exceeds the permissible standards. The image must be no more than 3 MB.

You can compress and or Paint, but I'll show you another option. If you downloaded the image in Google, then find it again, and then run “Search by Image”.

Now select "Small".

Download the same photo, but in a smaller size.

Let's convert again.

Where to look for ready-made icons

An easier and more honest way to find an icon is to download it from an online service https://www.iconsearch.ru/ . The use of these pictures is permitted by the administration and is not punishable by law. . Enter any name in the search bar and you're done.

Find an image in png and ico format, download and install it on your website.

But what if you want to create it yourself? There's nothing complicated about it.

Creative work for professionals and those eager to become specialists

Any business is good. It’s cool if you are drawn to new knowledge and are ready to do all sorts of little things to develop your abilities. If you want to come up with something interesting for the portal yourself, then you will need a free service: https://favicon.ru/ .

Choose a color.

Draw in the field provided for this.

At the same time, monitor the results. Then download and you're done.

Perhaps you will be inspired by using ready-made drawings. Select a file from your computer.

And your picture will turn into an 8-bit favicon. Use transparency to get rid of the background.

This is the result you will get. I don't know about you, but frankly speaking, I don't particularly like him.

I would be very happy to use Photoshop () for this work. I would create an icon, save it as a png, and then convert it using https://www.icoconverter.com . Yes, there is much more work, but the result will be more interesting and beautiful. Although, it's up to you to choose.

Watch the video in which a guy creates an amazing icon in just over 9 minutes.

If you liked this video and want to study Photoshop in more depth, I recommend you the course by Zinaida Lukyanenko ( Photoshop from scratch in VIP 3.0 video format ). In just a few weeks you will master all the skills you need to work with this program.

I will never tire of repeating that the technical side is not such a problem. It is important to hone your skills, learn to create cool projects that work. And this can only be done in practice. After you get all the basic knowledge regarding technology.

Next comes experience and practice. At first, it takes several hours to create one image, but over time it becomes obvious to you what colors go together and the techniques that are best used in this or that case. There is nothing more enjoyable than watching professional designers work. This is truly amazing.

Don't waste time on meaningless comprehension, develop your own talent. You shouldn’t be like the lumberjack from the fairy tale, who until the end of his life tried to find the fastest way to work with an ax, but lived to an old age and did not cut down a single tree. He devoted all his time to conversations, reasoning, books and other searches for an answer to the question that concerned him. By the end of his life, he no longer had the strength to check whether the best option worked - just do it.

Do everything in a timely manner. Very soon you will definitely understand how you can work easier, faster and in the best way. At this stage, complete the tasks, at least somehow, and you will definitely be able to reach the end with an incredible amount of knowledge.

If you liked this article, subscribe to the newsletter. You will be able to receive up-to-date information that will help you find yourself on the Internet and earn good money doing what you like: design, writing texts, layout and even managing all these processes. There is something for everyone.

Good luck in your endeavors. Until next time.

We will devote the last lesson of the fourth step of our training course to creating icons for Android applications. And at the end of the article you will find our traditional test for mastering the material covered.

Those who have been using Android smartphones for a long time know that this OS is characterized by a high degree of customization. There is access to individual customization of wallpapers, themes, home screen, widgets, fonts, and so on. The user can even change the system interface using one or another launcher.

However, few people know that Android even allows you to... redraw application icons. There are several utilities available for free download on Google Play for this purpose. In our article we will talk about the most convenient programs, and also show how to make an icon for an application in one of the applets.

A simple Android application with an intuitive interface allows you to quickly create an icon from dozens of templates, change the size, color and signature. Also, during the process of creating a shortcut, you can adjust the tilt and even overlay the finished image as a background.

The application is delivered under a shareware scheme. The main version of the program has advertising banners and a limited number of templates. However, for the full version the developers are asking only 76 rubles. As they themselves joke: the price is just one cup of coffee.

The application was created to create shortcuts to replace standard icons. To do this, just select a program from the list of applications and redraw the shortcut in the application. More details on how to do this are at the end of the article.

An Android application with extensive functionality for drawing icons. Moreover, the utility allows you to create shortcuts not only for mobile platforms, but also for PC systems, for example, Windows. To create an icon, the user customizes the background and selects one of five thousand templates.

The application contains convenient tools for drawing shortcuts:

• Scaling
• Positioning
• Turn
• Radius and more

All icons are created using scalable vector graphics and exported to SVG format. By the way, this even allows you to customize the source code of shortcuts in a separate tab.

To create a new icon, Material Icon Maker offers just 4 simple steps:

1. Select a base shortcut. You can borrow the basis from a selection of more than 900 sources, type text or upload a picture from your smartphone gallery.
2. Customize the background. Here the user selects the shape and color.
3. Apply shadows by choosing direction, color and transparency.
4. Export in multiple available resolutions.

Ready-made icons can be used in any third-party Android launcher that supports installing custom shortcuts, for example, Nova Launcher. The application is free, does not require an Internet connection and does not contain advertising, but for just 15 rubles you can buy a special key that unlocks additional functions, such as finer-tuning shadows, colors and high-resolution export.

A fast and very convenient icon editor that allows you to draw new shortcuts for applications in a couple of minutes.

First, the background is created and configured. Here you can change the shape, set the color and thickness of the stroke, apply a highlight, shadow or gradient. Next comes work with the logo. You can give it a new size, make a fill and outline, and apply a shadow. The last step is to apply the effect. In the basic version of the application, only two are available: brilliant and diffused light. To access all templates, you will have to expand the application to the pro version for 116 rubles.

The peculiarity of this application is that the icon is drawn not for a specific application, but a complete package for all programs on the smartphone. The finished assembly is designed for various launchers, for example, Nova Launcher, Action Launcher, ADW Launcher or Apex launcher.

How to create your own icon for an Android application

To demonstrate the capabilities of applications for creating and editing icons, we chose the Adapticons utility, which we installed on the Fly Cirrus 12 smartphone. With its help, we will show you step by step how to draw a shortcut for Android.

Step 1. In the list of applications installed on your smartphone, select the one for which you want to draw a new icon.

Step 2. Choose a background.

Step 3: Adjust the size of the background and logo.

Step 4: If necessary, move the logo and add a shadow to it.

Step 5. Go to the logo editor.

Step 6. Select a logo from ready-made templates or import from the device memory.

Step 7. Choose a logo color.

Step 8. Save the icon on your desktop, export it as a PNG, or add it to a package for download to the launcher.

The entire process of creating an icon can be seen in our video:

Now you know how to easily and quickly create a new icon for Android applications. In general, the bulk of applications have similar functions and differ only in the cost of advanced versions. The most important thing is that working with them does not require intervention in the system settings of the smartphone, since, in fact, such utilities are a kind of graphic editors.

Did you like one of the applications we suggested? Draw your own icons and add your most impressive works in the comments to this article.

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, my personal experience is described here. 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

We copy our favicon.ico file to the root folder of the site (where the main page of the site is) 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 (

When using any device, we often get bored with the same interface and want to change something. For each device, the appearance of the system changes differently. 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 with their help, this software becomes an excellent tool for 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.

Icon Tool Kit supports working with layers, allows you to adjust color depth, transparency, and there are various filters. The output file can be obtained in *.ico, *.png, *.bmp, *.jpg or *.gif. It is noteworthy that this software allows you to apply styles to the created icons, for example Mac, Vista and others. Downloading a program for creating icons is recommended for those who want to implement more creative ideas in the interface.

Favicon for a site is one of its distinctive features. This is another step towards creating and using a corporate identity. Favicon, in simple words, is an icon (image) that is displayed in the browser in front of the address bar. The favicon is also used when adding a page to bookmarks. Agree, it will be more convenient for the user to find your site in bookmarks if your “branded” icon is displayed there.

I think each of you has noticed a favicon while visiting your favorite sites. It looks like this (in the Google Chrome browser):

And for comparison, the display of the icon in the Internet Explorer browser:

How to make an icon for a website

You can make a favicon either using the standard capabilities of Photoshop (or another graphic editor), or using various web services.

Drawing Favicon using a web service

The easiest way to make a favicon is to use the www.favicon.cc service. It looks like this:

To draw an icon, you just need to select the desired color, transparency and draw the desired outline. When creating an icon, you can immediately preview it:

Create a Favicon from a ready-made image

In order to convert a finished icon in .png format (which, by the way, can also be used to set a favicon), you can use another web service: favicon.ru.

Installing Favicon on the site

When the icon is ready, you can download it in the format .ico. To add a favicon to your site, place the favicon.ico file in the site's root directory and add it between the tags line:

By default, if an icon for a site is not explicitly specified, the browser tries to load the favicon.ico file from the root. But it's better to be safe.

(for Internet Explorer).

The favicon size can be 16x16, 32x32.

Helpful Note

An icon file can have not only the extension .ico, but also .png, and it is recommended to use the latter option. This is because high resolution display devices (eg iPhone, iPad, iPod) have an icon size of 57x57 by default. To do this, it is better to make a second version of the icon (in a higher resolution) and add an additional line:

But it is worth noting that in this case the icon will be rounded at the corners and a highlight will be applied to it (this is done automatically by the device itself). To avoid this, instead apple-touch-icon need to write apple-touch-icon-precomposed.