favicon.png vs favicon.ico – pourquoi devrais-je utiliser PNG au lieu de ICO?

Outre le fait que le format d’image PNG est plus courant, existe-t-il une raison technique de privilégier favicon.png ou favicon.ico?

Je supporte les navigateurs modernes qui supportent tous les icons préférées PNG.

Réponse remplacée (et transformé Community Wiki) en raison de nombreuses mises à jour et notes de divers autres sur ce sujet:

  • Les ICO et les PNG permettent tous deux une transparence totale basée sur le canal alpha
  • ICO permet la compatibilité ascendante avec les anciens navigateurs (par exemple, IE6)
  • PNG a probablement un support d’outillage plus large pour la transparence, mais vous pouvez également trouver des outils pour créer des ICO de canal alpha, tels que l’ outil Dynamic Drive et le plug – in Photoshop mentionné par @mercator.

N’hésitez pas à consulter les autres réponses ici pour plus de détails.

Tous les navigateurs modernes (testés avec Chrome 4, Firefox 3.5, IE8, Opera 10 et Safari 4) demanderont toujours un favicon.ico sauf si vous avez spécifié une icône de raccourci via . Donc, si vous n’en spécifiez pas explicitement un, il est préférable de toujours avoir un fichier favicon.ico pour éviter un 404. Yahoo! suggère que vous le rendre petit et mis en cache.

Et vous ne devez pas non plus choisir un format PNG uniquement pour la transparence alpha. Les fichiers ICO prennent en charge la transparence alpha (couleurs 32 bits), même si pratiquement aucun outil ne vous permet de les créer. J’utilise régulièrement FavIcon Generator de Dynamic Drive pour créer des fichiers favicon.ico avec transparence alpha. C’est le seul outil en ligne que je connaisse qui puisse le faire.

Il existe également un plug-in Photoshop gratuit qui peut les créer.

Les fichiers .png sont sympas, mais les fichiers .ico offrent également une transparence sur les canaux alpha, en plus de la rétrocompatibilité.

Jetez un coup d’œil sur le type utilisé par StackOverflow (notez qu’il est transparent):

   

Le thème Apple-Itouch est destiné aux utilisateurs d’iPhone qui créent un raccourci vers un site Web.

L’avantage théorique des fichiers * .ico est qu’ils sont des conteneurs pouvant contenir plus d’une icône. Vous pouvez par exemple stocker une image avec un canal alpha et une version 16 couleurs pour les systèmes hérités, ou vous pouvez append des icons 32×32 et 48×48 (ce qui devrait être le cas lorsque vous faites glisser un lien vers l’explorateur Windows).

Cette bonne idée a toutefois tendance à se heurter aux implémentations des navigateurs.

Le format PNG présente deux avantages: il est plus petit et plus largement utilisé et pris en charge (sauf dans le cas des favicons). Comme mentionné précédemment, ICO, peut avoir plusieurs icons de taille, ce qui est utile pour les applications de bureau, mais pas trop pour les sites Web. Je vous recommande de mettre un favicon.ico dans la racine de votre application. Si vous avez access à la page Head of your website, utilisez la balise pour pointer vers un fichier png. Ainsi, un navigateur plus ancien affichera le favicon.ico et les plus récents le png.

Pour créer des fichiers Png et Icon, je recommanderais The Gimp .

Certains outils sociaux tels que Google+ utilisent une méthode simple pour obtenir un favicon pour les liens externes, en récupérant http://your.domainname.com/favicon.ico

Comme ils ne récupèrent pas le contenu HTML, la ne fonctionnera pas. Dans ce cas, vous souhaiterez peut-être utiliser une règle mod_rewrite ou simplement placer le fichier à l’emplacement par défaut.

Un ico peut être un png.

Plus précisément, vous pouvez stocker un ou plusieurs png dans ce format de conteneur minimal, au lieu du bitmap + alpha habituel que tout le monde associe fortement à ico.

Le support est ancien, apparaissant dans Windows Vista (2007) et est bien pris en charge par les navigateurs, mais pas nécessairement par un logiciel d’édition d’icons.

Tout png valide (entier, y compris l’en-tête) peut être ajouté par un en- tête ico de 6 octets et un répertoire d’image de 16 octets.
GIMP a un support natif. Exportez simplement sous ico et cochez “Compressed (PNG)”.

Évitez le format PNG si vous voulez une compatibilité IE6 fiable.