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

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

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

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



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


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

Jakub Muda

Ответов: 3

Ответы (3)

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

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

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

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

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

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

iOS Safari

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


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

Android Chrome

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

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

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

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


Edge и IE 12

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

Файл и цвет фона объявляются с:



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

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

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

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




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

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

Заключение

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

Несколько недель назад у меня был точно такой же вопрос. На удивление сложно найти достоверную и актуальную информацию о фавиконах в Интернете. Фактически, MDN и W3C оба ссылаются на Википедию для получения дополнительной информации о значках. Однако статья в Википедии довольно коротка и не очень полезна. Мне потребовалось несколько часов, чтобы выяснить, какие значки являются оптимальными для современных браузеров.

Вот что я узнал:

Не существует решения «один файл, чтобы управлять всеми». Однако для современных браузеров это не так уж и много.

  1. Стандартный размер значка в браузерах по-прежнему составляет 16x16 точек, что соответствует 32x32 пикселей на экранах с высоким разрешением.
  2. Нет необходимости включать файл favicon.ico в корневой каталог, если вы не хотите поддерживать IE 10 или более ранние версии.
  3. SVG было бы неплохо, но он поддерживается не всеми браузерами. Таким образом, самым простым решением будет просто использовать изображения PNG.
  4. Google прямо говорит , что они не поддерживают значки 16x16 или 32x32. Для результатов Google вам необходимо включить хотя бы один значок, кратный 48x48.
  5. Когда пользователи закрепляют ваш веб-сайт на экране запуска своего телефона, вам понадобится значок 192x192 для Android, 167x167 для iPad и 180x180 для iPhone (в то время как теги ссылок для iPhone являются специальными - см. Ниже)
  6. Теоретически вы можете предоставить один значок 192x192 (или больше, кратный 48), который будет уменьшен браузерами и всеми другими службами, но особенно для версии 16x16 точек эти результаты масштабирования, вероятно, будут хуже, чем вы получить, когда вы сами масштабируете его с помощью профессионального редактора изображений, или даже предоставьте специальные версии для этих значков с низким разрешением.
  7. Вы также можете добавить файл веб-манифеста, который включает больше метаинформации, такой как цвета темы. Но это поддерживается только на Android и приносит мало пользы, если вы действительно не ожидаете, что большая часть ваших пользователей закрепит ваш веб-сайт на своем домашнем экране (по моему скромному мнению, это очень маловероятно для большинства веб-сайтов).

Я бы порекомендовал использовать в шапке следующее:













Я также написал сообщение в блоге с немного большим количеством прозы и дополнительной справочной информацией.

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

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

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








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

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


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














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


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



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

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

2022 WebDevInsider