Какие размеры значков, форматы файлов и мета / теги ссылок следует использовать с 2020 года? Это включает в себя значок Apple, Windows, Android и другие устройства, которые люди используют сегодня.

Я использую Opera и вижу, что она поддерживает формат svg. Это лучшее решение для использования SVG в настоящее время? Есть ли вариант «один файл подходит всем»?

Я просматривал множество веб-сайтов и проверял различные «генераторы значков». Все они старые и работают в основном с файлами png.

Например: какой код использовать для ico и svg?

<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

или следует указать размеры, если ico содержит больше размеров? Я не нашел ни одного хорошего ответа.

<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">

Укажите размеры, форматы файлов и мета-теги / теги ссылок, указывающие, какие значки следует использовать.

Отказ от ответственности: я являюсь автором RealFaviconGenerator, который, как я ожидаю, будет актуальным (в основном, см. Ниже). Поэтому не удивляйтесь, если этот ответ соответствует тому, что генерирует RFG.

Универсальный миф

Не существует значка "один размер для всех". Вы не можете создать один значок SVG и ожидать, что он будет работать везде.

С технической точки зрения, один значок SVG был бы хорошо. Но с точки зрения UI и UX это нежелательный результат. Сравните iOS и Android. В iOS все значки на главном экране представляют собой квадраты с закругленными углами ( iOS заполняет прозрачные области значков Touch черным цветом ). На Android значки на главном экране часто имеют неквадратную форму и прозрачность (включая значки приложений Google). Отправьте значок в одно касание, и Android Chrome будет его использовать. Но вы не сможете соответствовать рекомендациям по значкам Android , тогда как специальный значок может.

Поэтому я советую сознательно избегать использования одного значка. По возможности лучше нацеливать каждую платформу индивидуально (это не всегда так).

Иконки, платформа на платформу

iOS Safari

iOS Safari ожидает сенсорного значка . На сегодняшний день это изображение PNG размером 180x180 пикселей. Это изображение не должно использовать прозрачность, и его углы будут автоматически закруглены при добавлении на главный экран. Заявлено с:

<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">

За прошедшие годы этот значок стал «значком высокого разрешения по умолчанию» для многих браузеров. Так что вы найдете его в другом месте, при добавлении в закладки и т. Д.

Android Chrome

Android Chrome использует манифест веб-приложения . Хотя этот манифест не предназначен для Android Chrome, в настоящее время он является его основным поставщиком. Таким образом, на данный момент все еще можно с уверенностью считать, что значки из манифеста веб-приложения предназначены для Android Chrome.

Как следует из названия, манифест веб-приложения предназначен, в общем, для веб-приложений. Но любой веб-сайт может использовать его как способ ссылки на некоторые значки.

Android ожидает значок PNG 192x192, прозрачность разрешена и приветствуется.

Манифест объявлен с помощью:

<link rel="manifest" href="/icons/site.webmanifest">

Edge и IE 12

Microsoft представила browserconfig , XML-документ, в котором перечислены различные значки, подходящие для пользовательского интерфейса Metro.

Цвет файла и фона объявляется с помощью:

<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">

Классические настольные браузеры

Windows / macOS Chrome, Windows / macOS Firefox, Safari, IE ... Здесь все немного размыто. Раньше поддерживался только один favicon.icoфайл. Однако большинство последних браузеров предпочитают более светлые значки PNG. Кроме того, некоторые браузеры не могут выбрать правильный значок в файле ICO (этот формат может включать несколько версий значка), что приводит к неправильному использованию значка с низким разрешением.

Может возникнуть соблазн favicon.icoполностью отказаться от старого . Хотя я хотел бы сделать этот скачок в RFG, я не провел необходимых тестов, чтобы оценить влияние на старые браузеры.

Таким образом, комбо, которое я все еще рекомендую сегодня, со favicon.icoвстраиванием значков 16x16, 32x32 и 48x48:

<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="shortcut icon" href="/icons/favicon.ico">

Другие браузеры

В других браузерах могут быть специальные значки. Например, Coast by Opera ищет значок 228x228 . Необходимость сосредоточиться на этих браузерах не очевидна. Обычно они используют сенсорный значок или другие значки, когда не могут найти «свой» значок.

Вывод

Как было объявлено в начале, это именно то, что создает RealFaviconGenerator .

Также стоит упомянуть, что вместе с favicon необходимо добавить некоторые другие теги, такие как теги OG, карты Twitter или MS-приложение. Все это служит одной цели - визуальной идентификации вашего бренда и тоже должно быть включено.

Карточку Twitter можно найти ЗДЕСЬ

Я добавляю следующие теги

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YourAccount">
<meta name="twitter:creator" content="@YourAccount">
<meta name="twitter:title" content="Title of your page">
<meta name="twitter:url" content="URL of your page">
<meta name="twitter:description" content="Your description here">
<meta name="twitter:image:src" content="URL of image">

Я обнаружил, что многие пользователи создают изображения в форматах 1300 на 650 пикселей и jpg / png.

После добавления всех тегов они должны быть проверены ЗДЕСЬ

Facebook OG имеет больше возможностей, но в целом они следующие:

<meta property="og:title" content="ENTER PAGE TITLE">
<meta property="og:type" content="website"><!--Different values possible -->
<meta property="og:url" content="ENTER PAGE URL">
<meta property="og:image" content="URL OF IMAGE">
<meta property="og:image:width" content="1240">
<meta property="og:image:height" content="650">
<meta property="og:site_name" content="ENTER YOUR SITE NAME">
<meta property="og:description" content="ENTER YOUR PAGE DESCRIPTION">
<meta property="fb:app_id" content="ENTER YOUR FB APP ID">

<meta property="og:see_also" content="URL to recommended page number 1">
<meta property="og:see_also" content="URL to recommended page number 2">
<!--UP TO 5 WEBSITE ADRESSES -->

Facebook рекомендует конкретное соотношение сторон изображения, а размер файла ограничен 8 МБ. Чтобы сохранить похожие изображения с помощью твиттер-карты, я рекомендую размеры 1240 на 650 пикселей и формат jpg / png. Facebook и Twitter не принимают svg ...

Я обнаружил, что некоторые мировые бренды используют этот тег на своих сайтах. Один имел размеры 150x150 пикселей и формат png. Это изображение может использоваться браузерами для отображения в результатах поиска.

<meta name="thumbnail" content="path/to/image/thumb-150x150.png">

Real Favicon Generator покрывает также значки Microsoft. Есть много других метатегов для MS-приложения, чтобы оптимизировать страницу и другую информацию, такую ​​как изображение. Эту тему тоже стоит прочитать.

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