В новом подкасте №443 Николай Шмичков рассказал о фавиконе в 2021 году.
Технические требования.
Текстовая версия выступления:
«Всем привет.
Вы находитесь на канале SEOquick.
Меня зовут Николай Шмичков.
И сегодня в этом подкасте я хочу затронуть тему, которой действительно не уделяется внимания — фавикон.
На самом деле я провел опрос среди наших сотрудников и заметил, что многие не в курсе, что изменилось.
И многое изменилось в отношении значков.
Да и вообще ситуация с фавиконками сейчас следующая.
Есть крутой статьяпосвящён теме: «Как сделать фавиконки в 2021 году: 6 файлов, которые нужно сделать».
А если вы создаете значки для веб-сайтов, многие люди думают, что вам нужно создать только один значок, созданный favicon.ico.
И это неправильная идея.
Потому что он сделан для устаревших браузеров.
Ну и классический в браузере в иконке: он до сих пор используется в поисковике и оптимизаторы о нем знают.
Но, чтобы вы понимали, фавиконов на самом деле огромное количество.
Есть значки для Android, значки для Apple.
Фавиконы разных размеров: 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-страница должна иметь тег ссылки в заголовке.
Вы должны знать, что svg — это формат xml, содержащий тег стиля, описанный в CSS.
Как и любой CSS, он может содержать все возможные медиа-запросы.
Его можно использовать для переключения одного и того же значка между светлой и темной темами системы, чтобы черный значок не появлялся на темной теме.
И это действительно можно настроить.
И, конечно же, третий значок, который нужно будет нарисовать, — это изображение PNG размером 180×180 для устройств Apple.
Значок Apple Touch — это изображение, которое ваше устройство Apple будет использовать, когда вы добавите веб-страницу в качестве ярлыка на главный экран вашего iPhone.
Если у вас не прописан этот код, то конечно картинка будет не очень красивой.
А вот если создать соответствующий и указать его прямо в шапке
Для iPad, начиная с iOS 8, потребуется разрешение 180х180.
Другие устройства уже уменьшают изображения.
Но если вы предоставите точечное изображение достаточно хорошего качества, уменьшение масштаба не повредит конечному пользователю.
И помните, что если вы добавите 20 пикселей отступа вокруг значка и зададите цвет фона, значок будет выглядеть намного лучше.
Это можно сделать в любом графическом редакторе.
И конечно, Манифест веб-приложения: вам нужно сделать значки веб-приложений размером 192×192, 512×512 в формате png для устройств Android.
Это файл Json со всей информацией, необходимой браузеру для установки вашего веб-сайта в качестве системного приложения.
Этот формат придумал сам Google.
Соответственно, на вашей HTML-странице вам необходимо поставить тег и ссылку на файл манифеста.
Манифест должен иметь поле значка, связанное с двумя значками: 192×192, который отображается на главном экране, и 512×512, который используется в качестве экрана-заставки при загрузке Progressive Web App.
Как видите, с фавиконками все не так просто.
Это не просто обычный маленький значок, который используется в браузере.
Да, чаще всего тест фавикона проверяет его наличие или отсутствие.
Либо это сделано правильно с прозрачным фоном, либо нет.
Но теперь фавиконы несут гораздо больше смысла, чем просто значок Яндекса, который вы видите в результатах поиска.
Это уже более прогрессивный элемент вашего сайта.
Поэтому нужно обратить внимание на фавикон и его цветовую гамму — рекомендую.
Поэтому, если вы до сих пор не задумывались о том, оптимизирован ваш фавикон или нет, то рекомендую послушать этот подкаст.
Также под этим подкастом будет ссылка на оригинал статьи.
И мы обязательно рекомендуем подписаться на наши уведомления.
Следите за нашими подкастами.
Вопросы задавайте, конечно же, в комментариях в нашей группе Telegram.
И мы будем готовы обсудить любые отзывы.
Итак, теперь вы знаете, что такое фавикон в 2021 году.
Всем спасибо и до новых встреч!»
