An icon for a site, or, as it is more often called, an icon is what you can see in the corner next to the name of the tab in the browser. Also, the icon is displayed opposite the name of the site in the list of "Favorites", you can also see it when the search engine shows your site in the search results.
It is necessary
- - site logo,
- - Photoshop,
- - favicon converter.
Instructions
Step 1
Open your website logo in Adobe Photoshop. If there is no logo, you can take any other picture, it is only important that it is associated with your site. Process the image by removing all unnecessary details, and now reduce its size to 32 or 16 pixels on each side. Then save the image as a.png
Step 2
Best of all, if you end up creating a file with a resolution of 32x32 pixels, as users sometimes save the shortcuts of the sites they like on the "Desktop", and there 16x16 pixels pictures look insufficiently detailed. However, keep in mind that in the browser your icon will still be scaled to 16x16 pixels, these are the images that are displayed in the Favorites and in the title.
Step 3
Now you need to convert the picture to an ico file. This can be done using a plug-in for Photoshop or using a free Internet service, for example, https://favicon.ru/. There are a lot of plugins and services, they work almost the same way, so there is no point in recommending a specific one. These sites are called favicon generators.
Step 4
Rename the resulting file to be favicon.ico.
Step 5
Now go to your site's control panel and find the root directory where the first page is located. This is usually index.html or another file that the content management system generates. There may already be an icon named favicon.ico. In this case, delete the old icon and replace it with your own.
Step 6
If the root directory is not available to you, as well as in those cases if you wrote the code for the site yourself, then you need to edit all the pages of the site on which the icon should appear. Open the page in an editor and add an entry in the head section
Step 7
If the icon is located not in the root directory, but somewhere else, then in the href parameter write the full path of the file.
