Ответ 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.