Фавікони - кращі практики

Я намагаюсь обернутись усіма цими різними розмірами та форматами, необхідними для Favicons, піктограм Touch і тепер також піктограм плитки.

Я читав цю публікацію: 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/isissue/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?

Фавікон - це складніше, ніж те, що звучить. 10 років тому favicon.icoбув єдиним необхідним предметом. Потім була піктограма сенсорного керування, потім декілька сенсорних піктограм, вноситься до різних роздільних можливостей екрана пристроїв iOS, потім був значок плитки для Windows ...

Деякі відповіді тут дуже вичерпні - і непосильні (все це, лише для фавікону?). Однак вони не вказують на те, що піктограмою плитки 310х310 для Windows рекомендується розмір 558x558 . А оскільки вони були написані кілька місяців тому, вони не згадують нещодавній маніфест для Android Chrome M39 або закріплену вкладку SVG іконку для Safari в OS X El Capitan .

Дизайн на платформі - ще одна важка, але поки що занедбана тема. Наприклад, фавікон часто прозорий. Але iOS не підтримує прозорість (наприклад, порівняйте значок торкання SO та те, що ви отримуєте, додаючи SO на головний екран свого iPhone).

З цих причин найкращою практикою для фавікону вважаю не створювати його вручну. Натомість використовуйте інструмент для автоматизації всього процесу та виконання настанов платформи.

Я раджу вам використовувати RealFaviconGenerator . Він генерує всі зображення та 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="https://stackoverflow.com/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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 охоплює більшість випадків використання.

Оновлення

Оновлено, щоб включити нову версію M39 + favicon / тематизація для Android / Chrome. Цікаво, що вони пішли з подібним підходом до Microsoft, але використовують файл JSON замість XML.

Найпростіше рішення - використовувати одне (!) Зображення PNG (у 2020 році).

Просто додайте це до голови документа:

<link rel="shortcut icon" type="image/png" href="https://stackoverflow.com/img/icon-192x192.png">
<link rel="shortcut icon" sizes="192x192" href="https://stackoverflow.com/img/icon-192x192.png">
<link rel="apple-touch-icon" href="https://stackoverflow.com/img/icon-192x192.png">

Останнє посилання стосується Apple (головний екран), друге - для Android (домашній екран), а перше - для решти.

Зауважте, що це рішення НЕ підтримує "плитки" в Windows 8/10. Він підтримує зображення в ярликах, закладках і вкладках браузера.

Розмір точно відповідає розміру домашнього екрану Android. Розмір піктограми домашнього екрану Apple становить 60 пікселів (3 рази), тому 180 пікселів і буде зменшено. На інших платформах використовується значок ярлика за замовчуванням, який також буде зменшено.

Я насправді задавав собі те саме питання і намагався шукати будь-які прості проекти, які можна було б інтегрувати в крок збирання або просто спростити створення необхідних активів та розмітки.

Я не знайшов нічого, що відповідало б моїм вимогам, тому я створив faviconbuild і випустив його під ліцензією MIT .

Мета цього проекту - створити центральну, реконструйовану та локально керовану утиліту крос-платформи для створення фаворитів та підтримки розмітки. Він використовує силу Imagemagick, тому вам потрібно буде завантажити його для своєї платформи або використовувати ті, які я надаю у своїх випусках . Будь ласка, не соромтесь використовувати це в комерційних або особистих проектах, надавати внески, подавати запити на функції або просто використовувати як джерело натхнення для власних комунальних послуг.

Проект складається з пакетного файлу для Windows та bash-скрипту для Unix / Mac (або Windows через Cygwin). Ви можете отримати повний список підтримуваних параметрів із внутрішньої довідкової опції -h або --help.

колишній:

./faviconbuild.sh -h

Обидва сценарії розбирають простий текстовий файл, який ви також можете замінити за допомогою параметра -p або --parsed. Файл - це лише шаблон команд для запуску, щоб ви могли легше налаштувати вихід, якщо це потрібно.

Я також опублікував публікацію в блозі про розробку і як міні-підручник з сценаріїв bash / batch.