Как установить фавикон

12 августа 2016 0 комментариев

Привет! Тема сегодняшней статьи — фавиконка (favicon.ico), способы ее установки и нюансы с которыми вы можете столкнуться.

Favicon — это специальный значок 16х16 пикселей, который отображается во вкладке вашего браузера и в поисковой выдаче слева от заголовка сайта или статьи.

Слово образовалось от словосочетания «favourites icon» — значок для избранного. Вообще, размер иконки должен быть кратным восьми, но в вашем браузере (да и в моем тоже) все равно будет отображаться 16 пикселов.

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

Вот так выглядит фавикон во вкладках:

А так — в поисковой выдаче:

И вот так — в закладках:

Для того, чтобы установить фавикон на свой сайт, вам потребуется нарисовать или сгенерировать изображение 16х16 пикселов. После этого, сохраните это файл как favicon.ico (формат ICO) и положите его в корневой каталог сайта (там же, где лежит index.html или index.php).

Пару слов по поводу формата иконки. Почему формат .ico? Потому что это базовый формат для favicon и он поддерживается всеми браузерами. Это не значит, что недопустимо использование других форматов — вы можете использовать BMP или GIF, JPEG или PNG. Но при этом ваш сервер должен отдавать в HTTP-заголовках верный тип данных для передачи или «Content-Type».

Также следует отметить, что Internet Explorer не поддерживает PNG, JPEG, и GIF. Что касается анимированных фавиконок .gif, то их поддерживают только Опера и Мозилла Фаерфокс.

Наглядная таблица из Википедии поможет вам разобраться в этом вопросе.

Как разместить фавиконку (favicon.ico)?

Я подготовил для вас код, который нужно использовать в зависимости от типа вашего файла:

Этот код (в зависимости от расширения вашего значка) нужно вставить в элемент <head> (замените blogwork.ru на свой сайт). Допускается также использовать «shortcut icon» вместо «icon». А еще вы можете не указывать полный путь, например так:

Именно так и размещена фавиконка на этом сайте, достаточно открыть исходный код страницы.

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

Изменение и удаление фавиконки

При правильном размещении иконки (указании верного пути), значок сайта появляется по мере обхода сайта роботом.

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

То же самое касается и удаления значка. Удалите файл и удалите упоминание о нем в <head>, примерно через три-четыре недели поисковая система удалит значок напротив вашего сайта. Иногда придется ждать до двух месяцев.

Фавикон не несет никакой полезной функции, за исключением повышения узнаваемости вашего сайта в графическом интерфейсе пользователя или браузера — так или иначе, это облегчает работу пользователя, а иногда даже повышает CTR.

Но! Считается, что сайт без favicon не такой хороший, каким мог бы быть и мешает продвижению сайта. Считается не мной, а поисковыми системами, которые делают анализ привлекательности сайта в поисковой выдаче, сравнивая его с конкурентами. Например: по запросу рядом расположены два сайта, у одного из них более кликабельный и красивый значок (допустим, сниппеты одинаково информативны). Куда пойдет пользователь? Очевидно, на сайт с фавиконом. Делаем вывод — обязательно устанавливаем фавикон на сайт. Фавикон в выдаче появится не разу, а через 1-2 апдейта поисковой системы.

Как установить фавикон (favicon) на WordPress?

Вордпресс ничем не отличается от обычного сайта, движок здесь не имеет значения. Для того, чтобы поставить фавиконку на Ворпдпресс вам следует руководствоваться обычной инструкцией:

1. Разместить значок в корне сайта
2. Прописать путь к значку в шапке сайта, отредактировав файл header.php

Видите, ничего сложного — все это можно сделать самостоятельно.

Как установить (favicon) на Drupal?

Особенность Друпала (как установить Drupal) в том что фавиконка устанавливается через панель администратора.

Зайдите в настройки активной темы в разделе «Оформление». В самом низу вы можете найти пункт «Настройка значка» и рядом с ним установленную галочку — «Использовать стандартный значок». Снимите галочку и загрузите на сайт свой значок, при помощи кнопки «Обзор».

Обновите страницу сайта в браузере — вот и ваша новая иконка сайта.

Как установить фавикон на Joomla?

В Джумле (как установить Joomla) favicon можно загрузить в корень сайта, либо в папку шаблона. Во втором случае нужно загрузить значок по адресу: blogwork.ru/public_html/templates/joomla_template/

Затем, отредактируйте файл index.php, добавив соответствующий код внутри тега <head></head>.

Бонус — инструменты для создания иконки для сайта

Существует как минимум четыре способа, как сделать иконку.

1. Adobe Photoshop CS с плагином File Formats — позволит нарисовать иконку самому и сохранить ее в формате .ico (некоторые версии фотошопа имеют с этим проблемы, поэтому нужен вышеупомянутый плагин). После того как нарисуете фавикон, сохраните файл в требуемом формате:

Плюс фотошопа в том, что вы можете сделать 3D-эффекты и градиент, поиграться со шрифтами и цветами логотипа/значка, попробовать нарисовать что-нибудь красивое. Но эта программа слишком громоздкая, поэтому можно воспользоваться другими, специально созданными для этого дела. Например — Icon Craft или Icon Magic.

2. Поищите значок для сайта в каталоге фавиконок. Один из таких каталогов — сайт favicon.cс

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

4. Можно заказать иконку! Да, вы верно поняли — все сделают за вас, вам только нужно знать, что конкретно вы хотите.

Красивых вам фавиконок, друзья. Приходите еще.