Занятие 18. Как создать фавиконку для сайта

Для начала немного теории. Давайте разберемся, что такое фавиконка и для чего она нужна.
Фавикон (favicon) - это производное от слов “favorite” (любимый) и “icon” (иконка) - небольшое изображение в формате ICO размером 16х16 пикселов.
Используется в основном для придания индивидуальности и узнаваемости сайтам. Увидеть фавиконку можно в адресной строке и на вкладках браузеров. Также фавикон может быть полезен для быстрого определения нужного сайта в закладках. К тому же некоторые поисковые системы (например Яндекс) и каталоги сайтов также используют фавиконы сайтов в результатах поиска (списках сайтов). Вот как выглядят фавиконки различных сайтов в страницах выдачи результатов поиска.


Эти маленькие картинки позволяют легко ориентироваться среди огромного количества сайтов, помогают визуально запоминать понравившиеся веб-ресурсы, делают сайты легко узнаваемыми.

Надеюсь, я привела достаточно доводов, чтобы убедить вас потратить немного времени на создание фавиконки для своего сайта.

Получить фавиконку для своего сайта можно несколькими способами: 1) найти готовую; 2) нарисовать самому; 3) создать при помощи специальных интернет-сервисов.
Способ 1. Найти готовую
Способ, сказать, так себе: времени все равно будет истрачено на поиски немало, а получится лишь клон какого-то известного сайта.
Способ 2. Нарисовать самому
Рисовать фавиконку можно в любом графическом редакторе. В интернете есть даже сайты, где в онлайн-редакторе предлагают вам самостоятельно сделать эскиз. Однако сохранить его как промежуточный результат нельзя. Поэтому, если вы заинтересованы в промежуточном сохранении результатов, то есть смысл создавать заготовку для фавиконки на собственном компе.
Итак, создаем новый документ размером 16х16рх. Картинка получается настолько крошечной, что работать с ней можно лишь при большом увеличении. Зато каждый пиксель выглядит как маленький квадратик, и создание фавиконки напоминает рисование на листочке в клеточку.
В качестве образца можно использовать какой-либо запоминающийся элемент дизайна или просто создать абстрактную картинку в основной цветовой гамме сайта. Для этой цели могут также пригодиться подходящие иконки или логотипы (в интернете их великое множество).
Готовый рисунок нужно сохранить в формате jpg. Однако заливать на сайт его в таком виде нельзя, так как поисковики настоятельно рекомендуют использовать специальный формат ico. Поэтому нужно найти в инете подходящий сервис (вполне подойдут и сайты, перечисленные в третьем способе) и конвертировать.

Способ 3. Использовать онлайн-генераторы фавиконок
С моей точки зрения самый удобный онлайн-генератор расположен на favicon.ru
 
Интерфейс русский, предельно простой и понятный. Процедура создания такова: загружаем выбранную картинку на сайт-генератор и нажимаем кнопку Создать favicon.ico.
Откроется новое окно, и вам предложат либо редактировать сгенерированную картинку либо скачать к себе на компьютер.
Еще один достаточно популярный сервис - favicon.cc. Интерфейс у него английский, но интуитивно понятный.
Перед вами сразу открывается окно графического редактора.
 
Итак, фавиконка у вас уже есть (она сохранена в какой-нибудь папке на компьютере). Теперь нужно правильно залить ее на сайт. Сделать это можно из Панели управления или прямо с сайта, зайдя на него как администратор.
В любом случае вам понадобится Файловый менеджер.
Если заходите с сайта: вверху кнопка Управление –> Файловый менеджер.
Если из Панели управления: вверху кнопка Инструменты –> Файловый менеджер.
Открываем окно файлового менеджера. Перед вами окажутся все папки и файлы, которые вы загрузили уже на сайт. Среди них есть строчка favicon.ico (стандартная иконка системы).

Через кнопку Обзор находим новый фавикон на своем компьютере. Нажимаем Загрузить файл. Теперь в файловом менеджере будет два файла с расширением ico.

При следующей загрузке сайта система сама уберет старую запись и будет подставлять в браузер новую фавиконку.
Примечание: кеш браузера обновляется примерно через полчаса, поэтому новая фавиконка может появиться не сразу.