Создание фавикона

Пользователи запоминают картинки гораздо лучше, чем текст. Если человек видит в поисковой выдаче знакомый фавикон, он кликает именно на него. Хотя маленькая иконка рядом со сниппетом не влияет на оптимизацию сайта, она добавляет ему индивидуальности, формирует доверие к ресурсу и играет роль в увеличении узнаваемости бренда.  Кроме того, фавикон помогает ориентироваться среди множества открытых вкладок, и находить нужные сайты без необходимости перебирать все страницы.

Поэтому в поисковой выдаче почти не встречаются сниппеты без фавикона. Тем более, что создать его не так трудно. Разберемся, как сделать иконку и установить ее на сайт для десктопных браузеров, устройств на Android и IOS.

Что такое  иконка сайта или фавикон

Фавикон или иконка сайта – это маленький логотип сайта в интернете. Он появляется на вкладках, рядом с названием сайта в поисковой выдаче, в истории браузера и закладках. Это помогает сайту быть более узнаваемым, а пользователям – легко находить его визуально.

Обычно фавикон содержит полный или упрощенный логотип сайта или первую букву бренда. Иногда используют изображение, подходящее тематике ресурса, без привязки к конкретной компании. 

Если используется логотип бренда или сайта, он должен быть адаптирован к формату фавикона. Так как это очень маленькое изображение, все его детали должны быть четкими, а сама картинка должна быть контрастной, чтобы выделяться на фоне светлой и темной темы браузера.

Зачем нужен фавикон

Google не позволяет использовать иконки рядом со сниппетами, а вот в поисковой выдаче Яндекса сайты без фавикона уже почти не встречаются. Иконка выделяет ресурс среди конкурентов, показывает тематику ресурса – это еще один способ уникализации сайта в выдаче. Кроме этого, у иконок есть ряд других преимуществ.

Привлечение внимания пользователей. Качественный фавикон привлекает внимание пользователей к сниппету в поисковой выдаче. 

Увеличение запоминаемости сайта. Фавикон – это такая же часть айдентики, как и логотип, визитка и другие элементы. Она работает на узнаваемость и запоминаемость. 

Упрощение поиска. Благодаря иконке проще найти нужный сайт среди множества вкладок или в истории браузера. Пользователю не придется читать названия всех вкладок, он просто пробежится глазами по иконкам и найдет нужную. 

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

Увеличение кликабельности. Изображение привлекает внимание, увеличивает запоминаемость сайта и упрощает поиск. Все это приводит к повышению кликабельности сниппета. 

Фавикон – это маленький элемент, который играет большую роль в восприятии сниппета и создании положительного впечатления о сайте. Создание иконки в современных интернет-реалиях необходимо. 

Картинка для фавикона

Картинка для иконки может совпадать с логотипом компании. Но если логотип не подходит, нужно выбрать другой вариант. Чтобы картинка хорошо смотрелась, она должна отвечать следующим требованиям:

Подходящая тематика. Картинка должна соответствовать теме ресурса, и иметь сходную с ним цветовую гамму. Пробегая глазами по вкладкам или сниппетам, пользователь скорее обратит внимание на соответствующие его запросу иконки. 

Оригинальность. Изображение должно соответствовать тематике сайта, но в то же время выделяться среди конкурентов. Для этого можно использовать оригинальные картинки или выделяющиеся цвета. Важно сохранять баланс между оригинальностью и тематической направленностью. 

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

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

• Что изображено на иконке? Пользователи должны понимать, что изображено на картинке, она должна легко распознаваться. 

• Выделяется ли иконка среди конкурентов? Посмотрите на иконки конкурентов – ваша должна отличаться от них.

• Какие ассоциации вызывает иконка? Если иконка не вызывает ассоциаций с тематикой сайта, вашим брендом или продуктом, то ее лучше заменить. 

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

Характеристики иконок

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

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

• .ico (.icns в macOS) – популярный масштабируемый формат специально для хранения фавикона, поддерживается всеми браузерами;  

• .svg – формат масштабируемых векторных изображений без конкретного размера, наиболее оптимален для фавикона, но не поддерживается старыми версиями браузеров;  

• .png – растровый формат хранения графической информации.

Размер. Разные браузеры требуют разного размера в зависимости от места иконки: сниппета, вкладки, адресной строки и т.д. Например, Яндекс предлагает использовать изображение размером 120×120, 32×32 или 16×16 пикселей. Размер 120×120 пикселей позволяет сделать фавикон более четким и заметным. Google просит не добавлять значки размером 16x16 пикселей – картинка должна быть квадратной и иметь размер, кратный 48 пикселям: 48x48, 96x96, 144x144 пикселей и т.д.

Как сделать иконку для сайта HTML

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

Визуальная составляющая

Нарисовать фавикон можно в графическом редакторе или в специальной программе. Если у вас есть навыки работы в графическом редакторе, вы можете воспользоваться, например, программами Sketch, Adobe Illustrator или Photoshop. Не обязательно рисовать иконку самостоятельно с нуля – вы можете взять на стоковом сайте готовый логотип, и доработать его под себя. 

Если навыков рисования нет, воспользуйтесь стоковыми иконками и онлайн-сервисами для создания фавикона.

favicon.cc позволяет нарисовать простое изображение во встроенном онлайн-редакторе. Инструменты ограничены: кисть, ластик и выбор цвета. Готовую картинку можно скачать только в формате .ico.

xiconeditor.com позволяет нарисовать иконку размером 16x16, 24x24, 32x32, 64x64 пикселей. Есть кисть, карандаш, ластик, заливка и выбор цвета. Процесс можно отслеживать в окне предпросмотра. 

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

logomaker.com предлагает выбрать сферу деятельности, вписать название компании и слоган. Ресурс сгенерирует возможные иконки и предложит приобрести понравившиеся.

ru.onlinelogomaker.com содержит большой набор иконок на разные тематики. В редакторе их можно доработать, объединить, покрутить, изменить цвет, дополнить другими формами. 

favicon.by/collection содержит колекцию бесплатных логотипов в формате .ico, которые можно скачать одним нажатием.

streamlinehq.com хранит иконки на любую тематику. Они удобно разбиты на категории для легкого поиска.

Подготовка фавикона

Перед добавлением картинки на сайт, его стоит сжать для уменьшения веса. Это можно сделать с помощью сервисов для сжатия картинок, например, iloveimg.com/ru. Онлайн-сервис уменьшает вес изображений без потери качества.

Как подключить фавикон к сайту

Когда иконка готова, ее нужно подключить к сайту. После этого она начнет отображаться в сниппетах и вкладках сайта. 

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

В корне проекта нужно разместить только favicon.ico, дополнительные иконки можно разместить в любом месте проекта.

Чтобы добавить иконку в формате .svg, нужно уточнить формат:

Чтобы разным разделам сайта назначать разные фавиконы, скопируйте путь к изображению https://sitename.ru/favicon.ico. При использовании одного фавикона путь к нему указывать не нужно. Скопированную ссылку на файл нужно добавить в HTML-код главной:

Атрибут "rel" указывает на тип ресурса. Большинство браузеров распознают "icon", для Internet Explorer нужен "shortcut icon":

От формата файла зависит тип передаваемых данных. Для .ico это "image/x-icon" или "image/vnd.microsoft.icon", для .png — "image/png" и аналогично для других форматов.

Для мобильных устройств часто прописывают отдельные фавиконы, указывая, к примеру, rel="apple-touch-icon". 

После установки кода нужно подождать, пока роботы поисковых браузеров проиндексируют иконку – это может занять время.

Как установить разные фавиконы для отдельных страниц

Чтобы установить разные фавиконы на разных разделах, иконку для главной страницы (и для тех страниц, на которых эта иконка будет использоваться) назовите favicon.ico, а для остальных разделов – названия по этим разделам.

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

Фавикон на Android

Указать фавикон и его расположение для Android можно через спецификацию Web App Manifest. В ней описан простой JSON-файл, в котором указаны иконки, цветовая палитра, ориентация экрана, способ запуска сайта и т.д. 

Манифест указывают с помощью:

С помощью манифеста пользователь получит качественный фавикон, который можно вынести на главный экран смартфона. 

Указать его цвет и фон можно с помощью метаданных в HTML:

Фавикон для Apple

Для фавикона на iOS можно использовать иконку размером 57x57 или 180x180 пикселей в формате .png. В документации Safari такие иконки называются Web Clips. Предполагается, что они должны быть непрозрачными, а углы будут автоматически скругляться при добавлении ярлыка на главный экран. 

Чтобы сделать такой фавикон, нужно указать в rel “apple-touch-icon.png”. 

Apple также поддерживает для закрепленных вкладок в Safari и кнопок на Touch Bar в MacBook иконки с монохромной векторной маской и цветом, который ее заполнит при наведении. Такой фавикон можно настроить с помощью link rel="mask-icon":

Как установить фавикон на платформе WordPress

В версиях WordPress от 4.3 и выше фавиконы добавляются из административной панели.

1. Откройте админку.

2. Нажмите на «Внешний вид» > «Настроить» > «Свойства вашего сайта».

3. Нажмите на «Выберите иконку сайта», загрузите подготовленное изображение и подтвердите свой выбор.

4. Нажмите «Опубликовать».

Лучше всего сначала протестировать изменения на локальном сайте разработки. Если ошибки не обнаружатся – повторите аналогичную схему в основном меню.

Как установить фавикон в 1С-Битрикс

Порядок размещения фавикона в Битриксе изменяется в зависимости от количества шаблонов. Если на сайте используется один шаблон, а собственный фавикон отсутствует, то установить его несложно:

1. Подготовьте иконку и переименуйте ее в ico.

2. Откройте админку. 

3. Перейдите в раздел «Контент» > «Структура сайта» > «Файлы и папки».

4. Найдите в разделе «Файлы и папки» файл favicon.ico и замените его на свой файл.

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

Если в файлах корневой папки несколько шаблонов, приоритет иконки из шаблонов выше, чем у файла favicon.ico в корне сайта. Для доступа к редакторской панели шаблонов сайта нужны дополнительные права доступа, их дает администратор. Тогда порядок действий следующий:

1. Переименуйте ваш файл в ico.

2. Подгрузите файл в папку шаблона: «Контент» > «Структура сайта» > «Файлы и папки» > «bitrix» > «templates» > «имя шаблона» > «файл». 

3. Посмотрите есть ли в коде шаблона в блоке <head> строка <link rel="icon" type="image/x-icon" href="<?=SITE_TEMPLATE_PATH?>/favicon.ico" /> 

4. Если такой строки нет, добавьте ее.

5. Сохраните шаблон.

Теперь новый фавикон должен появиться вместо старого. Если он не появился, возможно, вы что-то сделали не так, или предыдущий фавикон закэширован браузером. Можно подождать обновления информации или добавить к названию файла внутри шаблона через вопросительный знак код v=2. 

Как проверить, установился ли фавикон

Чтобы проверить, появился ли фавикон, вбейте в Яндексе название своего сайта. Если фавикон появился рядом со сниппетом, значит, вы все сделали правильно. Можно проверить корректность установки в онлайн-режиме, например, на сайте realfavicongenerator.net.

Также можете проверить доступность иконки по ее адресу, вбейте в поиск «Яндекса» http://favicon.yandex.net/favicon/адресвашегосайта. или в поиск Google https://www.google.com/s2/favicons?domain=адресвашегосайта.ru. Не забудьте заменить «адрес вашего сайта» на ссылку на ваш сайт. 

Распространенные ошибки

Если фавикон не отображается после установки, значит, была совершена ошибка.

1. Страница закэширована браузером. Очистите кэш и обновите страницу. 

2. Неверный формат иконки.  Проверьте совместимость формата и наличие всех необходимых атрибутов в коде фавикона.

3. Код размещен в неверном месте. Код фавикона следует разместить в блоке <head>.

4. Файл  robots.txt содержит запрет на индексацию фавикона. Чтобы снять запрет, нужно исправить Dissalow: favicon.ico на Allow: favicon.ico.

5. Запрещенное изображение иконки. Иконка не должна содержать запрещенные символы, оскорбительные картинки и слова, материал 18+.

6. Низкое разрешение. Поисковые системы могут игнорировать иконки с низким разрешением.

7. Неуникальная картинка. Иконки, скопированные с других ресурсов, могут игнорироваться поисковиками.

8. Поисковая система еще не проиндексировала фавикон. Индексация может занять время. 

Как Яндекс индексирует фавиконы

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

Чтобы фавикон проиндексировался как можно быстрее, пропишите ссылку на него в коде главной страницы сайта. Также проверьте ответ Яндекса – сервер должен вернуть значение 200 ОК. Внимательно проверьте, нет ли запрета индексации в robots.txt.

Заключение

Фавикон – это маленькая иконка сайта, которая отображается на вкладках браузера или рядом со сниппетом в поисковой выдаче. Он привлекает внимание пользователей, увеличивает запоминаемость сайта и упрощает поиск. 

Для создания фавикона можно использовать логотип компании или тематическую картинку. Ее можно заказать у дизайнера, а можно сделать в онлайн-редакторе или скачать на стоке. Для этого подходят форматы .ico, .png, .svg. и размером от 16х16 пикселей. После создания иконки ее можно сжать в онлайн-сервисе, и размещать на сайте.

Фавикон загружают в блок <head> в корневом каталоге сайта. Если нужно создать несколько изображений для разных страниц сайта, в коде нужных страниц пропишите путь к фавиконке раздела.

Указать фавикон и его расположение в Android можно через спецификацию Web App Manifest. На IOS, нужно прописать в rel “apple-touch-icon.png”. Платформы WordPress или 1С-Битрикс позволяют добавить фавикон через административную панель. 

Чтобы проверить корректность установки фавикона, можно вбить название сайта в поиске Яндекса и посмотреть, выдал ли поиск сниппет. Также можно воспользоваться специальным сервисом – realfavicongenerator.net.

Имейте ввиду, что фавикон появится в поисковой выдаче спустя несколько дней или недель после установки – за это время поисковые роботы Яндекса проиндексируют сайт.