Je voudrais utiliser une seule image à la fois comme favicon régulier et favicon compatible iPhone/iPad.
Est-ce possible ? Est-ce qu'une image PNG de 72×72 adaptée à l'iPad sera mise à l'échelle si elle est liée comme favicon de navigateur régulier ? Ou dois-je utiliser une image séparée de 16×16 ou 32×32 ?
Mise à jour pour 2020 : En restant fidèle à la question initiale des icônes 16x16 contre 32x32 : la recommandation actuelle devrait être de fournir une icône 32x32, en sautant complètement la taille 16x16. Tous les navigateurs et appareils actuels prennent en charge les icônes 32x32. L'icône sera régulièrement agrandie jusqu'à 192x192 selon l'environnement (en supposant qu'il n'y a pas de tailles plus grandes disponibles ou que le système ne les reconnaît pas). L'agrandissement à partir d'une très faible résolution a un effet visible, il vaut donc mieux se cantonner au 32x32 comme ligne de base la plus petite.
Pour IE, Microsoft recommande 16x16, 32x32 et 48x48 regroupés dans le fichier favicon.ico.
Pour iOS, Apple recommande des noms de fichiers et des résolutions spécifiques, au maximum 180x180 pour les appareils les plus récents fonctionnant sous iOS 8.
Android Chrome utilise principalement un manifeste et dépend également de l'icône tactile Apple.
IE 10 sur Windows 8.0 nécessite 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.
D'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.
Jetez un œil à cette liste d'icônes favicon pour une référence complète.
TLDR : Ce générateur de favicon peut générer tous ces fichiers en une seule fois. Le générateur peut également être implémenté en tant que plugin WordPress. Divulgation complète : je suis l'auteur de ce site.
Je ne suis pas sûr si / comment les navigateurs mettent à l'échelle les grandes icônes, mais le W3C suggère ce qui suit1 :
Le format de l'image que vous avez choisi doit être de 16x16 pixels ou 32x32 pixels, en utilisant soit des couleurs 8 bits soit des couleurs 24 bits. Le format de l'image doit être l'un des suivants : PNG (une norme du W3C), GIF ou ICO.
1 w3c.org : Comment ajouter une icône de site (Projet de développement).
En 2006, j'étais arrivé à des conclusions similaires (dans "Favicon Primer" (Avr 2006; par hakre)) mais je ne connaissais pas ce document de 2005 du W3C (oui, la recherche et la lecture aident :)). Merci pour le résumé. À l'époque, j'avais écrit and et non or, mais c'était aussi à propos des couleurs 4 bits.
Ce modèle devrait être remplacé par le standard html5 maintenant. Il n'a pas de limitation sur la taille de l'icône et a fourni un exemple avec une icône de 32768x32768.
En fait, pour que votre favicon fonctionne correctement dans tous les navigateurs, vous devrez ajouter plus de 10 fichiers dans les tailles et formats corrects.
Mon ami et moi avons créé une application juste pour cela! vous pouvez la trouver sur faviconit.com
Nous avons fait cela afin que les gens n'aient pas à créer toutes ces images et les balises correctes à la main, créer toutes ces images utilisées pour m'ennuyer beaucoup!
Vous pouvez avoir plusieurs tailles d'icônes dans le même fichier. Je crée régulièrement des favicons (.ico) qui font 48, 32 et 16 pixels. Vous pouvez ajouter n'importe quelle taille d'image que vous voulez. La question est, l'iPhone utilisera-t-il un fichier ico ?
Le ico prend également en charge la transparence, mais je ne suis pas sûr s'il s'agit d'un canal alpha comme le PNG; probablement plus comme le GIF où c'est activé ou désactivé.
Je crois que XP et versions ultérieures prennent en charge un format similaire au PNG (PNG lui-même?) pour les images RGBA. egressive.com/tutorial/… montre comment vous pouvez utiliser GIMP pour inclure de telles images dans un fichier .ico.
ICO utilise un canal alpha de 1 bit tandis que le PNG en comporte 8 comme pour les autres canaux. ICO suffira pour les icônes simples, mais dans certains cas, le PNG sera plus désirable en raison de cette différence.
J'ai récemment lu un bon tutoriel à ce sujet, vous pouvez le trouver ici:
http://www.onextrapixel.com/2010/10/06/pixel-art-create-a-better-favicon-for-your-website/
Ils montrent également une manière de créer un favicon multi-résolution qui pourrait convenir à votre cas.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
