Les icônes favorites - les Meilleures pratiques

Je vais essayer d'obtenir ma tête autour de tous ces différents formats qui sont nécessaires pour les Icônes, les icônes et maintenant Tuile icônes trop.

J'ai lu ce post:
http://www.jonathantneal.com/blog/understand-the-favicon
mais je suis encore un peu brumeux sur exactement ce qui semble globalement bonne sur tous les appareils et navigateurs >= IE8.

Je pense que je doit créer les suivantes:

ICO

favicon.ico (32x32)

PNG

favicon.png (96x96)

Tuile Icône

tileicon.png (144x144)

Icône De La Touche Apple

apple-touch-icon-précomposé.png (152x152)
basé sur ce https://github.com/h5bp/html5-boilerplate/issues/1367

...et ensuite utiliser ce code pour servir 'em up?

<link  href="path/to/touchicon.png">
<link  href="path/to/favicon.png">
<!--[if IE]><link  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">

Ai-je raté quelque chose?

Je ne suis pas clair si cela permettra de couvrir IE 10?

Pour la meilleure réponse, prendre un coup d'oeil sur le site web d'Apple: Développeurs d'Apple
Le site web d'apple à l'époque de l'écriture est incomplète et manque d'information sur les images d'écran de démarrage et peut-être plus.
WOW - ce que beaucoup de détails ici. Si vous voulez un concise rapide facile réponse voir stackoverflow.com/a/45301651/661584 pourrait aider. merci

InformationsquelleAutor Leon | 2013-09-26

apple-touch-icon favicon

109

Favicon est plus complexe que ce qu'il semble. Il y a 10 ans, favicon.ico était le seul besoin. Puis, il y a l'icône de la touche, puis plusieurs icônes des cotisations pour les différents appareils iOS résolutions d'écran, puis il y avait la vignette l'icône de Windows...

Des réponses ici sont très complets et écrasante (tout cela, seulement un favicon?). Pourtant, ils ne parviennent pas à indiquer que le 310x310 vignette l'icône de Windows est recommandé d'être 558x558. Et depuis qu'ils ont été écrits il y a quelques mois, ils ne font pas mention de la récente manifeste pour Android Chrome M39 ou la onglet épinglé SVG icône de Safari sur OS X El Capitan.

Per-plate-forme de conception est un autre difficiles, mais négligé sujet. Par exemple, favicon sont souvent transparents. Mais iOS ne prend pas en charge la transparence (pour un exemple de cela, comparer les DONC, appuyez sur l'icône et ce que vous obtenez lorsque vous ajoutez DONC à votre iPhone à l'écran d'accueil).

Pour ces raisons, ce que je considère comme la meilleure pratique pour le favicon est à pas le créer manuellement. Au lieu de cela, utilisez un outil permettant d'automatiser l'ensemble du processus et faire respecter plate-forme de lignes directrices.

Je vous conseille d'utiliser RealFaviconGenerator. Il génère toutes les images et le code HTML vous avez besoin pour faire le travail:
- favicon.ico et des icônes au format PNG pour les navigateurs de bureau
- Icône de la touche Apple pour les appareils iOS et Android
- Windows 8 les tuiles
- Onglet épinglé icône de Safari sur OS X El Capitan
Par exemple, il ne génère pas seulement le msapplication-TileImage image et de balisage, mais aussi la plus récente browserconfig.xml fichier pris en charge par IE11. Il a également été mis à jour il y a quelques mois à l'appui de l'Android de google Chrome manifeste et Safari OS X El Capitan.

Divulgation complète: je suis l'auteur de ce site.
- J'ai simplement utilisé votre site, très agréable. Vous devez inclure le msapplication-config balise meta pour quand il n'est pas dans le répertoire de racine: <meta name="msapplication-config" content="../path/to/browserconfig.xml">
- Merci! Sur le chemin de la browserconfig.xml: c'est déjà inclus dans le code généré, n'est-ce pas?
- Le fichier est généré, mais la ligne de code n'est pas. J'ai juste essayé. Merci pour l'excellent service par la voie.
- Merci pour les commentaires 🙂 Tu veux dire la ligne qui déclare browserconfig.xml?
- Oui, la ligne <meta name="msapplication-config" content="/browserconfig.xml"> était absent de l'ensemble des autres meta lignes de vos services fournis - alors que le fichier lui-même (browserconfig.xml) a été fournie dans favicons.zip.
- Ceci est fait dans le but. browserconfig.xml n'a pas besoin d'être déclarée en tant qu'il est à la racine du site. IE cherche automatiquement. Dans les autres cas (lorsque vous entrez un chemin d'accès spécifique dans les options), la déclaration est produite.
- OK, je ne savais pas que. Et j'ai été confondu par votre commentaire précédent "Sur le chemin de la browserconfig.xml: c'est déjà inclus dans le code généré, n'est-ce pas?" -- peut-être une mention (près le code qui est généré) de ce fait que la ligne n'est pas nécessaire pourrait être utile à d'autres personnes? De toute façon, merci encore!
- Bon point. J'ai peur que peut surcharger la page de résultat. Mais je me rends compte il n'y a pas d'entrée dans la FAQ, qui n'est pas normal. Je vais l'ajouter.
- Je comprends votre commentaire, vraiment. Quand je relis ma réponse, moi aussi j'ai été surpris par sa crudité. Je suis habitué à des réponses plus complètes (voir par exemple stackoverflow.com/questions/2268204/favicon-dimensions/...). Puis, je me suis rappelé ce que j'avais à l'esprit lors de la rédaction de cette réponse. Je viens de le mettre à jour. Voulez-vous re-lire et me dire si cela fait sens pour vous?
- mieux maintenant. Merci pour la compréhension de ce que j'étais en pointant sur (certaines personnes ont sauté dans mon visage à la place)... et merci pour la mise à jour de votre réponse. +1 (aparté: bel outil que vous avez créé il y a!)
- Non, merci, vraiment. Avec le recul, mon premier coup de feu n'a pas été bon du tout.
- Excellent outil! Mais, je suis absent de Android du navigateur Chrome et iOS (Safari) navigateur ainsi. Pour ajouter à l'écran d'accueil Fonctionne bien, mais l'affichage dans le navigateur qui ne marche pas.
- Certainement pas normal 🙁 Pourriez-vous exécuter le test de compatibilité (realfavicongenerator.net/favicon_compatibility_test) avec ces navigateurs?
- Juste utilisé votre outil de ... grands. Il y a quelque chose d'étrange avec Android et Apple png, ils ne parviennent pas à être comprimé par PNG Gantelet ... des idées?
- Je ne sais pas PNG Gantelet. Mais si vous demandez, PNG sont déjà compressés par PNGQuant. En outre, cela pourrait être dû à la profondeur de couleur, voir github.com/RealFaviconGenerator/realfavicongenerator/issues/157 .
- Qui pourrait expliquer le problème - j'ai ajouté un fond uni de couleur. J'ai eu de bonnes taille du fichier améliorations à l'aide de PNG Gantelet sur vos versions f.y.i si vous êtes intéressé. Il est recommandé par Scott, Hanselman
- Puis-je utiliser la librairie GD pour générer tous les différents types de favicons?
- Je ne sais vraiment pas GD donc je ne peux pas dire pour sûr. Je pense que vous serez limité dans les effets que vous pourriez voulez générer.
- Puis-je aller avec imagemagick? Est-elle largement pris en charge?
- Il n'affecte pas inclure tous les icône de l'rendu avobe la fois le contenu? il y a plusieurs demande si toutes les icônes de la variation de la section de la tête.
- Oui, il y a un problème connu concernant Firefox (realfavicongenerator.net/faq#troubleshootings) C'est une des raisons pour lesquelles le paquet généré par la RFG a été réduit.
- WOW ! beaucoup de bruits, beaucoup de détails. Pourquoi ne pas laisser quelqu'un d'autre faire le travail pour vous. voir ma réponse stackoverflow.com/a/45301651/661584 beaucoup plus facile. pourrait aider. merci
- Avez-vous lu ma réponse? C'est exactement la même que la vôtre, un peu plus élaborée. Je suis l'auteur de RealFaviconGenerator par la route 🙂
- Grand - eh bien, merci beaucoup. Je voulais juste mettre en évidence votre outil rapidement et facilement - j'ai trouvé moi-même reasing beaucoup de déchets sur sur DONC, je voulais juste pointer directement vers elle c'est tout. Je pense que c'est top notch. Merci. ! +1
InformationsquelleAutor philippe_b

Ici, c'est la pleine (que je sache) exemple de favicon pour mobile et tablette:

<!-- non-retina iPhone pre iOS 7 -->
<link  href="icon57.png" sizes="57x57">
<!-- non-retina iPad pre iOS 7 -->
<link  href="icon72.png" sizes="72x72">
<!-- non-retina iPad iOS 7 -->
<link  href="icon76.png" sizes="76x76">
<!-- retina iPhone pre iOS 7 -->
<link  href="icon114.png" sizes="114x114">
<!-- retina iPhone iOS 7 -->
<link  href="icon120.png" sizes="120x120">
<!-- retina iPad pre iOS 7 -->
<link  href="icon144.png" sizes="144x144">
<!-- retina iPad iOS 7 -->
<link  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

Oh-grand - nouveaux pour IE11 trop! Merci pour l'affichage de l'info.
Oh merde - chaque entreprise fait maintenant de leur propre substance, et nous devons inclure des tonnes d'ailleurs inutile de code. 😉
Mais cela ne comprend pas "apple-touch-icon-précomposé.png" et "apple-touch-icon.png"
+1 Mais je ne sais pas si c'est les meilleures pratiques, si elle est complète. Pour la meilleure pratique (à mon humble avis) et plus pratique, voir l'excellente triche proposé par Neil Robertson ci-dessous.
Toute chance vous pourriez mettre à jour la réponse de sorte qu'il fonctionne avec le 6 et 6+ ainsi? Ou le code ci-dessus fonctionne?
voir ma réponse stackoverflow.com/a/45301651/661584 beaucoup plus facile. pourrait aider. merci

InformationsquelleAutor user2477225

Il y a un certain nombre de différentes icônes et même les écrans de démarrage que vous pouvez définir pour les différents appareils. Cette réponse passe par la façon de soutenir tous.

Voici quelques extraits que j'ai utilisé avec des liens pertinents à l'endroit où j'ai rassemblé les informations. Voir mon blog pour plus d'informations et plus d'informations sur le ASP.NET MVC Réutilisable modèle de projet avec tout ce qui se construit dans le droit de la boîte (y Compris des exemples de fichiers image).

Ajouter le suivant mark-up dans votre code html tête. Le commentaire sur les articles sont entièrement facultatives. Alors que le décommenté les sections sont recommandés pour couvrir toutes icône usages. N'ayez pas peur, plus si c'est 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  href="favicon.ico">-->
<!-- favicon-96x96.png - For Google TV. -->
<link  type="image/png" href="/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link  type="image/png" href="/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link  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  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  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  sizes="57x57" href="/content/images/apple-touch-icon-57x57.png">
<!-- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 -->
<link  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  sizes="72x72" href="/content/images/apple-touch-icon-72x72.png">
<!-- apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 -->
<link  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  sizes="60x60" href="/content/images/apple-touch-icon-60x60.png">
<!-- apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS = 7 -->
<link  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  sizes="76x76" href="/content/images/apple-touch-icon-76x76.png">
<!-- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 -->
<link  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  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 
      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 
      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 
      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 
      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 
      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 
      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 
      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 browserconfig.xml fichier. 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 manifeste.fichier 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 de le mettre à la racine de votre projet afin d'éviter à l'aide de la meta tags):

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 Coûts Indirects

Si vous prenez les commentaires c'est 3KB de HTML supplémentaire, si vous ne supportez pas les écrans de démarrage qui est de 1,5 KO. Si vous êtes en utilisant la compression GZIP sur votre contenu HTML, dont tout le monde devrait être en train de faire ces jours-ci, que vous laisse avec environ 634 Octets de surcharge par demande de soutenir toutes les plates-formes ou 446 Octets sans les écrans de démarrage. Personnellement, je pense que sa vaut le coup pour soutenir IOS, Android et les périphériques Windows, mais c'est votre choix, je suis juste de donner les options!

Côté Remarque À Propos De L'Actuel Icône Web/Écran De Démarrage/Paramètres De La Situation

Cette situation avec le fournisseur des icônes spécifiques, des écrans de démarrage et de balises spéciales pour contrôler le navigateur web ou épinglé icônes est ridicule. Dans un monde parfait, nous sommes tous d'utiliser un favicon.fichier svg qui pourrait ressembler à n'importe quelle taille et peut être placé à la racine de la page. Seulement FireFox prend en charge au moment de l'écriture (Voir CanIUse.com).

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

Mise à jour

Mis à jour pour inclure les nouveaux Android/Chrome version M39+ favicon/thématique options. Fait intéressant, ils ont disparu avec une approche similaire à Microsoft, mais sont à l'aide d'un fichier JSON au lieu de XML.

C'en est trop. (Pas votre réponse, mais le fait que les éditeurs de navigateurs ont tellement exigences :)).
Tout à fait d'accord, c'est un drôle de situation. svg favicons permettrait de résoudre 90% du problème.
voir ma réponse stackoverflow.com/a/45301651/661584 beaucoup plus facile. pourrait aider. merci

InformationsquelleAutor Muhammad Rehan Saeed

1

En fait j'ai été de me poser la même question et a essayé de regarder pour tous les projets simples qui peuvent être intégrés dans une étape de génération ou tout simplement de simplifier la création de l'actif et du balisage nécessaire.

Je n'ai pas trouver quelque chose qui répondait à mes attentes et j'ai donc créé faviconbuild et publié sous le Licence MIT.

Le but de ce projet est de créer une centrale, maintenable, et localement praticable de la croix-plate-forme de l'utilitaire à la construction de l'icone et le soutien de balisage. Il tire parti de la puissance de Imagemagick de sorte que vous devez télécharger pour votre plate-forme ou de l'utilisation de celles-je fournir à mon les communiqués de. N'hésitez pas à utiliser cette commerciale ou de projets personnels, de contribuer, à la soumettre de demandes de fonctionnalités, ou tout simplement de l'utiliser comme source d'inspiration pour vos propres utilitaires.

Le projet consiste en un fichier batch 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'intérieur de l'aide de l'option -h ou --help.

ex:
```
./faviconbuild.sh -h
```
Les deux scripts analyser un simple fichier texte que vous pouvez également remplacer avec l'option-p ou --analysé option. Le fichier est fondamentalement juste un modèle de commandes à exécuter de sorte que vous pouvez personnaliser plus facilement la sortie si nécessaire.

J'ai aussi publié un post de blog sur le développement et comme un mini tutoriel sur bash/lot de script.

InformationsquelleAutor Matthew Sanders
0

La solution la plus simple est d'utiliser une(!) PNG image (en 2018).

Simplement ajouter ceci à la tête de votre document:
```
<link  type="image/png" href="/img/icon-196x196.png">
<link  sizes="196x196" href="/img/icon-196x196.png">
<link  href="/img/icon-196x196.png">
```
Le dernier lien est pour Apple (écran d'accueil), le second pour Android (écran d'accueil) et la première pour le reste.

Noter que cette solution ne prend PAS en charge les "tuiles" dans Windows 8/10. Il prend en charge les images dans des raccourcis, des signets et un navigateur onglets.
- Je me demandais où l'196 taille de pixel vient de. C'est qu'une spécification pour un périphérique spécifique ou à une norme?
InformationsquelleAutor JoostS

Vous devez vous connecter pour publier un commentaire.