Вам понадобится
  • - логотип сайта,
  • - Photoshop,
  • - favicon-конвертер.
Инструкция
1
Откройте логотип вашего сайта в программе Adobe Photoshop. Если логотипа нет, можно взять любую другую картинку, важно лишь, чтобы она ассоциировалась с вашим сайтом. Обработайте изображение, убрав все лишние детали, а теперь уменьшите его размер до 32 или 16 пикселей по каждой стороне. Затем сохраните изображение как графический файл в формате png или gif.
2
Лучше всего, если вы создадите в итоге файл с разрешением 32х32 пикселя, так как пользователи иногда сохраняют ярлыки понравившихся сайтов на «Рабочем столе», а там картинки 16х16 пикселей выглядят недостаточно детализированными. Тем не менее, имейте ввиду, что в браузере ваша иконка все равно будет приведена к размеру 16х16 пикселей, именно такие картинки отображаются в «Избранном» и в заголовке.
3
Теперь нужно преобразовать картинку в ico-файл. Сделать это можно с помощью какого-либо плагина для Photoshop или, воспользовавшись бесплатным интернет-сервисом, например, http://favicon.ru/. И плагинов, и сервисов существует огромное множество, работают они практически одинаково, так что советовать какой-то конкретный нет смысла. Такие сайты называются favicon-генераторами.
4
Полученный в результате файл переименуйте, чтобы его имя было favicon.ico.
5
Теперь зайдите в панель управления вашим сайтом и найдите корневую директорию, где лежит первая страница. Обычно это index.html или другой файл, который генерирует система управления контентом. Там уже может лежать иконка с именем favicon.ico. В этом случае удалите старую иконку и поместите вместо нее свою.
6
Если корневая директория вам недоступна, а также в тех случаях, если код для сайта вы писали сами, то нужно отредактировать все страницы сайта, на которых должна появиться иконка. Откройте страницу в редакторе и в разделе head добавьте запись <link rel="shortcut icon" href="/favicon.ico" >
7
Если иконка располагается не в корневой директории, а где-либо еще, то в параметр href пропишите полный путь файла.