Создание favicon для сайта

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

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

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

Создание Favicon для сайта позволит улучшить внешний вид ресурса в выдаче и вывести любой бренд за пределы окна браузера.

Что такое фавикон и какие его функции

Favicon - компактное изображение в виде значка или иконки, выполняющее роль мини-логотипа сайта. В переводе с англ. FAVorites ICON обозначает “значок для избранного”.

Его основная задача - визуально выделить сайт в закладках, сделать веб-приложение узнаваемым, повлиять на поведенческие метрики пользователей, помочь в продвижении. Сегодня эту пиктограмму можно увидеть везде: в сниппетах результатов поиска, в адресной строке, на страницах поисковой выдачи Яндекс и Google рядом с url сайта, на пустом начальном экране десктопных и мобильных браузерах, в вкладках браузера, других элементах интерфейса.

Создание фавикона для сайта дает возможность решать следующие задачи:

1. Повышает узнаваемость. Человеческая природа такова, что визуальная память более развита, поэтому потребители быстро реагируют и запоминают яркую графику, нежели тексты. Не удивительно, что в большинстве случаев, пользователи кликнут на знакомую пиктограмму, в особенности если Favicon будет совмещен с логотипом компании или бренда;
2. Повышает отображение сайта в поисковой выдачи. Пиктограмма формирует заметное в визуальном плане описание, повышая кликабельность сниппета. В картинке можно передать призыв к действию или иную инфографику. Благодаря этому свойству можно эффектно выделить свой ресурс на фоне конкурентной среды;
3. Облегчает задачу поиска нужного ресурса и легко ориентироваться в браузерных закладках.

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

Формат и стили фавикона

Традиционным форматом фавикона было принято считать формат ICO, который характеризовался мульти-размерностью. Его файл имел способность хранить в себе несколько вариантов размеров иконки и традиционно помещался в корень сайта, где его ищет Internet Explorer.

На сегодняшний день эту технологию считают устаревшей, преимущество стали отдавать форматам Svg и Png с разрешением ICO, они хорошо отображаются и мало весят. Первый используется в Safari MacOS, второй - в остальных операционных системах.

Стандартными размерами считаются 16х16, 32х32, 60х60 и 120х120 пикселей, при этом важно, чтобы показатели ширины и длины иконки были равными. При соблюдении технических параметров фавиконов, иконки сайтов будут правильно и хорошо отображаться на любых устройствах и именно с той картинкой, которую вы задумали.

Сам размер картинки нужно подбирать в зависимости от типа и операционки устройства.

Формирование фавикона допускается и в таких форматах, как GIF, JPEG, но следует знать, что такие форматы не поддерживаются всеми браузерами. что делает их использование нецелесообразным.

Требования к фавиконке

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

Есть характерные требования и к названию файла. Традиционно его называют Favicon, но по факту иконка может иметь любое другое название, если в HTML-коде будет указан к ней путь.

Существует много онлайн-сервисов для создания иконок сайтов в нужных размерах и форматах.

Обеспечить хорошее отображение фавикона в разных контекстах можно с помощью двух стилей:

1. Со сплошной заливкой, который применяется в сетчатых закладках и контекстных меню, где устройство или браузер для достижения единообразного контекста использует маску к фону;
2. С прозрачным фоном, которыми пользуются крупные популярные сайты мира. Такая иконка оптимизированная для размещения рядом с url-адресом или именем самого сайта.

Как создать фавикон

Существует много вариантов для формирования иконок для сайтов в нужных размерах и форматах и для этого необязательно быть дизайнером или иметь профессиональные навыки.

Заказать их можно в специалистов компании seo-name.com, сделать самостоятельно за несколько минут на нашем онлайн-генераторе или в графическом редакторе, нарисовать в специальном онлайн-сервисе, а затем скачать картинку в нужном формате или скачать готовые стандартные наброски из банков иконок.

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

Особенности фавиконов для разных платформ

Фавикон для сайта - это не просто файл Favicon.ico, который расположен в середине ресурса. В настоящее время, когда присутствует так много платформ и устройств, рекомендовано генерировать большое число изображений, необходимых для настольных браузеров, устройств Android, iPhone/ iPad, совместимых с Windows, Mac, iOS и т.д.

Устройства iOS используют сенсорный значок Apple с высоким разрешением для иллюстрации закладок и ярлыков на главном экране. IPhone первого поколения требуют изображения 57х57, а вот новый iPad с наличием Retina-дисплея ищет изображения размером от 114х114 до 180х180.

Для Android Google рекомендует выбирать фавиконы размером 192х192 пикселей, изображения которых сохранены в формате .png.

Для iOS Safari приходится формировать миниатюрное изображение под названием apple touch icon. Это фавикон хорошего качества и с высоким разрешением в формате .png, его размерные параметры составляют 180х180. Пользователи iOS смогут добавить сайт на главный экран посредством использования функции Web Clip. В данном случае иконки будут выглядеть, как приложение.

Как уже писали выше, в Safari Mac OS дела обстоят иначе. Чтобы добавить иконку, в данном случае нужно использовать формат .svg, при этом иконку следует делать плоской, простой, без наличия тени. Только тогда она будет правильно воспроизводиться при закреплении вкладки в браузере Safari.