Содержание
- Зачем используются фавиконы
- О выборе картинки
- Программы: как сделать favicon
- Как сделать иконку для сайта
- Правила установки иконки на сайт
- Вопрос-ответ
Favicon (или «значок для избранного») - иконка страницы или сайта. Обычно фавикон для сайта содержит логотип, первую букву названия компании или же любое другое изображение, которое соответствует тематике бизнеса. Значок отображается браузером в открытой вкладке, закладках около URL сайта. Также он появляется в виде ярлычка на смартфоне, если пользователь вынесет сайт на рабочий стол. Поговорим о фавиконах подробнее, расскажем, зачем они нужны.
Зачем используются фавиконы
Файл favicon.ico нужен для решения имиджевых задач. На форумах новички обычно спрашивают о том, дает ли favicon.ico какие-то профиты при продвижении. Ответ на вопрос - нет, на ранжирование, оптимизацию фавикон влияния не оказывает, но у него есть свои плюсы:
- Выделяет сайт в выдаче. Favicon всегда привлекает внимание, без него сниппет не так заметен на фоне других, кажется, что чего-то не хватает.
- Запоминаемость. Иконка - элемент бренда. Пользователь быстрее запомнит вавилоны и свяжет его с определенным брендом, если будет видеть значок на разных площадках.
- Упрощает поиск нужного сайта. В истории или закладках проще искать сайт не по заголовкам, а ориентируясь на картинку.
- Избавляет от ошибки в лог-файлах. Браузеры запрашивают файл favicon.ico, если они не находят строку с указанным фавиконом, сервер в логах ставит 404-ошибку.
О выборе картинки
Изображения подбирать можно разные. Все зависит от личных предпочтений и ваших задач:
- Контрастные. Если раньше любая иконка бросалась в глаза, поскольку мало какие сайты ее ставили, сейчас все иначе. Выделиться на фоне конкурентов непросто, приходится экспериментировать. Самый простой вариант привлечь внимание - установить контрастную яркую иконку. Это может быть даже указывающая на сайт стрелка.
- Тематические. Представительский ресурс (корпоративный сайт компании, онлайн-магазин) лучше всего дополнит логотип бренда. Если лого целиком не влезает, используйте фрагмент, этот совет пригодится для вытянутых, детализированных, сложных изображений. Когда логотипа нет, стоит подыскать картинку, которая будет по цвету ассоциироваться с тематикой сайта.
- Упрощенные. Favicon на вкладках и в выдаче очень маленький. Рассмотреть детально изображение не выйдет, так что можно подобрать картинку с минимумом деталей, состоящую из 2-3 оттенков. Главное в данном случае - лаконичность, соответствие тематике, однозначность прочтения.
- Оригинальные. Иконка не будет выделять ваш ресурс в выдаче, если у конкурентов такие же картинки. Так что банальные и популярные картинки лучше не брать.
Что лучше выбрать - смотрите сами. Можно использовать несколько вариантов, посмотреть, как они выглядят в браузере или на рабочем столе смартфона. Ваша задача - выделиться и привлечь внимание. Если увидите, что одна из иконок справляется с ней лучше всего смело ставьте такой фавикон.
Программы: как сделать favicon
На первый взгляд, самым простым способом создания фавикона кажется простое переименование файла в нужный формат. Рассмотрим на примере. У вас есть файл favicon.png, а нужен favicon.ico. Достаточно переписать расширение, и все будет готово. Вот только это не лучший вариант. Простое переименование приводит к тому, что во многих браузерах значок отображается с ошибкой или не отображается вообще. Потратьте время и сделайте иконку в специальном сервисе. Популярные:
- Realfavicongenerator.net - генерирует фавиконки разных размеров онлайн. Подгружайте исходник 260*260 пикселей, лучше всего квадратной формы, но это не строгое ограничение. После выбирайте настройки для всех популярных операционных систем - Сафари, Windows Phone, Андроид, iOS. Запрограммируйте степень сжатия - варианты возможны разные. В итоге получится набор из иконок разных типов, код для вставки в адресную строку.
- Favicon.ru - тут удобнее всего рисовать иконки вручную, есть большой выбор готовых решений (используйте, как есть, либо редактируйте). В один клик можно преобразовать файл в заданный формат. Платно доступны профессиональные дизайнерские услуги.
- Pr-cy.ru - в сервисе много разделов, выбирайте фавиконы и обрабатывайте картинки под иконки сайтов. Указывайте формат, размер, сохраняйте результат.
- Favicon.cc - программка для создания favicon в формате ICO. Загружайте готовое изображение или делайте отрисовку самостоятельно с применением стандартного набора инструментов в графическом редакторе.
На каждом сайте есть мануал о том, как сделать значок самостоятельно. Если текстовые инструкции вам не нравятся, поищите видеоруководства на ютубе.
Как сделать иконку для сайта
Существует несколько распространенных схем отрисовки. Воспользуйтесь специальным плагином для Photoshop или программками для изготовления фавиконов, заточенными под отрисовку иконок для сайтов любых тематик.
Онлайн генераторы favicon
Наиболее доступный и простой способ - подгрузить картинку в специальный конструктор. Автоматический генератор сам сделает иконку из предложенного вами изображения с учетом требований к фавиконам. Готовый результат будет намного более красивым, если кадрировать донор до квадрата.
Photoshop
Функциональный, профессиональный вариант. Ограничение одно - Фотошопом нужно уметь пользоваться. Инструменты используйте любые, можно делать корректировки до достижения оптимального результата.
Бесплатные готовые favicon
Загружайте Яндекс.Картинки либо используйте другой ресурс поиска изображений, который вам нравится. В строке поиска указывайте запрос «готовый фавикон». После жмите «Искать», выбирайте любой вариант из тысяч предложенных. Простой, бесплатный, работающий метод от идеала далек. Рекомендуем его как временный - другой вебмастер может скачать аналогичную картинку (или это уже сделано, и не один раз).
Лучше потратить немного времени и создать уникальную favicon.
Правила установки иконки на сайт
Установить фавикон на сайт самостоятельно не трудно, в этом вам поможет наше руководство. Пропишите корректное имя - обычно это favicon.ico, но другие типы расширений тоже допустимы. Помните, что старые версии браузеров не могут корректно определить иконку, если она будет в другом формате. До загрузки откройте откройте свойства файла и убедитесь, что требуемый вам вариант есть и в названии файла, и в его типе.
Делайте кроссплатформенные иконки. Корректно пропишите форматы для различных мобильных платформ, браузеров, укажите оптимальные размеры. Современные браузеры, роботы при отображении картинок сами подбирают оптимальный формат из всех загруженных. Отображаться он будет лучше, чем в случае с ресайзом, когда фавикон загружен только один, его нужно менять под заданные параметры. Рекомендуем сервис realfavicongenerator.net.
После можно будет положить файл в корневую директорию сайта, протестировать его корректность. Введите в строку браузера «yoursite.com/favicon.ico» для файлов ico формата, для других укажите соответствующее расширение. Браузер должен корректно отобразить иконку. Затем прописывайте адрес в коде главной страницы тега. Это требование желательное, но не обязательное - браузеры последних версий автоматом ищут фавиконы в корневом каталоге. Тег head позволяет задавать собственные иконки с разных страниц сайта.
Примеры с тегами:
- Декстопная версия (расширение ico) - <link rel="icon" type="image/ico" href="favicon.ico">
- Декстопная версия (png расширение) - <link rel="icon" type="image/png" href="favicon.png">
- Эпл - <link rel="apple-touch-icon" href="apple-touch-favicon.png">
- Сафари - <link rel=”mask-icon” href=”icon.svg”>
- Андроид - <link rel="shortcut icon" href="favicon.png">
В гаджетах бренда Apple иконки автоматом скругляются по углам, избежать этого поможет код apple-touch-icon-precomposed - вводите его вместо apple-touch-icon.
Инструкция для wordpress
От WordPress 4.3 версии фавиконы можно добавлять из админки системы управления. Порядок действий:
- Откройте админку.
- Выберите пункт «Внешний вид» > «Настройки» > «Свойства вашего сайта».
- Кликните по значку сайта, после задайте «Изменение изображения».
- Загрузите подготовленный фавикон.
- Нажмите «Опубликовать».
- Через html подгрузите фавикон.
Рекомендуем сначала выполнить тест на локальном сайте разработки, если все будет в порядке, повторите действия по инструкции в основном меню.
Инструкция для теста на локальном сайте:
- Откройте файлы темы, там найдите FTP-клиент либо менеджер файлов.
- Найдите папку под названием /wp-content/themes/your-theme и кликните по ней.
- Загрузите иконку в любую подпапку (Assets либо другую).
- Запомните путь к указанному файлу.
- В function.php пропишите путь к фавикону.
Путь будет выглядеть примерно так:
function add_favicon() {echo ‘';} add_action(‘wp_head', ‘add_favicon'),
после href=«‘.get_template_directory_uri() в строке должен быть прописан путь к выбранному значку.
Проверьте все еще раз, имя файла должно быть указано корректно. Если вы выбрали .ico формат, путь будет выглядеть так:
function add_favicon() {
echo ‘';
}
add_action(‘wp_head', ‘add_favicon');
Инструкция для Bitrix
Для Битрикс доступно несколько схем размещения. Первая - для одного шаблона. Если на сайте используется один шаблон, где нет собственного favicon.ico файла:
- Подготовьте картинку, расширение которой составляет 16*16 пикселей, форма подойдет jpg либо png.
- Переименуйте иконку в ico.
- В корневой папке файловой структуры сайта (1) найдите ico (2) и замените его на свой файл.
После новый favicon.ico сразу начнет отображаться вместо старого. Старый может быть закеширован браузером, тогда он будет отображаться и дальше. Если эффекты наложились, нужно откорректировать настройки. Откройте сайт с разных браузеров и компьютеров, чтобы убедиться в корректности работы и загрузки иконок. Предварительное тестирование позволит своевременно обнаружить ошибки.
Следующая схема - несколько шаблонов. Первый способ реализуется только в том случае, если в единственном шаблоне отсутствует собственный файл favicon.ico. При наличии в шаблоне своей иконки ситуация усложняется. Приоритет иконки из шаблона намного выше, чем приоритет favicon.ico файла в корне сайта. Сделано это для того, чтобы каждый шаблон можно было использовать с собственной иконкой. Пример - когда сайт поделен на разделы, у каждого раздела могут быть свои иконка и шаблон.
Нужны дополнительные права для доступа к редакторской панели шаблонов сайта - их дает администратор. Действия рассмотрены для одного шаблона, при необходимости изменить иконку для каждого, нужно выполнить ряд операций для каждого шаблона в отдельности. Инструкция:
- Подготовьте картинку, она должна иметь размеры 16*16 пикселей, допустимые форматы - jpg, png (на ваше усмотрение).
- Переименуйте текущий файл в ico.
- Подгрузите файл в папку шаблона (схема выглядит так: контент---структура площадки---папки и файлы---bitrix---templates---имя шаблона---файл (2)).
Используйте права для редактирования файлов php-формата. Откройте для редактирования шаблон (общие настройки---настройки продуктов---сайты---шаблоны для сайтов---имена шаблонов). Посмотрите есть ли в коде шаблона в блоке <head> строка
<link rel="icon" type="image/x-icon" href="<?=SITE_TEMPLATE_PATH?>/favicon.ico" />
- Если строка есть, то пропустите следующий шаг. Если строки нет, то добавьте ее.
- Сохраните шаблон.
Готово - проверяйте, новый favicon.ico файл должен отражаться вместо старого.
Важный момент. Старые файлы favicon.ico часто закешированы браузером, поэтому могут пропадать, не отображаться, усложнять отображение новых, только что загруженных. Иногда бывает, что даже после замены иконки показывается старая картинка. Если не хотите ждать, пока информация обновится, добавьте к названию файла внутри шаблона через вопросительный знак (это обязательно) код v=2. Примерный вид готовой строки:
<link rel="icon" type="image/x-icon" href="<?=SITE_TEMPLATE_PATH?>/favicon.ico?v=2" />
Вопрос-ответ
Почему фавикон не отображается в выдаче?
Индексация иконок в Яндексе требует не менее недели, иногда месяц. В выдаче Google фавиконок вообще нет.
Влияет ли картинка на ранжирование в поисковых системах?
Иконки никак не влияют на SEO и отношение поисковиков к сайту, но могут оказывать косвенное влияние на кликабельность сниппета и трафик. Это происходит за счет того, что ссылка в выдаче становится чуть привлекательнее. То есть вы как владелец ресурса выигрываете.
Делать несколько размеров обязательно или нет?
Можно установить один универсальный размер, но на некоторых устройствах он может выглядеть нечетко, расплывчато. Так что лучше потратить время и сделать набор иконок разных размеров, это даст гарантию корректного отображения.
Можно ли посмотреть, как видит фавикон ПС?
Да, используйте URL:
- https://www.google.com/s2/favicons?domain=имя_домена для Гугл;
- https://favicon.yandex.net/favicon/имя_домена в Яндексе.
Вы увидите, как отображается фавикон, нужно ли что-то исправить. Напоминаем, что для индексации иконок требуется время.
