How To Put Icons On The Site

Table of contents:

How To Put Icons On The Site
How To Put Icons On The Site

Video: How To Put Icons On The Site

Video: How To Put Icons On The Site
Video: How To Add Icons on HTML Website | Add Font Awesome Icons on website 2024, November
Anonim

The icon that is displayed in the address bar of the browser, as well as in the list of favorite sites, and even in the search list of sites in Yandex, is a very useful addition to other ways to draw attention to your site. How to implement this possibility is described below.

FavIcon
FavIcon

Instructions

Step 1

This icon is usually called "Favicon" (Favorite Icon) and it is a 16 by 16 pixel picture. Some modern browsers can also display large icons, but if cross-browser compatibility is important to you, then you should be guided by this minimum standard. You can create such a picture yourself in any graphics editor. Modern browsers can read icons both in their native ico format and in standard graphic formats gif, png, bmp, etc. However, if you want to cover the maximum number of browser modifications, then you should focus on the ico format. It is possible to draw the image you need in the editor, save it in one of the standard formats, and then convert it to ico format using one of the online services. Some of these services can offer and create a favicon entirely online.

Step 2

When the icon is created, it should be uploaded to your website server under the name favicon.ico. Some of the browsers do not require the icon to be named that way, but, again, keeping in mind the maximum cross-browser compatibility, you should focus on the most stringent requirements. The download procedure itself is easiest to carry out through the file manager, which is part of any content management system or administration panel of your hosting provider. It is best to place the file in the root folder of the site - this is where browsers and search robots look for it by default, if there is no explicit address in the page code.

Step 3

Finally, you should add an indication of the icon to the source html-code of the site pages. The corresponding tag for Internet Explorer looks like this: Other browsers understand the different meaning of the "rel" attribute: To please everyone, it is better to specify both. If you placed the icon file not in the site root, but somewhere else, then in the "href" attribute you should specify the full path to the icon. These two lines should be placed between the and tags. That is, you need to open the required page in the page editor of the control system, switch it to the html-code editing mode, find the line containing the tag and add the two lines given above before it. Then save your changes to the page.

Recommended: