Favicons - Meilleures pratiques

Question

J'essaie de me faire une idée de toutes ces tailles et de tous ces formats différents qui sont nécessaires pour les favicons, les icônes tactiles et maintenant les icônes de tuiles.

J'ai lu ce message : http://www.jonathantneal.com/blog/understand-the-favicon mais je ne sais pas encore exactement ce qu'il faut utiliser pour obtenir un résultat satisfaisant sur tous les appareils et navigateurs >= IE8.

Je pense que je devrais créer ce qui suit :

ICO
favicon.ico (32x32)

PNG
favicon.png (96x96)

Icône de tuile
tileicon.png (144x144)

Icône Apple Touch
apple-touch-icon-precomposed.png (152x152)
sur la base de ce qui suit https://github.com/h5bp/html5-boilerplate/issues/1367

...et ensuite utiliser ce code pour les servir ?

<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">

Est-ce que j'ai manqué quelque chose ?

Je ne sais pas si cela couvrira IE 10 ?

Answer 1

La Favicon est bien plus complexe qu'il n'y paraît. Il y a 10 ans, favicon.ico était le seul élément nécessaire. Ensuite, il y a eu l'icône tactile, puis de multiples icônes tactiles dues aux différentes résolutions d'écran des appareils iOS, puis il y a eu l'icône en forme de tuile pour Windows...

Certaines réponses sont très complètes - et accablantes (tout cela, seulement pour un favicon ?). Pourtant, elles ne parviennent pas à indiquer que l'icône de tuile 310x310 pour Windows est recommandée pour être 558x558 . Et comme ils ont été écrits il y a quelques mois, ils ne mentionnent pas le récent manifeste pour Android Chrome M39 ou le icône SVG d'onglet épinglé pour Safari sur OS X El Capitan .

La conception par plate-forme est un autre sujet difficile, mais négligé. Par exemple, les favicon sont souvent transparents. Mais iOS ne supporte pas la transparence (pour un exemple, comparez le Icône SO touch et ce que vous obtenez lorsque vous ajoutez SO à l'écran d'accueil de votre iPhone).

Pour ces raisons, ce que je considère comme une meilleure pratique pour le favicon est de pas le créer manuellement. Utilisez plutôt un outil pour automatiser l'ensemble du processus et faire respecter les directives de la plateforme.

Je vous conseille d'utiliser RealFaviconGenerator . Il génère toutes les images et le code HTML dont vous avez besoin pour faire votre travail :

• favicon.ico et des icônes PNG pour les navigateurs de bureau
• Icône tactile Apple pour les appareils iOS et Android
• Les tuiles de Windows 8
• Icône d'onglet épinglé pour Safari sous OS X El Capitan

Par exemple, il ne génère pas seulement le msapplication-TileImage l'image et le balisage, mais aussi les plus récentes browserconfig.xml supporté par IE11. Il a également été mis à jour il y a quelques mois pour prendre en charge le manifeste Android Chrome et Safari OS X El Capitan.

Divulgation complète : je suis l'auteur de ce site.

Answer 2

Voici l'exemple complet (à ma connaissance) de favicon pour mobile et tablette :

<!-- 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"/>

Pour IE11, aquí est une FAQ

Answer 3

Il existe un certain nombre d'icônes différentes et même des écrans d'accueil que vous pouvez définir pour différents appareils. Cette réponse explique comment les prendre tous en charge.

Voici quelques extraits que j'ai utilisés, accompagnés de liens pertinents vers les sites où j'ai recueilli les informations. Voir mon blog pour plus d'informations et pour plus d'informations sur le ASP.NET MVC Boilerplate un modèle de projet avec tout cela intégré dès le départ (y compris des exemples de fichiers d'images).

Ajoutez les balises suivantes à votre en-tête html. Les sections commentées sont entièrement facultatives. Les sections non commentées sont recommandées pour couvrir toutes les utilisations des icônes. N'ayez pas peur, la plupart si ce sont des commentaires pour vous aider.

<!-- 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="http://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="http://stackoverflow.com/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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">

Mon fichier browserconfig.xml. Explication complète ci-dessus.

<?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>

Mon fichier manifest.json. Explication complète ci-dessus.

{
    "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"
        }
    ]
}

Une liste des fichiers du projet (Notez que les noms de ces fichiers sont importants si vous décidez de placer certains d'entre eux à la racine de votre projet pour éviter d'utiliser les balises méta ci-dessus) :

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

Total des frais généraux

Si vous retirez les commentaires, cela représente 3 Ko de HTML supplémentaire. Si vous ne prenez pas en charge les écrans d'accueil, cela représente 1,5 Ko. Si vous utilisez la compression GZIP sur votre contenu HTML, ce que tout le monde devrait faire de nos jours, il vous reste environ 634 octets de frais généraux par requête pour prendre en charge toutes les plateformes ou 446 octets sans écrans d'accueil. Personnellement, je pense qu'il vaut la peine de prendre en charge les appareils IOS, Android et Windows, mais c'est votre choix, je ne fais que vous proposer des options !

Remarque sur la situation actuelle des icônes web, des écrans splash et des paramètres.

Cette situation avec les icônes spécifiques aux fournisseurs, les écrans d'accueil et les balises spéciales pour contrôler le navigateur web ou les icônes épinglées est ridicule. Dans un monde parfait, nous utiliserions tous un fichier favicon.svg qui serait beau quelle que soit sa taille et pourrait être placé à la racine de la page. Seul FireFox supporte cela au moment où nous écrivons ces lignes (Voir CanIUse.com ).

Cependant, les icônes ne sont pas le seul paramètre de nos jours, il existe plusieurs autres paramètres spécifiques aux fournisseurs (illustrés ci-dessus) mais un fichier favicon.svg couvrirait la plupart des cas d'utilisation.

Mise à jour

Mis à jour pour inclure la nouvelle version Android/Chrome M39+ favicon/theming options. Il est intéressant de noter qu'ils ont adopté une approche similaire à celle de Microsoft, mais qu'ils utilisent un fichier JSON au lieu de XML.

Answer 4

En dehors de la page de Mathias Bynens à http://mathiasbynens.be/notes/touch-icons une autre ressource plus récente est le Favicon Cheat Sheet à l'adresse suivante https://github.com/audreyr/favicon-cheat-sheet

Answer 5

La solution la plus simple consiste à utiliser une( !) seule image PNG (en 2020).

Il suffit de l'ajouter en tête de votre document :

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

Le dernier lien est pour Apple (écran d'accueil), le second pour Android (écran d'accueil) et le premier pour le reste.

Notez que cette solution ne prend PAS en charge les "tuiles" sous Windows 8/10. Elle prend en charge les images dans les raccourcis, les signets et les onglets de navigateur.

La taille est exactement celle de l'écran d'accueil d'Android. La taille de l'icône de l'écran d'accueil Apple est de 60px(3x), donc 180px et sera réduite. Les autres plateformes utilisent l'icône de raccourci par défaut, qui sera également réduite.