Рейтинг статьи: 3,75 
Загрузка...Фавикон — это небольшое изображение, по сути — мини-логотип сайта. Сам термин на слуху далеко не у всех, тем не менее, с фавиконами взаимодейтствует каждый, кто пользуется интернетом. Изначально такие иконки выводились только на вкладках браузеров, но сегодня среда их использования ощутимо расширилась. Фавикон, несмотря на свою кажущуюся незначительность, стал важным элементом брендирования сайта, составляющей хорошего пользовательского опыта, а также, пусть и опосредованно, — фактором успешного поискового продвижения.
Где отображается фавикон и при чем тут SEO
В первую очередь мы видим его на запущенных вкладках перед названием ресурса. Без загруженного фавикона браузер по умолчанию генерирует стандартное невыразительное изображение. Например, у Chrome — это неконтрастная черно-белая планета.
Пока в браузере открыто мало вкладок, фавикон — просто составляющая брендирования. Но когда пользователь работает с большим количеством загруженных сайтов, мини-логотип превращается в функциональный UX-элемент. Он становится удобным идентификатором, который помогает распознать сайт и при необходимости вернуться на него для продолжения сессии. Таким образом, в этом случае уже можно говорить о прямой связи с поведенческими.
Аналогичные функции фавикон выполняет в других местах в браузере.
На главной панели с сохраненными сайтами. Когда закладок много, фавиконки остаются единственным идентификатором
В папках с закладками
В истории браузера
Фавикон в этих интерфейсах улучшает удобство пользования для самой ценной аудитории с точки зрения SEO — закладчиков (в смысле тех, кто переходит на ваш сайт из сохраненных страниц). Поисковики очень ценят такие сигналы, для них — это свидетельство качества и полезности контента на сайте.
Также фавиконы служат идентификатором для сайтов, сохраненных на главном экране мобильного поиска (слева). А если пользователь сохранит страницу на своем мобильном устройстве, фавикон будет отображаться как иконка приложения (справа).
Все описанное выше касалось SEO опосредованно, но есть веб-интерфейсы, в которых маленькое лого напрямую влияет на поисковое продвижение. Речь идет, конечно же, о сниппетах в поисковой выдаче. Без фавикона они менее заметны. В этом случае сниппеты сливаются с белым фоном и никак не выделяются среди конкурентов. В условиях, когда нужно использовать все имеющиеся средства в борьбе за высокий CTR сниппета, пренебрежение качественным фавиконом — это серьезный просчет.
Читайте по теме:
Как увеличить органический трафик, сохраняя текущий поисковый рейтинг? Неочевидные советы по улучшению CTR
Яндекс подтягивает фавиконки в сниппеты мобильной и десктопной выдачи. Google делает это пока только в результатах мобильного поиска, но тесты на десктопе уже проводились. Это не оставляет сомнений, что в будущем иконки в сниппетах появятся и там.
Результаты в мобильном поиске Google и Яндекса
Завершая разговор о функциях иконок, нелишним будет напомнить, что фавикон — это в том числе и об элементарном доверии сайту. Да, этот момент замечает далеко не каждый пользователь. Но если знающий человек увидит не загруженный фавикон, для него это многое скажет о техническом уровне сайта.
С чего начать? Первым делом разбираемся с расширениями
Просто взять понравившуюся картинку и залить ее как фавикон не получится. Необходимо соблюсти два важных требования: выбрать правильный формат и размер иконки. Для некоторых расширений заморачиваться с размером не нужно, т.к. он масштабируется сам, о чем будет ниже.
Для фавиконов используют самые разные форматы файлов. Это объясняется текущим разнообразием мобильных и десктопных браузеров, у каждых из которых свои технические требования. Как следствие, фавикон может хорошо отображаться в одном браузере и при этом не поддерживаться другим. Также от типа изображений зависят способы их заливки на сайт, о которых мы будем говорить ниже. В общем, на первый взгляд все кажется очень запутанными, но разобраться на самом деле просто.
Основные форматы под favicon и их особенности
.ICO
Это расширение своего рода золотой стандарт фавиконов. Его поддерживают все типы браузеров, но по ряду причин он считается морально устаревшим. Основные преимущества ICO — универсальность, простая схема загрузки (можно просто забросить файл в корневой каталог сайта) и адаптивность. Последнее качество объясняется тем, что ICO — это файл-контейнер, который содержит в себе иконки сразу нескольких размеров. Но это обуславливает и недостатки. ICO не любят за относительно большой вес и то, что некоторые современные браузеры иногда подтягивают неправильный размер иконки, из-за чего последняя отображается в низком разрешении.
.PNG
Сегодня это основная альтернатива расширению .ico. Данный тип файлов поддерживается на многих устройствах, включая старые браузеры. В первую очередь PNG-файлы ценят за стабильно высокое качество картинки, возможность создания лого с прозрачным фоном и небольшой вес. Из современных типов файлов — обладает самой широкой поддержкой на устройствах.
.SVG
Перспективный, но в настоящее время малоподдерживаемый векторный формат изображений. Его основное преимущество — возможность вариативного разрешения под нужды конкретного интерфейса. Настраивается через CSS. Масштабирование SVG-фавиконов происходит без потери качества. Данный тип файлов не поддерживается в старых десктопных браузерах и на некоторых Android-платформах.
Отдельно отметим, что иконки можно загружать и в любых других форматах, например, .jpeg, .bmp или. gif, но на практике этого стараются не делать из-за все той же проблемы — отсутствия широкой поддержки. Узнать, какие именно расширения отображают те или иные браузеры, помогают специальные инструменты, например, сервис caniuse.com.
Благодаря сервису Сan I Use мы видим, что у PNG-фавиконов поддержка в браузерах заметно шире, чем у расширения .SVG
Возможно, это и звучит не очень современно, но мы бы рекомендовали выбирать именно ico-формат. Он самый универсальный и с ним вы точно не ошибетесь, особенно, если не имеете достаточного опыта в разработке.
Размеры иконок
Вы можете загрузить одну иконку в любом из удобных форматов: .ICO, .PNG, .SVG и т.д. Это самый простой вариант в техническом плане. Но с точки зрения качественного юзабилити лучше заливать несколько вариантов файлов, чтобы гарантированно адаптировать логотип под разные типы платформ. При этом сам фавикон должен быть квадратного размера.
Google рекомендует использовать размеры иконок, кратные 48 пикселям: 48×48, 96×96, 144×144. Для SVG-файлов кратность не имеет значения, поскольку, как было упомянуто выше, у них вариативное разрешение.
В браузерах загруженный значок будет ужат до размера 16×16 пикселей. Поэтому вы обязательно должны убедиться, насколько читаем ваш мини-логотип в таком масштабе, но загружать столь маленький размер файла не нужно (по крайней мере, на этом сделан акцент в справке Google). Минимальное разрешение — 48×48 пикселей.
Яндекс дает следующие рекомендации: оптимальный размер — 120×120, также допускается использование изображений 32×32 и 16×16 пикселей. Рекомендуемый формат — SVG, как гарантирующий максимальную четкость и заметность. Но это необязательно. По желанию можно использовать любой вышеописанный тип расширения.
При создании фавикона в формате .ico, который, как мы выяснили, является контейнером, содержащим сразу несколько иконок, традиционно в него загружают иконки с разрешением 32×32, 48×48 и 96×96 пикселей. Этого достаточно, чтобы лого везде отображалось в хорошем качестве. При необходимости картинка будет масштабирована до нужных размеров.
Создание ico-контейнера не требует каких-либо специальных навыков. Для этого используют бесплатные онлайн-сервисы. Достаточно загрузить исходное изображение и указать перечень нужных размеров — ico-файл будет готов к скачиванию через несколько секунд. Чем создавать такие контейнеры — рассказываем дальше.
Как создать фавикон для сайта. Коротко о способах и сервисах
Создать фавиконку для сайта можно несколькими способами разного степени заморочливости.
1. Сделать в Photoshop
Способ для тех, кто любит делать все основательно и знает Photoshop хотя бы на самом поверхностном уровне. В этом случае нужно будет самому создать файлы нужных размеров и сохранить их в предпочитаемом формате: svg, png, bmp и т.д. Чтобы сохранить документ в виде ico-контейнера, необходимо установить специальный плагин Favicon.ico. Хотя, говорят, Photoshop 2020 умеет делать это по умолчанию.
2. Конвертировать в онлайн-сервисе
Наверное, самый быстрый и надежный способ создать файл в формате ico. Берем картинку (сразу квадратную), заливаем ее в онлайн генератор и скачиваем готовую фавиконку в виде ico-контейнера. Примеры сервисов:
- realfavicongenerator.net
- pr-cy.ru/favicon
- be1.ru/generator-favicon/
3. Нарисовать фавикон самому
Если у вас нет логотипа, который можно было бы конвертировать, но есть оригинальная идея, реализовать ее можно самому при помощи простого пиксельного редактора. Подход довольно архаичный, но его можно использовать, например, чтобы на бегу оценить, как на вкладке будет выглядеть то или иное лого.
Обратите внимание, результат вашего творчества сразу отображается на вкладке браузера
Примеры сервисов:
- katvin.com
- favicon.cc
- favicon.by
4. Скачать готовую иконку
Это можно сделать в специальных банках фавиконов, например, в бесплатной галерее Findicons, где среди полумиллиона файлов не составит труда найти подходящий вариант тематического изображения. По понятным причинам, этот вариант не подходит сайтам, которым нужен брендированный лого.
Как подключить фавикон к сайту
Итак, у нас есть необходимый файл, и теперь его нужно добавить на сайт. Для этого выполняем следующий алгоритм действий.
1. Задаем файлу название favicon, например, favicon.ico.
2. Помещаем переименованный файл в корневой каталог сайта.
3. Добавляем в HTML-код главной страницы между тегами <head></head> ссылку на размещенный файл.
Наиболее часто эта строка выглядит так:
<head>
…
<link rel=“icon” href=“https://site.com/favicon.ico” type=“image/x-icon”>
…
</head>
В HTML-коде можно указывать сразу несколько ссылок на разные файлы. Это актуально, если вы хотите использовать фавиконки с разными расширениями, чтобы гарантированно отображаться во всех типах браузеров. Робот автоматически подтянет нужный файл из всех доступных.
В этом случае в атрибутах ссылок указывают разные значения:
Атрибут “rel” задает тип ресурса. Большинство браузеров учитывают “icon”, для Internet Explorer необходим “shortcut icon”. Таким образом, даже если вы используете универсальный ico-фавикон в HTML-код лучше поместить две ссылки: с указанием атрибута rel=“icon” и rel=“shortcut icon”.
…
<link rel=“icon” href=“https://site.com/favicon.ico” type=“image/x-icon”>
…
…
<link rel=“shortcut icon” href=“https://site.com/favicon.ico” type=“image/x-icon”>
…
Если все сделано корректно, в браузерах фавикон будет отображаться сразу. А вот в поисковую выдачу изображения подтянутся в течение двух недель, когда роботы совершат переобход сайта и проиндексируют внесенные изменения. Соответственно, важно чтоб сам файл и каталог в котором он размещается был доступен поисковым роботам Google и Яндекса. Для этого убедитесь, что указанные документы не запрещены для индексирования в robots.txt или не закрыты директивой Disallow.
10 советов, как задизайнить крутой фавикон
Маленький логотип — еще не значит простой. Работа с малоформатными изображениями предполагает много неочевидных сложностей. Избежать ошибок и разработать правильный дизайн фавикона помогут эти десять универсальных советов.
1. Визуальный стиль бренда. Используйте те же цвета и шрифты, что преобладают на сайте. Это поможет пользователям идентифицировать уже знакомый сайт в поиске или когда в браузере открыто много вкладок.
2. Контрастность. Лучше, если для создания фавикона используют яркие и контрастные цвета — это делает иконку более заметной на вкладках и в выдаче.
3. Тематичность изображения. Используйте пиктограммы, отражающие тематику сайта.
4. Визуальный минимализм. Чаще всего фавикон будут видеть в формате 16×16 пикселей. Это крошечное пространство, поэтому, если вы попытаетесь передать много визуальной информации, есть риск получить смазанный объект, неудобный для восприятия. Подбирайте картинки с минимумом детализации и однозначным прочтение смысла.
5. Цветовая сдержанность. Создавайте фавиконы, в которых присутствует не более двух-трех цветов.
6. Литерный логотип. Используйте в качестве иконки первую букву из названия сайта — это простое и эффективное решение брендирования. Но здесь следует помнить важное правило: или буква или пиктограмма. Попытка вместить и то и другое приведет к чрезмерной перегруженности и нечитаемости.
7. Правильный шрифт. При создании фавиконов откажитесь от курсива. Прямой шрифт сделает буквы или надписи более чистыми и читаемыми.
8. Квадратный фавикон лучше. С ним вы получаете больше площади для изображения, чем с круглой формой.
9. Правильный фон. Цветное изображение на белом фоне читается лучше, чем белая иконка на цветном фоне.
10. Этичность картинок. Поисковые системы запрещают использовать изображения неприемлемого характера, например, картинки порнографического содержания или символы ненависти (свастику и т.д.). Такие фавиконы автоматически удаляются.