В новом подкасте №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 в своем заголовке <link rel=”icon” type=”image/svg+xml” и href ссылкой на файл svg в качестве данного атрибута.
Следует знать, что svg – это формат xml, который содержит тег стилей, описанных в CSS.
Как и любой CSS он может содержать медиа запросы все возможные.
Им можно переключать один и тот же значок между светлой и темной системными темами, чтобы черный значок не отображался на темной теме.
И это действительно можно настроить.
И конечно же третий значок, который нужно будет прорисовать – это 180х180 png изображение для устройств Apple.
Значок Apple Touch – это изображение, которое устройства Apple будет использовать, если вы добавите веб страницу в качестве ярлыка на домашний экран на Айфоне.
Если у вас не прописан этот код, то конечно будет картинка не очень красива.
Но если вы создадите соответствующий и укажите его непосредственно в шапке <link rel=”apple-touch-icon” после href=”apple-touch-icon.png” в заголовок.
Для айпадов начиная с IOS 8 потребуется разрешение 180х180.
Другие устройства уже уменьшают изображения.
Но если вы поставите изображение из точек с достаточно хорошим качеством, уменьшение масштаба не повредит конечному пользователю.
И помните, что если вы добавите отступ в 20 пикселей вокруг значка и установите цвет фона, то значок будет выглядеть гораздо лучше.
Это можно сделать в любом графическом редакторе.
Ну и конечно Web App Manifest: нужно сделать значки веб приложений 192х192, 512х512 в png для устройств на Android.
Это файл Json со всеми подробностями для браузера, который может установить ваш веб сайт в качестве системного приложения.
Этот формат придумал сам Google.
Соответственно в вашей HTML страничке нужно поставить тег <link rel=”manifest” href=”site.webmanifest”> и ссылкой на файл манифеста.
В манифесте должно быть поле значка, которое связано с двумя значками: 192х192 которое выводится на главный экран, и 512×512 который используется в качестве заставки при загрузке Progressive Web App.
Как вы видите не так-то всё просто с фавиконами.
Это не просто обычная маленькая иконка, которая используется в браузере.
Да, чаще всего, в фавикон тесте проверяется его наличие либо отсутствие.
Либо сделан он правильно с прозрачным фоном, или нет.
Но сейчас фавиконы несут гораздо больше смысла, чем просто пиктограмма в Яндексе ваша, которую вы видите в поисковой выдаче.
Это уже более прогрессивный элемент вашего сайта.
Поэтому нужно уделять внимание фавикону и его цветовой гамме – я рекомендую.
Поэтому если до сих пор вы не задумывались оптимизирован у вас фавикон или нет, то рекомендую переслушать этот подкаст.
Так же под этим подкастом будет ссылочка на оригинал статьи.
И обязательно мы рекомендуем подписаться на наши уведомления.
Следите за нашими подкастами.
Задавайте вопросы конечно же в комментариях в нашей Telegram группе.
И мы готовы будем обсудить любой фидбек.
Итак, теперь вы знаете, что такое favicon в 2021 году.
Всем спасибо и до новых встреч!”
