Содержание
- Зачем нужны фавиконы
- Выбор картинки
- Программы для генерации фавиконов
- Как сделать иконку для сайта
- Правила установки фавикона на сайт
- Вопрос-ответ
Фавиконами(или «значками для избранного») называют небольшие иконки сайта или страницы. Обычно фавикон для сайта содержит логотип, первую букву названия компании или же любое другое изображение, которое соответствует тематике бизнеса. В браузере значок видно при открытии вкладки, также он отображается в закладках возле URL сайта. Также фавикон появляется в виде ярлыка на смартфоне, если вынести сайт на рабочий стол.
Зачем нужны фавиконы
Часто можно увидеть вопросы новичков на форумах: помогает ли файл favicon.ico при продвижении сайта? На ранжирование и SEO-оптимизацию фавикон прямого влияния не оказывает, он не повышает место сайта в выдаче. Значок используется в имиджевых целях. При этом у него есть ряд плюсов, косвенно влияющих и на продвижение.
- Favicon выделяет сайт на странице поисковой выдачи. Иконка привлекает внимание пользователей. Без нее сниппет менее заметен, кажется неполноценным.
- Узнаваемость и запоминаемость. Фавикон является элементом бренда. Значки сайтов хорошо запоминаются. Пользователь автоматически свяжет иконку с определенным брендом, если будет видеть значок на разных площадках.
- Упрощает поиск нужного ресурса. При поиске сайта в истории посещений или закладках легче ориентироваться на картинку, чем на заголовок.
- Фавикон предотвращает ошибку в лог-файлах. При обращении к сайту браузер запрашивает файл favicon.ico. При отсутствии строки с указанным фавиконом в логах проставляется ошибка 404.
Выбор картинки
Выбирайте изображение для фавикона в зависимости от личных потребностей и предпочтений:
- Контрастные. Раньше любая картинка в фавиконе бросалась в глаза, поскольку немногие сайты вообще ее устанавливали, но сейчас все изменилось. Выделиться на общем фоне гораздо сложнее. Наш совет – экспериментируйте и делайте все, чтобы привлечь внимание! Можно даже поставить стрелку, направленную на сайт.
- Тематические. Для представительских ресурсов(интернет-магазина, корпоративного сайта) лучше всего использовать фавиконы, основанные на логотипе бренда. Нередко приходится обрабатывать лого, сжимать его, использовать фрагменты. Особенно это относится к вытянутым, сложным, детализированным изображениям. Если логотипа вообще нет, желательно подобрать картинку, соответствующую тематике ресурса.
- Упрощенные. Размеры иконок при просмотре выдачи или на вкладках совсем невелики. Поскольку детально рассмотреть такую картинку не получится, можно выбрать значок с минимумом деталей и оттенков. При этом главными критериями будут лаконичность, однозначность прочтения фавикона и соответствие тематике сайта.
- Оригинальные. Ресурс не заметят в выдаче, если вы позаимствуете фавикон у конкурентов. Банальные и популярные картинки лучше не брать. Найдите что-то оригинальное, нетривиальное. Некоторые даже используют анимированные изображения. Однако они не всегда корректно отображаются.
Если трудно выбрать иконку, можно поменять последовательно несколько разных картинок. Сначала посмотреть, как они будут выглядеть на экране смартфона или в браузере. В ходе проверки определиться, какая даст лучший эффект.
Программы для генерации фавиконов
Проще всего создать фавикон путем переименования файла в нужный формат. Например, берем файл favicon.png, переписываем расширение и получаем favicon.ico. Однако простое изменение формата не гарантирует качества. Полученный таким образом значок будет корректно отображаться не всеми браузерами. Поэтому лучше потратить немного времени и сгенерировать картинку в специальном сервисе.
Вот несколько наиболее популярных:
- Realfavicongenerator.net. Сервис генерирует иконки разных размеров в онлайн-режиме. Нужно подгрузить исходник разрешением 260×260 пикселей , желательно квадратный (это не строгое требование ). Затем выбрать настройки для популярных ОС: Windows Phone, iOS, Android, Safari. Указать степень сжатия. В результате получится набор фавиконок разных типов и код, который нужно вставить в адресную строку. Удобный бесплатный сервис, быстрый и интуитивно понятный.
- Favicon.ru. Сервис с большой коллекцией готовых к использованию решений. Есть разнообразные инструменты редактирования. Функционал позволяет нарисовать иконки вручную. Преобразовать файл в необходимый формат можно буквально одним кликом. Предлагаются и платные услуги профессиональных дизайнеров.
- Pr-cy.ru. Здесь много разделов, на сайте можно подбирать картинки, загружать свои, обрабатывать, указывать нужный формат и размер.
- Favicon.cc. Еще одна программа для создания фавиконов в формате ICO. Сервис подходит для самостоятельной отрисовки картинок в графическом редакторе и обработки загруженных изображений.
На сайтах есть описания, как сделать фавикон самостоятельно. Любители видеоинструкций легко найдут ролики на ютубе.
Как сделать иконку для сайта
Для отрисовки картинок применяются несколько распространенных схем. Можно использовать плагин для Photoshop или программы, разработанные специально для создания иконок.
Онлайн генераторы favicon
Один из самых простых способов создания иконок заключается в использовании специальных сервисов, совмещающих функции конструктора и генератора. Нужно только загрузить изображение, а дальше программа обработает его и выдаст готовый фавикон. Желательно перед генерацией картинки откадрировать изображение до квадратной формы.
Photoshop
Функциональный, профессиональный вариант с огромным набором инструментов. Единственное ограничение — умение использовать Фотошоп.
Бесплатные готовые фавиконы
Для поиска бесплатных иконок можно использовать Яндекс.Картинки или аналогичный сервис Гугла. Вбив запрос «готовый фавикон», вы получите возможность выбора из тысяч предложений. Это быстро, просто и удобно. Но — нежелательно. Ведь найденную таким образом картинку могли скачать и использовать под фавиконы десятки других пользователей интернета.
Поэтому лучше создать уникальный favicon для своего ресурса.
Правила установки фавикона на сайт
Чтобы быстро и без проблем установить фавикон, воспользуйтесь нашими рекомендациями. Обязательно нужно прописать корректное имя файла. Желательно использовать favicon.ico, хотя допустимы и другие виды расширений. Учтите, старые версии браузеров не смогут правильно определить фавикон, если он будет в неправильном формате. Перед загрузкой откройте параметры файла и проверьте наличие требуемого варианта в наименовании и типе файла.
Создавайте кроссплатформенные фавиконы. Корректно прописывайте форматы для всех браузеров и мобильных платформ, указывайте оптимальные размеры. Если загружено несколько разных форматов, современные браузеры сами подбирают подходящий формат для отображения. Если загружен только один фавикон, то его размеры будут меняться в зависимости от платформы. А значит, картинка может стать менее четкой. Поэтому лучше сразу создавать набор иконок под различные операционные системы. Здесь помогут сервисы типа realfavicongenerator.net.
Затем желательно разместить файл в корневой директории сайта и проверить на корректность. Для иконок формата ICO в строку браузера нужно ввести «yoursite.com/favicon.ico», для других измените тип расширения. Если браузер корректно отобразил фавикон, можно прописать адрес в код главной страницы. Это делать сегодня не обязательно — последние версии браузеров автоматически ищут иконки в корневом каталоге. С помощью тега head можно задавать фавиконы для разных страниц ресурса. Подключить иконку удобнее всего посредством тега link.
Примеры с тегами:
- Версия для ПК (с расширением ico) — <link rel="icon" type="image/ico" href="favicon.ico">
- Декстопная версия (с расширением png) — <link rel="icon" type="image/png" href="favicon.png">
- Apple — <link rel="apple-touch-icon" href="apple-touch-favicon.png">
- Safari — <link rel=”mask-icon” href=”icon.svg”>
- Android — <link rel="shortcut icon" href="favicon.png">
На мобильных устройствах Apple происходится автоматическое скругление иконок по углам. Чтобы избежать этого, нужно использовать при подключении фавикона вместо кода apple-touch-icon другой: apple-touch-icon-precomposed.
Инструкция для WordPress
Начиная с WordPress версии 4.3 фавиконки можно добавить из админки CMS.
Алгоритм действий следующий.
- Открываем админку.
- Выбираем «Внешний вид» > «Настройки» > «Свойства вашего сайта».
- Нажимаем значок сайта, задаем «Изменение изображения».
- Загружаем подготовленную иконку.
- Нажимаем «Опубликовать».
- Все, осталось только добавить фавикон через 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 файла. Порядок действий следующий.
- Готовим картинку формата jpg или png с расширением 16×16 пикселей.
- Переименовываем иконку в ico.
- Находим в корневой папке файл ico. Его нужно заменить на созданный файл.
Как только мы обновили файл favicon.ico, вместо старого фавикона должен отобразиться новый. Однако прежняя картинка может закешироваться браузером и тогда она продолжит отображаться. При наложении эффектов потребуется корректировка настроек. Проверять правильность работы необходимо с различных браузеров и устройств.
Вторая схема используется при нескольких шаблонах. Первый способ реализуется только в том случае, если в единственном шаблоне отсутствует собственный файл favicon.ico. Если же в шаблоне есть своя иконка, задача усложняется. Это связано с более высоким приоритетом картинки из шаблона в сравнении с файлом в корне сайта. Это сделано специально, чтобы обеспечить возможность использования каждого шаблона с отдельной иконкой. Например, у каждого раздела сайта — свой шаблон с фавиконом.
Для замены иконки необходимо наличие дополнительных прав доступа к административной панели шаблонов ресурса. Мы рассмотрим алгоритм для одного шаблона. Если их несколько, то для каждого нужно выполнять для замены фавикона описанные операции по отдельности. Порядок действий следующий:
- Готовим картинку формата jpg или png расширением 16×16 пикселей.
- Переименовываем файл в ico.
- Подгружаем файл в папку шаблона (контент->-структура площадки->-папки и файлы->-bitrix->-templates->-имя шаблона->-файл).
Используйте права для редактирования файлов php-формата. Откройте шаблон для редактирования (общие настройки->-настройки продуктов->-сайты->-шаблоны для сайтов->-имена шаблонов). Ищем в блоке <head> кода шаблона строку:
<link rel="icon" type="image/x-icon" href="<?=SITE_TEMPLATE_PATH?>/favicon.ico" />
- Если строка отсутствует, ее нужно добавить.
- Сохраняем шаблон.
Все, теперь можно проверить корректность отображения нового файла.
Обратите внимание! Старые файлы часто кешируются браузером. Из-за этого картинка может не отображаться. Для ускорения процесса отображения обновленной иконки нужно добавить внутри шаблона код v=2 (обязательно через вопросительный знак) к названию файла.
Готовая строка будет иметь примерно такой вид:
<link rel="icon" type="image/x-icon" href="<?=SITE_TEMPLATE_PATH?>/favicon.ico?v=2" />
Вопрос-ответ
Почему фавикон не отображается в выдаче?
Перед индексацией иконок в Яндексе пройдет минимум неделя. В выдаче Google фавиконки вообще отсутствуют.
Влияет ли фавикон на ранжирование в ПС?
Иконки не оказывают прямого влияния на оптимизацию сайта и отношение к нему поисковиков. Однако они могут повысить привлекательность ссылки в поисковой выдаче, а за счет этого — кликабельность сниппета.
Обязательно ли делать несколько размеров иконок?
Допустимо создать всего один универсальный размер фавикона. Однако на ряде устройств он может отображаться нечетко. Поэтому лучше сформировать набор иконок под различные операционные системы.
Можно ли посмотреть, как видят фавикон поисковики?
Да, воспользуйтесь для этого следующими ссылками:
- https://www.google.com/s2/favicons?domain=имя_домена для Google.
- https://favicon.yandex.net/favicon/имя_домена в Яндексе.
На этих страницах хорошо видно, как отображаются фавиконы и требуются ли какие-то исправления. Напомним, что индексация иконок занимает некоторое время.
