Un favicon doit-il être 32x32 ou 16x16?
J'aimerais utiliser une seule image en tant que favicon standard et favicon compatible iPhone/iPad.
Est-ce possible? Une échelle PNG 72x72 compatible iPad serait-elle associée à un favicon de navigateur classique? Ou dois-je utiliser une image distincte 16x16 ou 32x32?
Pour IE, Microsoft recommande 16x16, 32x32 et 48x48 dans le fichier favicon.ico .
Pour iOS, Apple recommande des noms de fichier et des résolutions spécifiques , au plus 180x180 pour les derniers appareils exécutant iOS 8.
Android Chrome utilise principalement un manifeste et s'appuie également sur l'icône tactile Apple.
IE 10 sur Windows 8.0 requiert des images PNG et une couleur d'arrière-plan et IE 11 sur Windows 8.1 et 10 accepte plusieurs images PNG déclarées dans un fichier XML dédié appelé browserconfig.xml .
Safari pour Mac OS X El Capitan introduit une icône SVG pour les onglets épinglés .
Certaines autres plateformes recherchent des fichiers PNG avec différentes résolutions, comme l'image 96x96 pour Google TV ou l'image 228x228 pour Opera Coast .
Regardez ceci liste des images de favicon pour une référence complète.
TLDR: Ce générateur de favicon peut générer tous ces fichiers à la fois. Le générateur peut également être implémenté en tant que a WordPress plugin . Divulgation complète: je suis l'auteur de ce site.
Je ne vois aucune information à jour répertoriée ici, alors voici:
Pour répondre à cette question maintenant, 2 favicons ne le feront pas si vous voulez que votre icône ait fière allure partout. Voir les tailles ci-dessous:
16 x 16 - Taille standard pour les navigateurs
24 x 24 - Taille de site épinglé IE9 pour l'interface utilisateur
32 x 32 - IE nouvel onglet de page, bouton de la barre des tâches Windows 7+, barre latérale de la liste de lecture de Safari
48 x 48 - Site Windows
57 x 57 - iPod touch, iPhone jusqu'à 3G
60 x 60 - iPhone, retouche pour iOS7
64 x 64 - Site Windows, barre latérale de la liste des lecteurs de Safari dans HiDPI/Retina
70 x 70 - Carreau Win 8.1 Métro
72 x 72 - iPad, retouche pour iOS6
76 x 76 - iOS7
96 x 96 - GoogleTV
114 x 114 - iPhone retine retouche jusqu'à iOS6
120 x 120 - iPhone retine touch iOS7
128 x 128 - Chrome application Web Store, Android
144 x 144 - Mosaïque IE10 Metro pour site épinglé, rétine pour iPad jusqu'à iOS6
150 x 150 - Carreau Win 8.1 métropolitain
152 x 152 - iPad retina touch iOS7
196 x 196 - Android Chrome
310 x 150 - Gagnez une tuile de métro d'une largeur de 8,1
310 x 310 - Carreau Win 8.1 Metro
Je ne sais pas si/comment les navigateurs adaptent les grandes icônes, mais le W3C suggère ce qui suit1:
Le format de l'image que vous avez choisie doit être 16 x 16 pixels ou 32 x 32 pixels, en couleurs 8 bits ou 24 bits. Le format de l'image doit être PNG (norme W3C), GIF ou ICO.
1 w3c.org: Comment ajouter un favicon à votre site (brouillon en cours de développement) .
En fait, pour que votre favicon fonctionne correctement dans tous les navigateurs, vous devrez ajouter plus de 10 fichiers dans les tailles et formats appropriés.
Mon ami et moi avons créé une application rien que pour ça! vous pouvez le trouver dans faviconit.com
Nous avons fait cela, afin que les gens n’aient pas à créer toutes ces images et les balises correctes à la main, mais les ont toutes utilisées pour me faire chier!
J'espère que ça vous aide!
Vous pouvez avoir plusieurs tailles d’icônes dans le même fichier. Je crée régulièrement des favicons (fichier .ico] de 48, 32 et 16 pixels. Vous pouvez ajouter n'importe quelle image de taille que vous voulez. La question est de savoir si l’iPhone utilisera un fichier ico.
ico prend également en charge la transparence, mais je ne suis pas sûr qu'il s'agisse d'un canal alpha comme PNG; probablement plus comme GIF où il est activé ou désactivé.
Selon l'article de Wikipedia sur Favicon, Internet Explorer ne prend en charge que le format ICO pour les favicons.
Je voudrais coller avec deux icônes différentes.
Vous aurez besoin de fichiers séparés pour chaque résolution, je le crains. Il existe un très bon article sur Campaign Monitor décrivant comment ils ont créé et mis en œuvre leurs icônes pour chaque périphérique iOS:
http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/
La favicon ne doit pas obligatoirement être 16x16 ou 32x32. Vous pouvez créer un favicon 80x80 ou 100x100. Assurez-vous simplement que les deux valeurs ont la même taille. Évidemment, ne le faites pas trop grand ou trop petit, choisissez une taille raisonnable.