Отказ от ответственности: я являюсь автором 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 .