Favicon.ico or an icon in the address bar of the browser
Immediately, I note that an article from the category "for the smallest." Just puschu it, suddenly it is useful to someone.
Favicon, what is it and what is it for? Favicon.ico is a file of a shortcut in Win32 OS which is an icon-link to the page of the site on which it is present. It can be seen in your browser's favorite links, address bar, and bookmarks in multi-window browsers. How to fasten it to the page? In order to draw an icon, you need to use any graphic editor, but after that you need to convert your resulting graphic file to .ico format or initially draw it in specialized editors such as AWIcons Pro, IconWorkshop, MicroAngelo, etc. Simply renaming a file extension in .ico is a bad idea, because Some browsers will not accept such a file and will not display an icon. If you are even more accustomed to working in Photoshop, then here you can download a plugin for working with images in the .ico format. For the plug-in to work, the file must be unpacked and saved in the Plug-Ins \ File Formats folder in the Photoshop root directory.
So, we have an icon converted in the correct way to the .ico format. Next, the points.
1. The name of the icon should be favicon.ico, because Some older browsers will not be able to identify it as a website shortcut.
2. Connecting the icon to the document by the following code. It is necessary to specify the type of content as image / x-icon and a link to the document as a shortcut icon. In addition to the fact that this is mandatory according to the w3c specification, there is a possibility that you will again stumble upon the features of some browsers without specifying the type of content.
3. You can choose the size of the icon from 16x16 to 48x48, the larger the icon will be the nicer, in the case when the user decides to place a shortcut on your website on his desktop, for example. But! We live in a reality called “We all love Internet Explorer”. I explain, icons with the size exceeding 16x16 px will simply ignore IE 6.0 and below. However, there is a possibility to pack several images into a single .ico file, both in size and content, use this feature.
4. Where to place the file with the site icon? For reliability, simply put it in the root directory of your site.
')
Rake.
1. As indicated above, IE lt 6.0 does not understand icons that exceed 16x16 pixels.
2. IE 6.0 and below will display the icon only after adding the page to your favorites and reloading. Well, MS likes to reboot everything and everyone ;-).
3. If IE 6.0 and below and after that does not display it, then try cleaning the browser cache.
4. If after that the icon does not appear where it is supposed to be, it is necessary to make sure that your server sends the icon to the browser and displays it, but does not send it as a file and prompts you to save it. This is verified by simply entering the address of your site and the name of the icon into the browser, for example yoursite.com/favicon.ico , provided, of course, that the icon is in the root directory. In the second case, your server is not configured to display .ico files. In order to correct this situation, you need to create a .htaccess file in the root of the site and add the following line to it AddType image / x-icon .ico.
Related Links:
1. How to add your own site icon in the address bar and in browser bookmarks? www.htmlbook.ru/faq/?a=28
2. Favicon - icon in the address bar. lines.net.ua/index.php?loc=articles&category=webdesign&art=3
3. Icon in the address bar. www.codenet.ru/webmast/favicon.php
4. favicon.ru - favicon.ico generator and editor. favicon.ru
Crosspost from webdev.lovata.com .
Favicon, what is it and what is it for? Favicon.ico is a file of a shortcut in Win32 OS which is an icon-link to the page of the site on which it is present. It can be seen in your browser's favorite links, address bar, and bookmarks in multi-window browsers. How to fasten it to the page? In order to draw an icon, you need to use any graphic editor, but after that you need to convert your resulting graphic file to .ico format or initially draw it in specialized editors such as AWIcons Pro, IconWorkshop, MicroAngelo, etc. Simply renaming a file extension in .ico is a bad idea, because Some browsers will not accept such a file and will not display an icon. If you are even more accustomed to working in Photoshop, then here you can download a plugin for working with images in the .ico format. For the plug-in to work, the file must be unpacked and saved in the Plug-Ins \ File Formats folder in the Photoshop root directory.
So, we have an icon converted in the correct way to the .ico format. Next, the points.
1. The name of the icon should be favicon.ico, because Some older browsers will not be able to identify it as a website shortcut.
2. Connecting the icon to the document by the following code. It is necessary to specify the type of content as image / x-icon and a link to the document as a shortcut icon. In addition to the fact that this is mandatory according to the w3c specification, there is a possibility that you will again stumble upon the features of some browsers without specifying the type of content.
3. You can choose the size of the icon from 16x16 to 48x48, the larger the icon will be the nicer, in the case when the user decides to place a shortcut on your website on his desktop, for example. But! We live in a reality called “We all love Internet Explorer”. I explain, icons with the size exceeding 16x16 px will simply ignore IE 6.0 and below. However, there is a possibility to pack several images into a single .ico file, both in size and content, use this feature.
4. Where to place the file with the site icon? For reliability, simply put it in the root directory of your site.
')
Rake.
1. As indicated above, IE lt 6.0 does not understand icons that exceed 16x16 pixels.
2. IE 6.0 and below will display the icon only after adding the page to your favorites and reloading. Well, MS likes to reboot everything and everyone ;-).
3. If IE 6.0 and below and after that does not display it, then try cleaning the browser cache.
4. If after that the icon does not appear where it is supposed to be, it is necessary to make sure that your server sends the icon to the browser and displays it, but does not send it as a file and prompts you to save it. This is verified by simply entering the address of your site and the name of the icon into the browser, for example yoursite.com/favicon.ico , provided, of course, that the icon is in the root directory. In the second case, your server is not configured to display .ico files. In order to correct this situation, you need to create a .htaccess file in the root of the site and add the following line to it AddType image / x-icon .ico.
Related Links:
1. How to add your own site icon in the address bar and in browser bookmarks? www.htmlbook.ru/faq/?a=28
2. Favicon - icon in the address bar. lines.net.ua/index.php?loc=articles&category=webdesign&art=3
3. Icon in the address bar. www.codenet.ru/webmast/favicon.php
4. favicon.ru - favicon.ico generator and editor. favicon.ru
Crosspost from webdev.lovata.com .
Source: https://habr.com/ru/post/10582/
All Articles