Как сделать favicon

Что такое favicon

Для начала определимся что такое favicon. Фактически это иконка для адресной строки браузера, картинка обязательно с расширением ICO. А практически favicon - это средство выделения вашего сайта из общей массы, для того, что бы посетитель визуально запомнил ваш ресурс.

Пример: заходим на яндекс вордстат и в заголовке и в адресной строке браузера видим оригинальную иконку.

Пример 2: Заходим в закладки и что нам бросается в глаза в первую очередь? Правильно, сайты имеющие favicon. Рука автоматом тянется именно к этим выделенным ссылкам

Как сделать Favicon

Если вы умеете лихо управляться с графическими редакторами, то для вас сделать favicon не составит труда. Главное, что бы вес иконки был не более 1 килобайта и имел расширение ico.

Лучше нарисовать свою иконку в любом пайнте, но ежели вы не спец по графике, то вам еще проще :) Ну не умеем мы рисовать оригинальные вещи, ну и .. с ним. Я как то писал инструкцию на тему как сделать скриншот, так вот увидели вы например какой-нить интересный ярлычек или маленькую картиночку. Делаем снимок экрана, октрываем в Micrisoft Office Picture Manager (входит в состав пакета майкрософт офис), увеличиваем картинку, обрезаем ее по самые краешки и сохраняем. Вес картинки должен быть не более 300 кб

Теперь двигаем на сервис создания favicon. favicon.ru

В окне обзора находим вашу картинку и ниже жмем Создать favicon.ico

Теперь скачиваем готовую иконку весом 543 байта

Теперь необходимо загрузить favicon в корень сайта. Сервис рекомендует прописать на каждую страницу метатеги для того, что бы иконка отображалась на сайте.

Вы не поверите, но на самом деле нифига прописывать не надо, никаких метатегов. На этом сайте (можете заглянуть в код и убедиться) никаких метатегов для иконок нет. Все это уже в прошлом. Все современные браузеры автоматически делают запрос к favicon.ico в корне сайта при посещении какой-либо страницы. Например http://www.instructing.ru/favicon.ico - корень моего сайта

Ну ладно, если вам действительно уж так необходимо хранить favicon не в корне сайта, а в другой дирректории, тогда придется писать мета-теги и обязательно прописать правильный путь к иконке.

Все теги прописываются в голову страницы, в секцию <head>...</head>