Favicons - Meilleures pratiques
J'essaie de comprendre toutes ces tailles et formats nécessaires aux favicons, aux icônes tactiles et désormais aux icônes mosaïque.
J'ai lu ce message: http://www.jonathantneal.com/blog/understand-the-favicon raisonnablement bon 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 cette base 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 je manque quelque chose?
Je ne sais pas si cela couvrira IE 10?
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, ici est une FAQ
Il existe un certain nombre d'icônes différentes et même d'écrans de démarrage que vous pouvez définir pour différents appareils. Cette réponse explique comment les soutenir tous.
Voici quelques extraits que j'ai utilisés avec des liens pertinents vers l'endroit où j'ai recueilli les informations. Voir mon blog pour plus d'informations et pour plus d'informations sur le modèle de projet ASP.NET MVC Boilerplate avec tout cela intégré (y compris des exemples de fichiers image).
Ajoutez le balisage suivant à votre tête html. Les sections commentées sont entièrement facultatives. Les sections non commentées sont recommandées pour couvrir tous les usages des icônes. N'ayez pas peur, surtout s'il s'agit de 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="/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">
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 dans le projet (notez que les noms de ces fichiers sont importants si vous décidez d'en placer certains à 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 supprimez les commentaires, il s'agit de 3 Ko de code HTML supplémentaire, si vous ne supportez pas les écrans de démarrage de 1,5 Ko. Si vous utilisez la compression GZIP sur votre contenu HTML, ce que tout le monde devrait faire de nos jours, cela vous laisse environ 634 octets de temps système par demande pour prendre en charge toutes les plateformes ou 446 octets sans écrans de démarrage. Personnellement, je pense que cela vaut la peine de prendre en charge les appareils IOS, Android et Windows, mais que vous le souhaitez, je ne fais que donner les options!
Note latérale sur l'icône Web actuelle/Écran de démarrage/Situation des paramètres
Cette situation avec des icônes spécifiques au fournisseur, des écrans de démarrage et des 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 pourrait avoir une belle apparence, quelle que soit sa taille, et qui pourrait être placé à la racine de la page. Seul FireFox le prend en charge au moment de la rédaction (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 au fournisseur (présentés ci-dessus), mais un fichier favicon.svg couvrirait la plupart des cas d'utilisation.
Mettre à jour
Mise à jour pour inclure la nouvelle version Android/Chrome M39 + options de favicon/thèmes. Fait intéressant, ils ont adopté une approche similaire à celle de Microsoft, mais utilisent un fichier JSON au lieu de XML.
En fait, je me posais la même question et essayais de rechercher des projets simples qui pourraient être intégrés dans une étape de construction ou simplement simplifier la création des actifs et du balisage requis.
Je n'ai rien trouvé qui réponde à mes exigences. J'ai donc créé faviconbuild et l'ai publié sous la licence MIT .
Le but de ce projet est de créer un utilitaire multi-plateformes centralisé, maintenable et exécutable localement pour la création de favicons et le balisage de support. Il exploite la puissance de Imagemagick . Vous devez donc le télécharger pour votre plate-forme ou utiliser ceux que je fournis dans mes releases . N'hésitez pas à utiliser ceci dans des projets commerciaux ou personnels, contribuer, soumettre des demandes de fonctionnalités, ou simplement l'utiliser comme source d'inspiration pour vos propres utilitaires.
Le projet consiste en un fichier de commandes pour Windows et un script bash pour Unix/Mac (ou Windows via Cygwin). Vous pouvez obtenir une liste complète des options prises en charge à partir de l'option d'aide interne -h ou --help.
ex:
./faviconbuild.sh -h
Les deux scripts analysent un simple fichier text que vous pouvez également remplacer par l'option -p ou --parsed. Le fichier est en principe juste un modèle de commandes à exécuter pour vous permettre de personnaliser plus facilement la sortie si nécessaire.
J'ai également publié un article blog sur le développement et un mini tutoriel sur les scripts bash/batch.
La solution la plus simple consiste à utiliser une (!) Image PNG (en 2018).
Ajoutez simplement ceci à la tête de votre document:
<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">
Le dernier lien concerne Apple (écran d'accueil), le second Android (écran d'accueil) et le premier les autres.
Notez que cette solution ne prend PAS en charge les "tuiles" dans Windows 8/10. Il prend en charge les images dans les raccourcis, les signets et les onglets du navigateur.