Фавикон в 2021 Технические требования | Урок #443

SEOquick - Школа Рекламы

В новом подкасте №443 Николай Шмичков рассказал про фавикон в 2021.

Технические требования.

Текстовая версия выступления:

“Всем привет.

Вы на канале SEOquick.

Меня зовут Николай Шмичков.

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

На самом деле я проводил опрос среди наших сотрудников и заметил, что многие не в курсе того, что изменилось.

А изменилось по фавиконам многое.

И действительно с фавиконами сейчас ситуация следующая.

Есть классная статья, посвященная теме: “Как надо делать фавиконы в 2021: 6 файлов которые нужно делать”.

И если делать фавиконы для сайтов, многие думают, что нужно делать только один фавикон, который делается favicon.ico.

И это неверная мысль.

Потому что он делается для устаревших браузеров.

Ну и классический в браузере в иконке: он используется до сих пор в поисковой системе и сеошники про него знают.

Но, чтобы вы понимали, на самом деле фавиконов существует огромное количество.

Существуют фавиконы для Android, фавиконы для Эпла.

Фавиконы разных размеров: 16х16, 32х32, 96х96.

Соответственно еще 70х70, 144х144, 150х150, 310х310 вроде бы.

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

А на самом деле не так уж и много.

Давайте немного подытожим, вообще зачем такое количество фавиконов нужно делать.

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

Помните, что svg – отличный способ уменьшить размер изображения, которые изначально не должны быть растровыми.

Для многих логотипов результирующий файл будет намного меньше чем png.

Т.е. если у вас всего лишь там 3 изображения, по факту в минимальном наборе, можете использовать расширенные инструменты для оптимизации их размера через Json.

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

Конечно же минимальный набор иконок, которые нужно сделать и внедрить на сайте – их всего 3.

Первый – это favicon.ico для устаревших браузеров.

Они имеют структуру каталога и могут упаковывать файлы с разным разрешением.

И используется одно изображение 32х32.

Например, если же там у вас плохо масштабируется до 16х16.

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

Самое главное, что вы должны понимать – сайт должен иметь очень простой значок и не надо его сильно далеко прятать.

Значок должен находиться в корне сайта вашего.

Т.е. если сайт site.com, то фавикон должен находиться прямо в этой папке и имя его должно быть favicon.ico

И собственно RSS-ленточки они по умолчанию ищут его только в корне и не ищут в других местах.

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

SVG – это векторные изображения, которые собственно делаются в кривых.

То есть здесь у нас нет классических пикселей.

На гигантских размерах, в он гораздо больше чем растровое изображение.

Сейчас 72% всех браузеров поддерживает svg-значки непосредственно в пиктограммах.

Соответственно ваша html-страницу должна иметь тег link в своем заголовке

Следует знать, что svg – это формат xml, который содержит тег стилей, описанных в CSS.

Как и любой CSS он может содержать медиа запросы все возможные.

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

И это действительно можно настроить.

И конечно же третий значок, который нужно будет прорисовать – это 180х180 png изображение для устройств Apple.

Значок Apple Touch – это изображение, которое устройства Apple будет использовать, если вы добавите веб страницу в качестве ярлыка на домашний экран на Айфоне.

Если у вас не прописан этот код, то конечно будет картинка не очень красива.

Но если вы создадите соответствующий и укажите его непосредственно в шапке

Для айпадов начиная с IOS 8 потребуется разрешение 180х180.

Другие устройства уже уменьшают изображения.

Но если вы поставите изображение из точек с достаточно хорошим качеством, уменьшение масштаба не повредит конечному пользователю.

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

Это можно сделать в любом графическом редакторе.

Ну и конечно Web App Manifest: нужно сделать значки веб приложений 192х192, 512х512 в png для устройств на Android.

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

Этот формат придумал сам Google.

Соответственно в вашей HTML страничке нужно поставить тег и ссылкой на файл манифеста.

В манифесте должно быть поле значка, которое связано с двумя значками: 192х192 которое выводится на главный экран, и 512×512 который используется в качестве заставки при загрузке Progressive Web App.

Как вы видите не так-то всё просто с фавиконами.

Это не просто обычная маленькая иконка, которая используется в браузере.

Да, чаще всего, в фавикон тесте проверяется его наличие либо отсутствие.

Либо сделан он правильно с прозрачным фоном, или нет.

Но сейчас фавиконы несут гораздо больше смысла, чем просто пиктограмма в Яндексе ваша, которую вы видите в поисковой выдаче.

Это уже более прогрессивный элемент вашего сайта.

Поэтому нужно уделять внимание фавикону и его цветовой гамме – я рекомендую.

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

Так же под этим подкастом будет ссылочка на оригинал статьи.

И обязательно мы рекомендуем подписаться на наши уведомления.

Следите за нашими подкастами.

Задавайте вопросы конечно же в комментариях в нашей Telegram группе.

И мы готовы будем обсудить любой фидбек.

Итак, теперь вы знаете, что такое favicon в 2021 году.

Всем спасибо и до новых встреч!”