Инструкция
1
Такую иконку принято называть "Favicon" (Favorite Icon) и представляет она собой картинку размером 16 на 16 пиксел. Некоторые из современных браузеров могут отображать и иконки больших размеров, но если вам важна кроссбраузерность, то ориентироваться следует на этот минимальный стандарт.Создать такую картинку вы можете сами в любом графическом редакторе. Современные браузеры умеют читать иконки как в их родном формате ico, так и в стандартных графических форматах gif, png, bmp и т.д. Однако, если вы хотите охватить максимальное число модификаций браузеров, то стоит ориентироваться на формат ico. Есть возможность нарисовать нужное вам изображение в редакторе, сохранить в одном из стандартных форматов, а затем конвертировать в формат ico при помощи одного из онлайн сервисов. Некоторые из таких сервисов могут предложить и создание favicon полностью в онлайн-режиме.
2
Когда иконка создана, ее следует загрузить на сервер вашего сайта под именем favicon.ico. Некоторые из браузеров не требуют, чтобы иконка называлась именно так, но, опять же, имея в виду максимальную кроссбраузерность, стоит ориентироваться на самые жесткие требования. Саму процедуру загрузки проще всего провести через файл-менеджер, который есть в составе любой системы управления сайтом или панели администрирования вашего хостинг-провайдера. Поместить файл лучше всего в корневую папку сайта - именно там по умолчанию ищут ее браузеры и поисковые роботы, если в коде страницы нет явного указания адреса.
3
В завершение следует добавить указание на иконку в исходный html-код страниц сайта. Соответствующий тег для Internet Explorer выглядит так:<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico">Остальные браузеры понимают другое значение атрибута "rel":<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">Чтобы угодить всем, лучше указать оба варианта. Если вы поместили файл иконки не в корень сайта, а куда-то еще, то в атрибуте "href" следует указать полный путь к иконке.Эти две строки нужно разместить между тегами <head> и </head>. То есть вам надо открыть нужную страницу в редакторе страниц системы управления, переключить его в режим редактирования html-кода, найти строку, содержащую тег </head> и добавить перед ней две строки, приведенные выше. Затем сохраните сделанные в странице изменения.