Стандарт Favicon - 2018 - SVG, ICO, PNG и размеры?
Какие размеры favicon, форматы файлов и мета / теги ссылок должны использоваться с 2018 года? Это включает в себя значок яблока, Windows, Android и другие устройства, которые люди используют сегодня.
Я использую Opera, и я вижу, что он поддерживает формат SVG. Это лучшее решение для использования SVG в настоящее время? Есть ли опция "один файл подходит всем"?
Я просматривал много веб-сайтов и проверял различные "генераторы favicon". Все они лет и работают в основном с файлами 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">
Пожалуйста, предоставьте размеры, форматы файлов и мета / теги ссылок того, какие значки следует использовать.
3 ответа
Отказ от ответственности: я являюсь автором 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">
MacOS Safari
Хотя MacOS Safari не имеет значков, он поддерживает значок маски для закрепленных вкладок. Это монохромный значок SVG и один цвет, который заполняет его, когда вкладка активна.
Объявите это с:
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5">
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, 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. Необходимость сосредоточиться на этих браузерах не очевидна. Обычно они используют сенсорный значок или другие значки, когда не могут найти "свой" значок.
Заключение
Как было объявлено в начале, это именно то, что создает https://realfavicongenerator.net/.
Несколько недель назад у меня был точно такой же вопрос. На удивление сложно найти достоверную и актуальную информацию о любимых вещах в Интернете. Фактически, MDN и W3C ссылаются на Википедию для получения дополнительной информации о значках. Однако статья в Википедии довольно коротка и не очень полезна. Мне потребовалось несколько часов, чтобы выяснить, какие значки являются оптимальными для современных браузеров. Вот что я узнал:
Не существует решения «один файл, чтобы управлять всеми». Однако для современных браузеров это не так уж и много.
- Стандартный размер значка в браузерах по-прежнему составляет 16x16 точек, что соответствует 32x32 пикселей на экранах с высоким разрешением.
- По-прежнему нет необходимости включать
favicon.icoфайл в корневом каталоге, если вы не хотите поддерживать IE 10 или старше - SVG было бы неплохо, но он поддерживается не всеми браузерами. Так что самым простым решением по-прежнему остается использование изображений PNG.
- Google прямо заявляет, что не поддерживает значки 16x16 или 32x32 . Для результатов Google вам необходимо включить хотя бы один значок, кратный 48x48
- Когда пользователи закрепляют ваш веб-сайт на экране запуска своего телефона, вам понадобится значок 192x192 для Android, 167x167 для iPad и 180x180 для iPhone (в то время как теги ссылок для iPhone являются особенными - см. Ниже)
- Теоретически вы можете предоставить один значок 192x192 (или больше, кратный 48), который будет уменьшен браузерами и всеми другими службами, но особенно для версии 16x16 точек эти результаты масштабирования, вероятно, будут хуже, чем те, которые вы получите, когда вы масштабируйте его самостоятельно с помощью профессионального редактора изображений или даже предоставьте специальные версии для этих значков с низким разрешением.
- Вы также можете добавить файл веб-манифеста, который включает дополнительную метаинформацию, например, цвета темы. Но это поддерживается только на Android и приносит мало пользы, если вы действительно не ожидаете, что большая часть ваших пользователей закрепит ваш веб-сайт на своем домашнем экране (IMHO, что очень маловероятно для большинства веб-сайтов).
Я бы порекомендовал использовать в заголовке следующее:
<!-- For all browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<!-- For Google and Android -->
<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">
<!-- For iPad -->
<link rel="apple-touch-icon" type="image/png" sizes="167x167" href="favicon-167x167.png">
<!-- For iPhone -->
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="favicon-180x180.png">
Я также написал в сообщениеблоге с немного большим количеством прозы и дополнительной справочной информацией.
Также стоит упомянуть, что вместе с favicon следует добавить некоторые другие теги, такие как теги OG, карты Twitter или MS-приложения. Все это служит одной и той же цели - визуальной идентификации вашего бренда и также должно быть включено.
Твиттер-карту можно найти ЗДЕСЬ
Я добавляю следующие теги
<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 МБ. Чтобы сохранить похожие изображения с твиттер-картой, я рекомендую размеры 1240px на 650px и формат jpg/png. Facebook и твиттер не принимают svg...
Я обнаружил, что некоторые мировые бренды используют этот тег на своих сайтах. Один имел размеры 150х150 пикселей и формат png. Это изображение может использоваться браузерами для отображения в результатах поиска.
<meta name="thumbnail" content="path/to/image/thumb-150x150.png">
Real Favicon Generator охватывает также значки Microsoft. Есть много других мета-тегов для MS-приложения для оптимизации лука страницы, и отображается другая информация, такая как изображение. Эту тему тоже стоит прочитать.
Я надеюсь, что это полезно для кого-то и расширяет тему брендинга вашего сайта.