How to make a folder icon (icon) from your photo. How to create an icon for your project: tips and useful services How to make icons

In today's lesson I will tell you about favicon icons (favicon). I will show you how to make a favicon.ico for a website(or for a blog, it makes no difference) and show you how you can insert favicon.

Surely, many still do not know about what "miracle" I am talking about. To put it simply, a favicon is a picture (icon) that stands in front of the website address in the browser. I will clearly show the Favicon of my blog:

This icon is a kind of logo for your blog. Therefore, the creation of a favicon must be taken with full responsibility. Remember, it can make your blog stand out from others.

Lesson plan:

1. Building a Favicon from scratch.
2. Creating a favicon from a finished image.
3. Services with ready-made icons for the site.
4. Attaching the resulting icon to the site.

How to create a favicon from scratch

There is one very convenient service. It has a favicon.cc address. This service for building favicons looks like this:

To draw favicon just pick a color and just paint. If you drew something, somewhere wrong, to delete a fragment of the picture, select the transparent tool (check the box) and "poke" on the pixels ("squares") that need to be removed:

I drew the following favicon:

What I liked most about favicon.cc is that you can instantly see the result of your work in its original size. To do this, you need to go down a little to the Previw section:

Alternatively, you can see the result of the work right in the browser (Opera, Firefox, Internet Explorer, etc.):

Creating a favicon from a ready-made image

Let's say you don't want to create an icon for your site from scratch, but want to make it from a ready-made image. In this case, the service for creating favicon.ru will be convenient for you.

The service is in Russian, so you shouldn't have any problems. Just indicate the picture that you want to see as an icon for your site (the “Browse” button), then click “ Create favicon.ico", And then already" Download favicon.ico”.

Wisdom is so good that it can be
said on one occasion, but useful on 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 exclude that there are other ways, but they are unknown to me.

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

Again, this is my personal experience. That, how do i make icons... Aesthetes and gourmets can pass by.

And 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 go directly to the process of its creation. How do I:

In this - the icon for the site is ready.

Method N yuan:

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


• ~ The method was tested only in XnView. When saving, it will recode the picture as it should.

§ 2. Creating an icon for the site

Basically, 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 located) and that's it. , and others with services will automatically find and display our icon. The main thing is that it should be called favicon.ico and be located in the root folder of the site.

§ 4. How to change the site icon

Replace the favicon.ico file located on the one created by the method above.

§ 5. Why is it necessary at all

What does the presence of an icon at the site give? Well, the most important thing is that the site gets its own identity. In the browser:

In the search engine (

If a theater starts with a hanger, then any self-respecting site starts with an icon. Jokes, jokes, but sometimes the presence and quality of the site icon is judged on the resource itself. And the display of the icon in the results search query will help to distinguish the site from the rest.

In any case, it is useful to know how to create, install and change an icon. Let's talk about this.

Creating a favicon using online services

The easiest way to create an icon, or favicon (from English favorites icon), is using popular free services.

But before making an icon for the site, you should prepare a pre-selected image. It should be a square picture. It should be noted that the favicon.ru service standardizes all images, reducing them to a size of 16x16 pixels. Therefore, if the picture is initially not square, the program can distort it quite strongly. The size of the uploaded file for the service should not exceed 300 kilobytes.

You can create a favicon for a website using any graphic editor. If there is already a ready-made picture (for example, a company logo), it only needs to be prepared and reduced. If you need to create a drawing "from scratch" - the "favicon" service offers to use an elementary, but quite convenient program for drawing icons.

So, the icon is loaded or drawn. In order to get the finished image, just click the "Download favicon" button in the lower right corner of the page. This will load the favicon.ico file.

Favicon and Photoshop

You can create the file you are looking for using only Photoshop. Having picked up or pre-rendered the desired image, you should click "Save As" and select .ico from the list of formats for saving.

It may turn out that the version of the imaging program will not support this format. In this case, you should search and download the plugin of the ico format. It needs to be unpacked into the Plug-InsFileFormats folder. After these simple steps, the ability to save in this extension will be available.

A little advice. Almost all browsers standardize website icons down to 16 by 16 pixels. Considering this, there is no need to create highly artistic canvases - they simply will not be visible.

The ico format is most commonly used as it is supported by all popular browsers. It is possible to save images in other graphic formats, but it is important to remember that some browsers will not display such an icon.

Setting the icon

We received the cherished favicon. You should think about how to put an icon on the site. To do this, you need to upload the image file to the root directory of the site (usually called public_html).

But that is not all. To display the icon, you need to write the following html-code:

In the "type" column it is important to correctly indicate the type of image. That is, if a GIF image is used, the code will look like this:

This code is installed anywhere between tags and home page file.

We figured out how to install an icon on the site. You can check the correctness of the installation by simply entering the address of your page in the browser line. If a favicon is displayed to the left of the address, everything is done correctly.

It should be noted that the icon will not be displayed immediately in the search engine results, but only after the cache is updated. This process can take from a week to a month, or even more.

Replacing an icon

If the site already has a favicon, but it does not suit the resource owner, you need to figure out how to change the site icon. In fact, there is nothing complicated about this - the replacement scheme is identical to adding an icon to the site. That is, first the picture is drawn and saved in a predefined format. The resulting image is uploaded to the root folder of the site, the html-code is changed or rewritten (if necessary). If everything is done correctly, the browser will display the new icon immediately after refreshing the page.

Thus, to find the answer to the question of how to change the site icon, you should read this material again. 🙂

If you want to give the folder an original look, then change the folder icon. I'm not talking about those that are already in the system, namely your icon from your photos or from any images.

You can make an icon (icon) of a folder from your photo in the standard program - Paint that everyone should have in the operating room windows system 7

Trust me, with your icons it will be much easier and faster for you to find the folder you need without reading the text (folder name)

Here's a quick example. This kind of folder speeds up the search among a large number of similar folders.

Find the program “Paint “ you can through "Start" and "All Programs" Run it and drag the picture into the program window. And even easier, it is to call the context menu by clicking on the image that you want to put in the role of an icon, with the right mouse button. Select the item "Change" Opens the program "Paint"

How to create an icon in Paint

And first of all, what we have to do is cut out the desired part of the image. In addition, they should be cut so that all sides are the same size. If you do not adjust the aspect ratio of the sides, then the icon will turn out to be square, and the image will be flattened.

We cut it off. On the program panel, select the "Select" tool. In the selection parameters, specify the shape " Rectangular area"Select a fragment of the photo with the left mouse button. Hold down the key and watch how the size changes in the bottom panel of the program.

Adjusted the size, press the "Crop" button

Now the photo is square, let's continue.

After cropping, resize the future icon. Click “Resize” Resize in pixels and enter a size of 64 both vertically and horizontally. Save "OK"

We put our icon on the folder

All the blank is there, we apply it to the folder. Hover the cursor over any folder and call the menu with the right mouse button. At the very bottom of the list, go to the item "Properties" Next "Settings" And at the bottom the button "Change icon .."

A window with system icons will open. But we don't need them, we want to apply our image. Then go to the overview and look for our newly created icon.

By the way, you may not find it in the explorer, since our image is not a format icon “ ico"To see it select display" All files *. * "

Now everything is in order, we press “ OK“

It's that simple. The folder has become different from the others, and it will be easier for us to navigate when searching for it.

But that is not all. You can apply your own icons to shortcuts as well. See how they look on my desktop.

A trick that will make your computer immortal!

Today my colleagues from the Clubprofi team, for the first time, talk about a trick that makes your computer invulnerable to any adversity:

Thanks to this trick, your computer will be in perfect condition after every reboot.

At the same time, even if the day before you caught a virus, deleted system folders or broke Operating system, it will be enough to restart the computer and it will work again as before.

Using this approach, you will never again have to regularly clean your computer, reinstall the Operating System, call a wizard, etc. The computer will always be in the same state after every reboot.

How it works and how to implement this technology already on New Year's holidays, see here:

This is useful to know:

• 
  Avatan is a free online photo editor with ...
• 
  
• 
  

The last lesson of the fourth step of our tutorial will be devoted to creating icons for Android applications. And at the end of the article you will find our traditional test for the assimilation of the passed material.

Those who have been using Android smartphones for a long time know that this OS is highly customizable. You have access to customize 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 can even ... redraw application icons. For this there are several utilities available for free download at Google play... In our article we will tell you about the most convenient programs and also show you how to create an icon for an application in one of the applets.

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

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

The application is designed 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 can be found at the end of the article.

An application for Android 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 chooses one of five thousand templates.

For drawing shortcuts, the application contains convenient tools:

• Scaling
• Positioning
• Turn
• Radius and more

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

Material Icon Maker offers just 4 easy steps to create a new icon:

1. Select a base shortcut. The basis can be borrowed from a selection of more than 900 sources, type text or upload a picture from the smartphone gallery.
2. Customize the background. This is where the user chooses the shape and color.
3. Apply shadows by choosing direction, color and opacity.
4. Export in several available resolutions.

Ready-made icons can be used in any third-party Android launcher that supports the installation of custom shortcuts, for example, Nova Launcher. The application is free, does not require an Internet connection and does not contain ads, however, for only 15 rubles, you can buy a special key that unlocks additional functions, like more fine tuning shadows, colors and export in high definition.

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

First, a 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. This is followed by work with the logo. You can set a new size for it, make a fill and outline, apply a shadow. The last step is to apply the effect. In the basic version of the application, only two are available: glittering and diffused light. To access all the 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 ready-made assembly is designed for various launchers, for example, Nova Launcher, Action Launcher, ADW Launcher or Apex launcher.

How to create an icon for an Android application yourself

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. Choose a logo from ready-made templates or import from the device memory.

Step 7. Choose a color for the logo.

Step 8. Save the icon to your desktop, export it in PNG format or add it to the package for loading into 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 to work with them, you do not need to interfere with the system settings of the smartphone, since, in fact, such utilities are a kind of graphic editors.

Did you like one of our suggested apps? Draw your own icons and add your most spectacular works in the comments to this article.