Фавиконс - Лучшие практики
Я пытаюсь разобраться во всех этих разных размерах и форматах, которые необходимы для значков, значков Touch и теперь значков Tile.
Я читал этот пост: http://www.jonathantneal.com/blog/understand-the-favicon но я все еще немного сомневаюсь в том, что именно использовать, что будет выглядеть достаточно хорошо на всех устройствах и браузерах>= IE8,
Я думаю, что я должен создать следующее:
ICO
favicon.ico (32x32)
PNG
favicon.png (96x96)
Плитка Иконка
tileicon.png (144x144)
Значок Apple Touch
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?
5 ответов
Фавикон намного сложнее, чем кажется. 10 лет назад, favicon.ico был единственным необходимым предметом. Затем был сенсорный значок, затем несколько сенсорных иконок в зависимости от разрешения экрана различных устройств iOS, затем был значок плитки для Windows...
Некоторые ответы здесь очень всеобъемлющие - и ошеломляющие (все это только для значка?). Тем не менее, они не в состоянии указать, что значок плитки 310x310 для Windows рекомендуется иметь 558x558. И поскольку они были написаны несколько месяцев назад, в них не упоминается недавний манифест для Android Chrome M39 или прикрепленная иконка SVG с вкладками для Safari в OS X El Capitan.
Перплатформенный дизайн - еще одна сложная, но все же забытая тема. Например, favicon часто бывают прозрачными. Но iOS не поддерживает прозрачность (например, сравните иконку SO touch и то, что вы получаете, когда добавляете SO на домашний экран вашего iPhone).
По этим причинам, я считаю, что лучшая практика для favicon - не создавать ее вручную. Вместо этого используйте инструмент для автоматизации всего процесса и обеспечения соблюдения правил платформы.
Я советую вам использовать http://realfavicongenerator.net/. Он генерирует все изображения и HTML-код, необходимый для выполнения работы:
favicon.icoи PNG иконки для настольных браузеров- Значок Apple touch для устройств iOS и Android
- Плитки Windows 8
- Значок закрепленной вкладки для Safari в OS X El Capitan
Например, он не только генерирует msapplication-TileImage изображение и разметка, а также более свежие browserconfig.xml файл поддерживается IE11. Он также был обновлен несколько месяцев назад для поддержки манифеста Android Chrome и Safari OS X El Capitan.
Полное раскрытие: я автор этого сайта.
Вот полный (как я знаю) пример favicon для мобильных устройств и планшетов:
<!-- non-retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon57.png" sizes="57x57">
<!-- non-retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon72.png" sizes="72x72">
<!-- non-retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon76.png" sizes="76x76">
<!-- retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon114.png" sizes="114x114">
<!-- retina iPhone iOS 7 -->
<link rel="apple-touch-icon" href="icon120.png" sizes="120x120">
<!-- retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon144.png" sizes="144x144">
<!-- retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon152.png" sizes="152x152">
<!-- Win8 tile -->
<meta name="msapplication-TileImage" content="favicon-144.png">
<meta name="msapplication-TileColor" content="#B20099"/>
<meta name="application-name" content="name" />
<!-- IE11 tiles -->
<meta name="msapplication-square70x70logo" content="tile-tiny.png"/>
<meta name="msapplication-square150x150logo" content="tile-square.png"/>
<meta name="msapplication-wide310x150logo" content="tile-wide.png"/>
<meta name="msapplication-square310x310logo" content="tile-large.png"/>
Для IE11 вот FAQ
Существует множество различных значков и даже заставок, которые вы можете установить для различных устройств. Этот ответ рассказывает, как поддержать их всех.
Вот некоторые фрагменты, которые я использовал с соответствующими ссылками на то, где я собрал информацию. См. Мой блог для получения дополнительной информации и дополнительной информации о шаблоне проекта ASP.NET MVC Boilerplate со всем этим встроенным прямо из коробки (включая примеры файлов изображений).
Добавьте следующую разметку к вашей голове HTML. Закомментированные разделы не являются обязательными. В то время как без комментариев разделы рекомендуется охватить все значки использования. Не бойтесь, большинство, если это комментарии, чтобы помочь вам.
<!-- Icons & Platform Specific Settings - Favicon generator used to generate the icons below http://realfavicongenerator.net/ -->
<!-- shortcut icon - It is best to add this icon to the root of your site and only use this link element if you move it somewhere else. This file contains the following sizes 16x16, 32x32 and 48x48. -->
<!--<link rel="shortcut icon" href="favicon.ico">-->
<!-- favicon-96x96.png - For Google TV. -->
<link rel="icon" type="image/png" href="/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="/content/images/favicon-32x32.png" sizes="32x32">
<!-- Android/Chrome -->
<!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory.
https://developer.chrome.com/multidevice/android/installtohomescreen. -->
<link rel="manifest" href="/content/icons/manifest.json">
<!-- theme-color - The colour of the toolbar in Chrome M39+
http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
<meta name="theme-color" content="#1E1E1E">
<!-- favicon-192x192.png - For Android Chrome M36 to M38 this HTML is used. M39+ uses the manifest.json file. -->
<link rel="icon" type="image/png" href="/content/icons/favicon-192x192.png" sizes="192x192">
<!-- mobile-web-app-capable - Run Android/Chrome version M31 to M38 in standalone mode, hiding the browser chrome. -->
<!-- <meta name="mobile-web-app-capable" content="yes"> -->
<!-- Apple Icons - You can move all these icons to the root of the site and remove these link elements, if you don't mind the clutter.
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//apple_ref/doc/uid/30001261-SW1 -->
<!-- apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. -->
<!--<meta name="apple-mobile-web-app-title" content="">-->
<!-- apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in 'standalone' mode. Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. -->
<!--<meta name="apple-mobile-web-app-capable" content="yes">-->
<!-- apple-mobile-web-app-status-bar-style - default/black/black-translucent Styles the IOS status bar. Using black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. -->
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black">-->
<!-- apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon" sizes="57x57" href="/content/images/apple-touch-icon-57x57.png">
<!-- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="114x114" href="/content/images/apple-touch-icon-114x114.png">
<!-- apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 6 -->
<link rel="apple-touch-icon" sizes="72x72" href="/content/images/apple-touch-icon-72x72.png">
<!-- apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="144x144" href="/content/images/apple-touch-icon-144x144.png">
<!-- apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7. -->
<link rel="apple-touch-icon" sizes="60x60" href="/content/images/apple-touch-icon-60x60.png">
<!-- apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="120x120" href="/content/images/apple-touch-icon-120x120.png">
<!-- apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 7 -->
<link rel="apple-touch-icon" sizes="76x76" href="/content/images/apple-touch-icon-76x76.png">
<!-- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="152x152" href="/content/images/apple-touch-icon-152x152.png">
<!-- apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS = 8 -->
<link rel="apple-touch-icon" sizes="180x180" href="/content/images/apple-touch-icon-180x180.png">
<!-- Apple Startup Images - These are shown when the page is loading if the site is pinned https://gist.github.com/tfausak/2222823 -->
<!-- apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait) -->
<link rel="apple-touch-startup-image"
href="/content/images/apple-touch-startup-image-1536x2008.png"
media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape) -->
<link rel="apple-touch-startup-image"
href="/content/images/apple-touch-startup-image-1496x2048.png"
media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait) -->
<link rel="apple-touch-startup-image"
href="/content/images/apple-touch-startup-image-768x1004.png"
media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape) -->
<link rel="apple-touch-startup-image"
href="/content/images/apple-touch-startup-image-748x1024.png"
media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5 -->
<link rel="apple-touch-startup-image"
href="/content/images/apple-touch-startup-image-640x1096.png"
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina) -->
<link rel="apple-touch-startup-image"
href="/content/images/apple-touch-startup-image-640x920.png"
media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-320x460.png - iOS 6 iPhone -->
<link rel="apple-touch-startup-image"
href="/content/images/apple-touch-startup-image-320x460.png"
media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">
<!-- Windows 8 Icons - If you add an RSS feed, revisit this page and regenerate the browserconfig.xml file. You will then have a cool live tile!
browserconfig.xml - Windows 8.1 - Has been added to the root of the site. This points to the tile images and tile background colour. It contains the following images:
mstile-70x70.png - For Windows 8.1 / IE11.
mstile-144x144.png - For Windows 8 / IE10.
mstile-150x150.png - For Windows 8.1 / IE11.
mstile-310x310.png - For Windows 8.1 / IE11.
mstile-310x150.png - For Windows 8.1 / IE11.
See http://www.buildmypinnedsite.com/en and http://msdn.microsoft.com/en-gb/library/ie/dn255024%28v=vs.85%29.aspx. -->
<!-- application-name - Windows 8+ - The name of the application if pinned to the start screen. -->
<!--<meta name="application-name" content="">-->
<!-- msapplication-TileColor - Windows 8 - The tile colour which shows around your tile image (msapplication-TileImage). -->
<meta name="msapplication-TileColor" content="#5cb95c">
<!-- msapplication-TileImage - Windows 8 - The tile image. -->
<meta name="msapplication-TileImage" content="/content/images/mstile-144x144.png">
Мой файл browserconfig.xml. Полное объяснение выше.
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/Content/Images/mstile-70x70.png"/>
<square150x150logo src="/Content/Images/mstile-150x150.png"/>
<square310x310logo src="/Content/Images/mstile-310x310.png"/>
<wide310x150logo src="/Content/Images/mstile-310x150.png"/>
<TileColor>#5cb95c</TileColor>
</tile>
</msapplication>
</browserconfig>
Мой файл manifest.json. Полное объяснение выше.
{
"name": "ASP.NET MVC Boilerplate (Required! Update This)",
"icons": [
{
"src": "\/Content\/icons\/android-chrome-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/Content\/icons\/android-chrome-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/Content\/icons\/android-chrome-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/Content\/icons\/android-chrome-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/Content\/icons\/android-chrome-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/Content\/icons\/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}
Список файлов в проекте (обратите внимание, что имена этих файлов важны, если вы решите поместить некоторые из них в корень вашего проекта, чтобы избежать использования вышеуказанных метатегов):
favicon.ico
browserconfig.xml
Content/Images/
android-chrome-144x144.png
android-chrome-192x192.png
android-chrome-36x36.png
android-chrome-48x48.png
android-chrome-72x72.png
android-chrome-96x96.png
apple-touch-icon.png
apple-touch-icon-57x57.png
apple-touch-icon-60x60.png
apple-touch-icon-72x72.png
apple-touch-icon-76x76.png
apple-touch-icon-114x114.png
apple-touch-icon-120x120.png
apple-touch-icon-144x144.png
apple-touch-icon-152x152.png
apple-touch-icon-180x180.png
apple-touch-icon-precomposed.png (180x180)
favicon-16x16.png
favicon-32x32.png
favicon-96x96.png
favicon-192x192.png
manifest.json
mstile-70x70.png
mstile-144x144.png
mstile-150x150.png
mstile-310x150.png
mstile-310x310.png
apple-touch-startup-image-1536x2008.png
apple-touch-startup-image-1496x2048.png
apple-touch-startup-image-768x1004.png
apple-touch-startup-image-748x1024.png
apple-touch-startup-image-640x1096.png
apple-touch-startup-image-640x920.png
apple-touch-startup-image-320x460.png
Всего накладных
Если вы удалите комментарии, это 3 КБ дополнительного HTML, если вы не поддерживаете заставки, то это 1,5 КБ. Если вы используете сжатие GZIP для своего HTML-контента, что каждый должен делать в наши дни, это оставляет вам около 634 байт на каждый запрос для поддержки всех платформ или 446 байт без заставок. Лично я считаю, что стоит поддерживать устройства IOS, Android и Windows, но это ваш выбор, я просто даю варианты!
Дополнительное примечание о текущей веб-иконке / заставке / ситуации с настройками
Такая ситуация со специфическими для поставщиков значками, заставками и специальными тегами для управления веб-браузером или прикрепленными значками смешна. В идеальном мире мы все использовали бы файл favicon.svg, который хорошо смотрелся бы в любом размере и мог быть помещен в корень страницы. Только FireFox поддерживает это на момент написания (см. CanIUse.com).
Тем не менее, значки не являются единственной настройкой в наши дни, есть несколько других специфических настроек производителя (показанных выше), но файл favicon.svg будет охватывать большинство случаев использования.
Обновить
Обновлен, чтобы включить новую версию Android/Chrome M39+ favicon/ Темы. Интересно, что они применили аналогичный подход к Microsoft, но используют XML-файл вместо XML.
Самое простое решение - использовать одно (!) Изображение PNG (в 2018 году).
Просто добавьте это в заголовок вашего документа:
<link rel="shortcut icon" type="image/png" href="/img/icon-196x196.png">
<link rel="shortcut icon" sizes="196x196" href="/img/icon-196x196.png">
<link rel="apple-touch-icon" href="/img/icon-196x196.png">
Последняя ссылка для Apple (домашний экран), вторая для Android (домашний экран) и первая для остальных.
Обратите внимание, что это решение НЕ поддерживает "плитки" в Windows 8/10. Он поддерживает изображения в ярлыках, закладках и вкладках браузера.
На самом деле я задавал себе тот же вопрос и пытался найти какие-нибудь простые проекты, которые можно было бы интегрировать в этап сборки или просто упростить создание ресурсов и требуемой разметки.
Я не нашел ничего, что соответствовало бы моим требованиям, поэтому я создал faviconbuild и выпустил его под лицензией MIT.
Цель этого проекта - создать центральную, обслуживаемую и локально управляемую кроссплатформенную утилиту для создания значков и поддержки разметки. Он использует всю мощь Imagemagick, поэтому вам нужно загрузить его для своей платформы или использовать те, которые я предоставляю в своих выпусках. Пожалуйста, не стесняйтесь использовать это в коммерческих или личных проектах, вносить свой вклад, отправлять запросы на функции или просто использовать в качестве источника вдохновения для своих собственных утилит.
Проект состоит из командного файла для Windows и скрипта bash для Unix / Mac (или Windows через Cygwin). Вы можете получить полный список поддерживаемых опций из опции внутренней справки -h или --help.
например:
./faviconbuild.sh -h
Оба сценария анализируют простой текстовый файл, который также можно переопределить с помощью параметра -p или --parsed. Этот файл в основном является шаблоном команд для запуска, так что вы можете легче настроить вывод, если это необходимо.
Я также опубликовал пост в блоге о разработке и в виде мини-учебника по bash/batch-скриптингу.