HTML: Creating and adding a favicon. What icons should you have at home, how to place them correctly So, where to place the icons

Favicon (favicon is short for Favorite icon) is an icon, also known as a shortcut, website icon, or bookmark icon. Favicon is normal graphic image(picture) associated with a specific web page or website. Browsers that support adding a favicon usually display it in the address bar and tabs next to the page title, some browsers use it as an icon for a shortcut saved to the desktop. Search system Yandex has attached great importance to the favicon and displays it along with search results.

Creation

You can use almost any graphics editor to create a favicon, but the image format you choose must be 16x16, 32x32 or 64x64 pixels, using 8-bit or 24-bit color. The image must have a PNG (W3C standard), GIF or ICO extension.

When creating an image, you should pay attention to the following nuances:

• The favicon should be made in the same style as the website, since it is a kind of business card of your project.
• The image you want to use as a favicon should be extremely easy to understand, better use just a few elements.
• Make sure that the favicon conveys the essence of your website, business, or project as much as possible.
• It is better to create a picture in such a way that it evokes associations among visitors to your website. For example, a phone icon for a mobile phone store.

An example of a program that allows you to create icons is Favicon Create (download) - this is the simplest program. To make an icon you only need a regular picture in *.jpg or *.bmp format, which can be made in any graphic editor, even in the same paint. Load the image into the program, then select the size, color depth and press the start button. All is ready.

Adding a favicon

To add a favicon to a web page at the beginning of an HTML document, you only need to enter one line with the tag , in which we need to specify the rel attribute, which indicates to the browser that we are adding an icon, the href attribute containing the address of our image, and the type attribute, indicating what image format we are using:

Note: Please note that you can specify your own favicon for each web page or for each section of the site.

The table shows various options adding a favicon and providing browser support:

Don't underestimate the importance of a favicon, especially today, when there are billions of sites and pages on the Internet, some of which are your competitors. The site icon, like the logo, contributes to its memorability and recognition. Not to be missed additional opportunity, improve your resource.

ICO format and other graphic icon formats. Installing a favicon on a website with support for iOS, Android and other devices, as well as new HTML5 products. Step-by-step instruction, from simple to complex, accessible and clear, for novice webmasters.

You've probably already heard something about the format ICO and an icon for the site favicon, but nothing stands still and something new is constantly appearing. I decided to write this article in order not only to summarize things known to everyone, but also to supplement them with new items.

So you will learn about some secrets of the ICO format, problems with Internet Explorer and their elimination, and new favicon graphic formats (transparent and animated), HTML5 standards and icons for mobile devices for iOS and Android, and much more.

• ICO format
• File favicon.ico
• BugFix for Internet Explorer
• Favicon in HTML5
• Favicon for Apple
• Favicon for Android
• favicon.ico file address

ICO format

Let me start with the fact that the format ICO(Windows icon) was developed by Microsoft for file icons. It is similar to the format CUR(Windows cursors) and is closest to BMP. The only difference is in the headings, as well as the presence of a mask, which allows you to create transparency in the drawings. However alpha channel (translucency) for 32-bit icons appeared only in Windows XP.

File favicon.ico

File idea favicon.ico (picture 16x16 pixels) also belongs to Microsoft, which they implemented for bookmarks in Internet Explorer 5. Hence the name fav- short for favorite - favorites, and icon - icon. On this moment this format is supported by all popular browsers, but the key is in the details. Conditionally generalized version Installing a favicon on a website looks like this:

Please note that in the above example two relations are used: shortcut (from English. label) and icon (from English. icon). The trick is that shortcat is redundant here and was left only for older versions of Internet Explorer, but it must come before icon .

image/vnd.microsoft.icon vs image/x-icon?

It is also interesting that in 2003 the format ICO was registered Simon Butcher(Simon Butcher) in IANA and its MIME type became image/vnd.microsoft.icon. The problem is that older versions of Internet Explorer can't interpret it correctly, so it's better to use the old image/x-icon .

BugFix for Internet Explorer

Don’t forget that for Internet Explorer you can use HTML crutches based on comments, for example:

Other graphic formats favicon

However, now the integration of other graphic formats: PNG, GIF, JPEG, APNG and SVG. The situation is best with static formats PNG And GIF, they are supported by all new versions of popular browsers. Animated APNG only works in Firefox (since version 3.0) and Opera (starting from version 9.5), and here is the animated one GIF Only IE and Safari don't understand. JPEG Only Internet Explorer does not support.

I will give several correct examples of inserting favicons in appropriate formats onto a website:

I draw your attention to the fact that for APNG uses the video/png MIME type, and for GIF (even animated)- image/gif. Also interesting here is the MIME type for SVG format, this is image/svg+xml .

Favicon in HTML5

Now, regarding the favicon format HTML5, read more. The interesting thing here is the sizes attribute, which sets the size of the icons for visual display in the format:

(width1) x (height1) [(widthN) x (heightN)] | any

In other words, you can list the corresponding sizes separated by spaces or specify the value any (for all). The HTML5 documentation gives this example:

Favicon.ico for mobile browsers

The problem is that the sizes attribute is not currently supported by any of the popular browsers. The situation is somewhat different with mobile browsers.

Favicon for Apple

If the sizes attribute is not specified, the default value is used 57x57.

It is also noteworthy that how favicon.ico serves as an automatically recognized icon for the site, without indicating a connection, the following names will be recognized automatically:

• apple-touch-icon-57×57.png
• apple-touch-icon-72×72.png
• apple-touch-icon-114×114.png
• apple-touch-icon-144×144.png

If you want iOS not to add any effects, use keyword precomposed, for example:

There is also a set of automatically recognized names here:

• apple-touch-icon-57×57-precomposed.png
• apple-touch-icon-72×72-precomposed.png
• apple-touch-icon-114×114-precomposed.png
• apple-touch-icon-144×144-precomposed.png

Favicon for Android

Browsers based Android inherited the Apple format. Essentially, it will be enough to specify something like the following:

favicon.ico file address

You probably noticed that in some examples a relative rather than a favicon is used? This is not accidental, because In addition to HTTP, HTTPS is now gaining momentum. To avoid problems, it is easier not to specify the protocol in an absolute address, for example:

or use a relative path.

How to install a favicon icon on a website?

Well, now let's try to form a generalized version of inserting a favicon website, I got it like this:

I will try to clarify the proposed design. At the beginning there is a favicon for Internet Explorer, which will respond to shortcut. Further, the optimal one will be static PNG icon with transparency, and icon animation I gave GIF format. We will create icons for mobile devices standard size 57x57 pixels, one without effects, and the other with its own effects (precomposed - will disable browser effects). In order to avoid problems with HTTP and HTTPS, I specified relative path, starting from the site root (/ - at the beginning of the address), but for IE it's probably better to use an absolute path.

That's all I have. I hope that the article was useful to you. If you can make any corrections, additions, clarifications, etc. - write. Thank you for your attention. Good luck!

Instructions

If you take a quick look at your desktop (), you can see many folders and shortcuts - these are desktop elements. Each such element can be changed, i.e. replace icon. To place icons on it is enough to have basic knowledge about operating systems ah Windows line. Find any file in the folder that you want to launch from the desktop, right-click on it, select Send to, then select Desktop (create shortcut). Thus, a shortcut will appear on the desktop, the graphical basis of which will be .

To change any display settings for the created shortcut, right-click on the object and select “Properties”. In the window that opens, go to the “Shortcut” tab and click the “Change Icon” button.

In the “Change Icon” window that opens, select any icon offered by the system, or try setting your own as an icon. To do this, click the “Browse” button, specify the path to the image and click the “Open” button. operating room Windows system recognizes files with the ico extension as icons. Such files can be made using special programs, or you can try to do it yourself. To create your own icon, you need to find a suitable picture, keeping in mind that it will be small in size. Icon files can be 16, 32, and 48 pixels wide (height).

Open Paint program, which is included in the standard set of programs for Windows operating systems. Click the Start menu, select Run, enter mspaint in the window that opens and click OK. In the main program window, press the key combination Ctrl + O and select the file suitable for the future icon.

Now press the key combination Ctrl + W, the “Stretch and Skew” window will appear in front of you. Here you need to specify the percentage value by which you are going to reduce the image. Depending on the size of your image, the percentages may increase or decrease. For the first time, you can set both values ​​to 50%. Press the keyboard shortcut Ctrl + E and check the size of your image. Initially, you can try to get the largest size for the icon – 48 pixels. If your value is much larger, try making the image smaller again by pressing Ctrl + W.

After achieving the desired result, all that remains is to save the file. Press the keyboard shortcut Ctrl + S and click the "Save" button. To turn a file with a standard bmp extension into an ico (icon or icon) file, you need to rename it using file manager Total Commander or by enabling the display of extensions on your system. The file you need has been received, use the method described in the second step to change the icon.

Favicon- this is a small picture measuring 16x16 (or 32x32) pixels, which is located in the browser to the left of the address bar. For some reason there aren't many people add favicon to your sites. In my opinion, they are missing out on a lot. For example, in Yandex site icons are displayed, and people click on such sites much more often than on those that do not favicon. Also, in my opinion, it slightly increases the authority of the site. In general, in this article we install favicon on the site.

To begin with, how find favicon. Firstly, you can create it yourself. Very good service favicon.cc. On it you are directly online create yourself a favicon. You can also use ready-made collections and choose the one that suits you. The easiest way is to use the search and query: " favicon collection"I think that already the first site will show you thousands of different favicon, and all you have to do is select it.

Now the second step - installing favicon on the site. To do this, add inside the tag next line:

I advise you to post favicon directly to the root of the site. If you decide to place it in a different location, then accordingly change the value of the attribute " href".

After refreshing the page, you will see your favicon next to your website address.

Sometimes favicon does not appear immediately. Typically, browser caching is to blame. Therefore, if the picture is missing, then try clearing the browser cache (this should be in the settings). Restarting the browser may also help. But I say again: if you did everything correctly, then favicon will appear on your website.

The simplest sorting method, in which popular applications are located on the main screen or closer to it, and launched ones rarely take their place on the last pages.

Advantages: The apps you need are always at your fingertips.

Flaws: if there are a lot of applications, the time it takes to find and launch the one you need increases.

2. Folders by category

Since the appearance of folders in iOS, God himself ordered them to be used for sorting. The most logical way is to group them by topic. “Internet”, “Sports”, “Office”, “Games” - the system itself suggests names for combining two similar applications. Usually everything is placed in folders on the second screen, and the first one frees up space for more popular programs.

Advantages: Can accommodate a large number of applications in a compact manner.

Flaws: search difficulty and one additional action to trigger.

3. Action folders

Unlike the previous one, this method uses the purpose of applications - the actions that they help to perform - as a sorting criterion. For example, the “Read” folder contains iBooks, Reeder and Pocket, the “Listen” folder contains Spotify, “Podcasts” and “Music”, and the “Play” folder contains games.

You don’t have to bother with names and use . This way, not just one, but several actions can easily fit into a signature.

Advantages: ease of perception and minimal search time.

Flaws: There may be too many folders, and some applications may be suitable for several of them at once.

4. Folders on one screen

The essence of this method is a conscious refusal to use several desktops in order to place everything on the main screen. You will have to try and group the applications so as to fit into the available space. But then you won’t have to scroll through it - just open one of the folders and run the right application.

Advantages: maximum compactness.

Flaws: It is quite difficult to group all applications into several folders.

5. By topic without folders

Despite all the advantages of folders, sometimes it’s easier to just swipe a couple of times and find what you’re looking for, seeing all the applications in front of your eyes. To do this, they must all be grouped into rows or columns.

Advantages: Clearer visual perception and faster search.

Flaws: it is almost impossible to fit the necessary applications on 2-3 desktops; they stretch across 5–7 screens.

6. Minimalism

A good way to make it easier to find applications and make your desktop look attractive. However, it is suitable only for those who have so little installed applications that they can be placed on 1–2 screens.

Advantages: beautiful and clear.

Flaws: Useless if there are more than twenty applications.

7. Alphabetically

The most severe method for those who are too lazy to sort applications in any way. It is used by default in iOS. If you know the name of the application, finding it will not be difficult. To enable this type of sorting, open “Settings” → “General” → “Reset”, select “Reset Home settings” and confirm the action.

Advantages: strict order.

Flaws: The need to scroll through desktops and remember application names.

8. By color

The most exotic sorting method, the essence of which is to select adjacent icons by color. It will appeal to aesthetes and those with a good visual memory, since after such sorting you will have to search for applications exclusively by color.

Advantages: Very beautiful.

Flaws: almost useless. Finding the right application becomes quite difficult.

9. Combined method

Finally we got to the most common and most convenient way sorting. All of the above options for grouping applications are good, but very radical.

Why go to such extremes when you can take the best from each of them and place the most used ones on the main screen, place a folder with programs of the same topic in the Dock, and within one folder arrange applications according to icon colors or purpose.

Advantages: the ability to fine-tune for yourself.

Flaws: Takes longer to find apps compared to more concise sorting methods.

How to keep your desktop tidy

Whichever method you choose, don't forget to keep things organized. This is very easy to do. It is enough to follow simple rules:

1. Create no more than three desktops, otherwise scrolling through screens will take a lot of time.
2. Once a month, delete apps you don't use. There will be fewer icons and more order. Also .
3. Don't forget to search. Swiping down on any screen will open Spotlight, where you can easily find the application you need by typing just a couple of characters.