Как сделать favicon

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

Как сделать favicon в специальном сервисе

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

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

что такое favicon

что такое favicon

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

для чего нужен favicon

для чего нужен favicon

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

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

исходник фавикон

исходник фавикон

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

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

сделать favicon онлайн

сделать favicon онлайн

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

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

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

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

<link rel=»icon» href=»дирректория/favicon.ico» type=»image/x-icon»>

<link rel=»shortcut icon» href=»дирректория/favicon.ico» type=»image/x-icon»>

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

Как самому сделать фавикон

Здест тоже ничего сложного. Ставим прграмму Xara 3D, пишем одну букву, удаляем тени, настраиваем цвета и подбираем красивый шрифт. Далее делаем экспорт с расширением ico и размером 32х32 или 16х16 пикселей. Вес такого favicon будет не более 900 байт.

теперь вы знаете как сделать favicon, будут вопросы -пишите