Je suis occupé sur un site WordPress et suis venu sur la scène pour ajouter la touche finale, étant le favicon. Je suis avant tout un développeur, donc les graphiques et les icônes ne sont pas mon point fort.

Quelles sont les meilleures pratiques lors de la création d'un favicon (en termes de tailles, etc., j'ai déjà le design)? J'aimerais pouvoir prendre en charge tous les appareils possibles, qu'il s'agisse d'un téléphone portable, de tablettes, d'écrans rétiniens, etc. De plus, je ne veux pas que l'image soit floue, alors j'ai besoin de savoir quelle densité de pixels utiliser et tout le reste.

S'il existe des applications Mac ou des outils en ligne qui le feront pour vous (et le feront correctement), ce serait également très bien. Sinon, je sais me débrouiller dans Illustrator et Photoshop.

Les bases de Favicons - Meilleure pratique pour 2013 :

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)

Et une feuille de triche "extrêmement pénible" sur les tailles / types de favicon sur GitHub.

Toujours à lire: http://www.jonathantneal.com/blog/understand-the-favicon/

Que faut-il inclure?

Le minimum

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers (196x196 should cover all modern browsers) -->
<link rel="icon" type="image/png" href="/favicon.png">

<!-- iOS & other mobile devices (ideally 180x180, at least 120x120) -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">

Pour les obsessionnels

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs)  -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers & Devices -->
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="icon" type="image/png" href="/favicon-64x64.png" sizes="64x64">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-128x128.png" sizes="128x128">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">

<!-- iOS & other mobile devices -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

<!-- Windows Tiles (optionally omitted and replaced with browserconfig.xml in root directory) -->
<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />
<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

favicon.ico

favicon.ico est le plus ancien des favicons, il a fonctionné depuis avant que beaucoup de lecteurs du livre soient nés et fonctionnent encore parfaitement de nos jours.

Microsoft recommande l' inclusion d'images de format 16x16, 32x32 et 48x48.

Le moyen standard pour définir votre favicon:

<link rel="shortcut icon" href="/favicon.ico" />

Les navigateurs vont rechercher le répertoire racine de votre site Web favicon.icoafin que vous puissiez omettre le lien. Certains navigateurs plus anciens utiliseront la valeur déclarée par défaut, favicon.icomême s'il existe une déclaration PNG de taille plus appropriée. Il peut donc être judicieux de laisser l'ICO non déclaré à la racine et de déclarer des PNG de tailles différentes.

favicon.png

HTML5 a introduit l' sizesattribut pour aider à déclarer plusieurs icônes de taille. L'utilisation de fichiers PNG spécifiques vous permet de mieux contrôler les tailles utilisées et signifie que seule l'image correcte est chargée.

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">

• www.w3.org - HTML5 - Type de lien "icône"

Les tailles que vous déclarez dépendent des appareils que vous souhaitez prendre en charge. Quelques tailles communes et peu communes:

• 32x32
• 48x48
• 64x64
• 96x96
• 128x128 icône Chrome Web Store
• 160x160 Chrome pour Android
• 192x192 Chrome pour Android
• Icône de composition abrégée Opera 195x195
• 196x196 Chrome pour Android
• 228x228 icône de la côte d'opéra

Icône Apple Touch

Les icônes de clips Web iOS sont disponibles dans un certain nombre de tailles pour différents appareils et résolutions. Vous pouvez spécifier une ou plusieurs icônes de taille. Si aucune icône de la taille voulue n’est trouvée, l’icône générique sans taille déclarée sera utilisée.

Si aucune icône n'est spécifiée à l'aide d'un élément de lien, iOS recherchera dans le répertoire racine les icônes avec le apple-touch-iconpréfixe. Les appareils iOS ne sont pas (assez étrangement) les seuls appareils à utiliser ces icônes (Android Chrome, par exemple), donc leur déclaration est l'option la plus sûre.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

• Directives d'interface utilisateur iOS - Tailles des icônes

• Bibliothèque de développement iOS - Spécification d'une icône de page Web pour Web Clip

Tuiles Windows

Les vignettes sont utilisées lorsque vous épinglez un site Web sur l'écran de démarrage de Windows ou de Windows Phone et que vous disposez de plusieurs tailles.

<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

Les tailles d'image recommandées sont plus grandes que ne le suggèrent les noms de ces images. Voici les tailles recommandées sur microsoft.com

                   | Minimum   | Recommended
Small  | 70 x 70   | 56 x 56   | 128 x 128
Medium | 150 x 150 | 120 x 120 | 270 x 270
Wide   | 310 x 150 | 248 x 120 | 558 x 270
Large  | 310 x 310 | 248 x 248 | 558 x 558

Couleur et titre du carreau

Le comportement par défaut des mosaïques consiste à extraire le titre de la mosaïque de la <title>balise et à respecter toute transparence des images de mosaïque, en indiquant la couleur d'arrière-plan. Vous pouvez personnaliser la couleur et le titre en utilisant ces balises méta:

<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />

browserconfig.xml

Toutes les msapplicationbalises méta peuvent être supprimées et remplacées par un fichier XML dans le dossier racine appelé browserconfig.xml. Le fichier XML devrait ressembler à ceci:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/tile-small.png"/>
      <square150x150logo src="images/tile-medium.png"/>
      <wide310x150logo src="images/tile-wide.png"/>
      <square310x310logo src="images/tile-large.png"/>
      <TileColor>#582686</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Autres lectures et ressources

• Aide-mémoire Favicon

• Favicons, icônes tactiles, icônes de mosaïque, etc. De quoi avez-vous besoin? - Écrit sous forme de questionnaire mais contenant de nombreuses informations utiles (et vous pouvez simplement le lire sous forme d'article, oubliez que c'est un questionnaire)

• Le manuel d'icônes

• ImageMagick - Outil de ligne de commande utile pour convertir des images.

• RealFaviconGenerator.net - Générateur de favicon complet.

• FAVIC-O-MATIC - Générateur de favicon complet avec des formats de sortie facilement personnalisables.

Cet outil est un super gain de temps. Essaye le! Il s'occupe de tout pour toi.

Téléchargez votre image à quelque chose autour de 800px x 800px afin que ce soit agréable et net.

http://realfavicongenerator.net/

Ajoutez également cette balise meta afin de pouvoir nommer votre icône si des sauvegardes sont effectuées sur votre appareil iOS.

<meta name="apple-mobile-web-app-title" content="Website Name">

J'espère que ça t'as aidé!

Utilisez cette tâche GRUNT pour générer toutes les variantes possibles:

https://github.com/gleero/grunt-favicons

Génère tous les types et tailles connus d’icônes à partir d’images PNG. Utilise ImageMagick.

Entrée: logo carré en png. Vous pouvez également rester à proximité des fichiers source avec le préfixe de résolution, par exemple source.16x16.png.

Sortie:

favicon.ico (16x16, 32x32, 48x48) — desktop browsers, address bar, tabs, safari reading list, non-retina iPhone, windows 7+ taskbar, windows desktop;
favicon.png (64x64) — modern browsers;
apple-touch-icon.png (57x57) — iPhone non-retina, Android 2.1+;
apple-touch-icon-60x60.png (60x60) — iPhone iOS7+;
apple-touch-icon-72x72.png (72x72) — iPad non-retina;
apple-touch-icon-76x76.png (76x76) — iPad non-retina iOS 7;
apple-touch-icon-114x114.png (114x114) — iPhone retina, iOS 6 and lower;
apple-touch-icon-120x120.png (120x120) — iPhone retina, iOS 7 and higher;
apple-touch-icon-144x144.png (144x144) — iPad retina;
apple-touch-icon-152x152.png (152x152) — iPad retina iOS 7;
windows-tile-144x144.png (144x144) — Windows 8 tile;
coast-icon-228x228.png (228x228) - Coast browser;
firefox-icon-16x16.png (16x16) - Firefox on Android / Windows;
firefox-icon-30x30.png (30x30) - Firefox OS;
firefox-icon-32x32.png (32x32) - Firefox on Android / Windows;
firefox-icon-48x48.png (48x48) - Firefox on Android / Windows;
firefox-icon-60x60.png (60x60) - Firefox OS;
firefox-icon-64x64.png (64x64) - Firefox on Android / Windows;
firefox-icon-90x90.png (90x90) - Firefox OS;
firefox-icon-120x120.png (120x120) - Firefox OS;
firefox-icon-128x128.png (128x128) - Firefox on Android / Windows;
firefox-icon-256x256.png (256x256) - Firefox on Android / Windows;
homescreen-196x196.png (196x196) - Android Homescreen.

Ajoute des modifications au fichier HTML.

http://faviconit.com

créera environ 15 tailles d'icônes différentes pour tous les périphériques à partir d'un fichier PNG haute résolution.

Moi aussi, je cherchais une solution favicon et je ne voulais pas faire appel à des services Web tiers. Je ne pouvais trouver aucune solution générique qui fonctionnerait comme une étape de construction simple, j'ai donc créé faviconbuild . Il s’appuie sur ImageMagick pour vous permettre de télécharger la dernière version de celle-ci pour votre système ou d’utiliser certaines versions fournies dans mes versions .

Je l'ai publié sous licence MIT pour que tout le monde soit libre de l'utiliser à des fins commerciales ou personnelles, ou tout simplement de s'en inspirer. Si vous trouvez des bugs ou souhaitez l'étendre, n'hésitez pas à vous impliquer .

Je mettrai à jour la page du projet avec des informations plus détaillées, mais elle dispose déjà d'un menu d'aide très pratique et standard et fonctionne sous Unix, Mac et Windows.

Vous exécutez simplement le script .bat ou .sh dans votre terminal.

ex pour Windows:

faviconbuild.bat -h

ou pour Unix / Mac (ou Windows si vous utilisez Cygwin):

faviconbuild.sh -h

Cela vous donnera les informations de version avec les options disponibles. Le script est conçu pour prendre une image d'entrée et générer toutes les différentes images requises, ainsi que le balisage HTML à inclure sur votre site Web.

Voici un exemple d'utilisation de ce logiciel dans l'un de mes projets:

./faviconbuild/faviconbuild.sh -i ./source.png

J'ai simplement placé le dossier faviconbuild dans un dossier spécifique à un projet afin de ne pas avoir à toucher aux fichiers du projet lui-même et à côté de celui-ci, j'ai placé mon source.png. Le comportement par défaut du script consiste à tout placer dans un dossier de construction imbriqué gitignored afin qu'il ne soit pas en conflit avec le projet si vous utilisez git.

Si quelque chose me manque, veuillez soumettre une demande de fonctionnalité.

J'ai aussi un article de blog avec plus d'informations.

J'espère que vous trouvez ça utile.

Il y a beaucoup d'informations utiles ici concernant les tailles et générateurs de favicon.

Je peux ajouter à la discussion en expliquant les besoins de conception des différentes tailles.

Oui, les tailles d'icône, de symbole et de logo peuvent être basées sur le même art, mais chacune doit être rendue spécifiquement à cette taille pour apparaître de la manière la plus précise (je dis que les générateurs automatiques ne gèrent pas bien le crénelage et les 16 pixels et l’image générée automatiquement ne sera pas optimisée pour la taille 128 px si vous avez commencé plus petit.

Dessinez votre art à 128 pixels ou dans n'importe quel format carré de grande taille, en utilisant toutes les astuces en 3D que vous souhaitez. Exportez les différentes icônes de taille, une à la fois, en examinant le résultat et en ajustant le masque pour fonctionner au mieux à cette taille.

Pour le format 16 x 16, je vais créer une grille de carrés 16 x 16 et les colorier individuellement pour avoir le plus grand contrôle de la sortie.