Ответ 1

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

Миф единого размера для всех

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

С технической точки зрения, одна иконка SVG была бы хорошей вещью. Но с точки зрения пользовательского интерфейса и 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.

Ответ 2

Также стоит упомянуть, что вместе с 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">

Я обнаружил, что многие пользователи делают изображения размером 1300px по 650px и 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 и твиттер не принимают svg...

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

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

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

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