Я пытаюсь разобраться во всех этих разных размерах и форматах, которые необходимы для значков Favicons, Touch, а теперь и для значков Tile.
Я прочитал это сообщение: http://www.jonathantneal.com/blog/understand-the-favicon, но я все еще не уверен, что именно использовать, что будет выглядеть достаточно хорошо на всех устройствах и браузерах> = IE8 .
Думаю, мне стоит создать следующее:
ICO
favicon.ico (32x32)
PNG
favicon.png (96x96)
Значок плитки
tileicon.png (144x144)
Apple Touch Icon
apple-touch-icon-precomposed.png (152x152)
на основе этого https://github.com/h5bp/html5-boilerplate/issues/1367
... а затем использовать этот код для их обслуживания?
<link rel="apple-touch-icon" href="path/to/touchicon.png">
<link rel="icon" href="path/to/favicon.png">
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- or, set /favicon.ico for IE10 win -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">
Я что-нибудь упускаю?
Я не знаю, подойдет ли это IE 10?
Ответы:
Favicon намного сложнее, чем кажется. 10 лет назад
favicon.ico
был единственным нужным предметом. Затем был сенсорный значок, затем был несколько сенсорных значков, связанных с различными разрешениями экрана устройств iOS, затем был значок плитки для Windows ...Некоторые ответы здесь очень исчерпывающие - и подавляющие (все это только для значка?). Тем не менее, они не могут указать, что значок плитки 310x310 для Windows рекомендуется иметь размер 558x558 . И поскольку они были написаны несколько месяцев назад, в них не упоминается недавний манифест для Android Chrome M39 или значок SVG закрепленной вкладки для Safari в OS X El Capitan. .
Пост-платформенный дизайн - еще одна сложная, но игнорируемая тема. Например, фавиконы часто бывают прозрачными. Но iOS не поддерживает прозрачность (для примера сравните значок SO touch и то, что вы получаете, когда добавляете SO на домашний экран вашего iPhone).
По этим причинам я считаю лучшей практикой для favicon не создавать его вручную. Вместо этого используйте инструмент для автоматизации всего процесса и обеспечения соблюдения правил платформы.
Советую использовать RealFaviconGenerator . Он генерирует все изображения и HTML-код, необходимые для выполнения работы:
favicon.ico
и значки PNG для настольных браузеровНапример, он генерирует не только
msapplication-TileImage
изображение и разметку, но и более свежийbrowserconfig.xml
файл, поддерживаемый IE11. Он также был обновлен несколько месяцев назад для поддержки манифеста Android Chrome и Safari OS X El Capitan.Полное раскрытие: я являюсь автором этого сайта.
источник
<meta name="msapplication-config" content="../path/to/browserconfig.xml">
browserconfig.xml
не нужно объявлять, пока он находится в корне сайта. IE ищет его автоматически. В других случаях (когда вы вводите определенный путь в параметрах) создается объявление.Вот полный (насколько я знаю) пример значка для мобильных устройств и планшетов:
Для IE11 вот FAQ
источник
Существует ряд различных значков и даже экранов-заставок, которые вы можете настроить для различных устройств. В этом ответе рассказывается, как их всех поддержать.
Вот несколько фрагментов, которые я использовал с соответствующими ссылками на то, где я собрал информацию. См. Мой блог для получения дополнительной информации и дополнительных сведений о шаблоне ASP.NET MVC. шаблоне проекта со всем этим встроенным прямо из коробки (включая образцы файлов изображений).
Добавьте следующую разметку в HTML-заголовок. Закомментированные разделы не являются обязательными. В то время как разделы без комментариев рекомендуется охватывать все случаи использования значков. Не бойтесь, если это комментарии, чтобы помочь вам.
Мой файл browserconfig.xml. Полное объяснение выше.
Мой файл manifest.json. Полное объяснение выше.
Список файлов в проекте (обратите внимание, что имена этих файлов важны, если вы решите поместить некоторые из них в корень своего проекта, чтобы избежать использования вышеуказанных метатегов):
Общие накладные расходы
Если вы удалите комментарии, которые составляют 3 КБ дополнительного HTML, если вы не поддерживаете заставку, это 1,5 КБ. Если вы используете сжатие GZIP для своего HTML-контента, что все должны делать в наши дни, это оставляет вам около 634 байтов накладных расходов на запрос для поддержки всех платформ или 446 байтов без экранов-заставок. Я лично считаю, что стоит поддерживать устройства IOS, Android и Windows, но это ваш выбор, я просто даю варианты!
Боковое примечание о текущем веб-значке / начальном экране / настройках
Такая ситуация со значками, специфичными для производителя, экранами-заставками и специальными тегами для управления веб-браузером или закрепленными значками, просто смешна. В идеальном мире мы бы все использовали файл favicon.svg, который мог бы хорошо выглядеть при любом размере и мог бы быть помещен в корень страницы. Только FireFox поддерживает это на момент написания (см. CanIUse.com ).
Однако значки - не единственная настройка в наши дни, есть несколько других настроек, специфичных для поставщика (показано выше), но файл favicon.svg может охватывать большинство случаев использования.
Обновить
Обновлено, чтобы включить новую версию Android / Chrome M39 + значки / темы. Интересно, что они использовали тот же подход, что и Microsoft, но используют файл JSON вместо XML.
источник
favicon-
... - если я обновлю имена в манифесте и<link>
тегах в html-документеhead
?Самое простое решение - использовать одно (!) PNG-изображение (в 2020 году).
Просто добавьте это в заголовок вашего документа:
Последняя ссылка предназначена для Apple (домашний экран), вторая - для Android (домашний экран), а первая - для остальных.
Обратите внимание, что это решение НЕ поддерживает «плитки» в Windows 8/10. Он ДЕЙСТВИТЕЛЬНО поддерживает изображения в ярлыках, закладках и вкладках браузера.
Размер точно соответствует размеру домашнего экрана Android. Размер значка на главном экране Apple составляет 60 пикселей (3x), то есть 180 пикселей и он будет уменьшен. На других платформах используется ярлык по умолчанию, который также будет уменьшен в масштабе.
источник
На самом деле я задавал себе тот же вопрос и пытался найти какие-либо простые проекты, которые можно было бы интегрировать в этап сборки или просто упростить создание необходимых ресурсов и разметки.
Я не нашел ничего, что соответствовало бы моим требованиям, поэтому я создал faviconbuild и выпустил его под лицензией MIT .
Цель этого проекта - создать централизованную, обслуживаемую и запускаемую локально кроссплатформенную утилиту для создания значков и поддержки разметки. Он использует возможности Imagemagick, поэтому вам нужно будет загрузить его для своей платформы или использовать те, которые я предоставляю в своих выпусках . Не стесняйтесь использовать это в коммерческих или личных проектах, вносить свой вклад, отправлять запросы функций или просто использовать в качестве источника вдохновения для ваших собственных утилит.
Проект состоит из командного файла для Windows и сценария bash для Unix / Mac (или Windows через Cygwin). Вы можете получить полный список поддерживаемых параметров с помощью параметра внутренней справки -h или --help.
пример:
Оба сценария анализируют простой текстовый файл , который также можно переопределить с помощью параметра -p или --parsed. По сути, этот файл представляет собой просто шаблон команд для запуска, поэтому при необходимости вы можете легко настроить вывод.
Я также опубликовал сообщение в блоге о разработке и как мини-руководство по созданию сценариев bash / batch.
источник