Услуги по созданию ссылок


Продолжительность: 7:25

Фавикон в 2021 году Технические требования | Урок №443
SEO

&nbsp

В новом подкасте №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 году.

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





Source link

ЧИТАТЬ   Ingate Group и SEOnews делятся результатами исследований по использованию искусственного интеллекта в маркетинге и бизнесе