Для начала определимся что такое favicon. Фактически это иконка для адресной строки браузера, картинка обязательно с расширением ICO. А практически favicon — это средство выделения вашего сайта из общей массы, для того, что бы посетитель визуально запомнил ваш ресурс.
Сделать favicon можно графическими редакторами, но заморачиваться с ними по моему стоит только лишь для выделения в фавикон своего бренда, в остальных случаях для экономии времени лучше воспользоваться специальными сервисами коих в рунете масса.
Пример: заходим на яндекс вордстат и в заголовке и в адресной строке браузера видим оригинальную иконку.
что такое favicon
Пример 2: Заходим в закладки и что нам бросается в глаза в первую очередь? Правильно, сайты имеющие favicon. Рука автоматом тянется именно к этим выделенным ссылкам
для чего нужен favicon
Если вы умеете лихо управляться с графическими редакторами, то для вас сделать favicon не составит труда. Главное, что бы вес иконки был не более 1 килобайта и имел расширение ico.
Лучше нарисовать свой фавикон в любом пайнте, но ежели вы не спец по графике, то вам еще проще. Ну не умеем мы рисовать оригинальные вещи, ну и .. с ним. Я как то писал инструкцию на тему как сделать скриншот, так вот увидели вы например какой-нить интересный ярлычек или маленькую картиночку. Делаем снимок экрана, октрываем в Micrisoft Office Picture Manager (входит в состав пакета майкрософт офис), увеличиваем картинку, обрезаем ее по самые краешки и сохраняем. Вес картинки должен быть не более 300 кб
исходник фавикон
Теперь двигаем на сервис создания favicon. favicon.ru
В окне обзора находим вашу картинку и ниже жмем Создать favicon.ico
сделать favicon онлайн
Теперь скачиваем готовую иконку весом 543 байта
Теперь необходимо загрузить favicon в корень сайта. Сервис рекомендует прописать на каждую страницу метатеги для того, что бы иконка отображалась на сайте.
Вы не поверите, но на самом деле нифига прописывать не надо, никаких метатегов. На этом сайте (можете заглянуть в код и убедиться) никаких метатегов для иконок нет. Все это уже в прошлом. Все современные браузеры автоматически делают запрос к favicon.ico в корне сайта при посещении какой-либо страницы. Например https://www.instructing.ru/favicon.ico — корень моего сайта
Ну ладно, если вам действительно уж так необходимо хранить favicon не в корне сайта, а в другой директории, тогда придется писать мета-теги и обязательно прописать правильный путь к иконке.
Все теги прописываются в голову страницы, в секцию …
теперь вы знаете как сделать favicon, будут вопросы -пишите