favicon.png vs favicon.ico - pourquoi devrais-je utiliser le format PNG au lieu de ICO?
Outre le fait que PNG est un format d'image plus répandu, existe-t-il une raison technique de préférer favicon.png par rapport à favicon.ico?
Je prends en charge les navigateurs modernes qui prennent tous en charge les icônes préférées de PNG.
Réponse remplacée (et transformé en Wiki de la communauté) en raison de nombreuses mises à jour et notes de divers autres dans ce sujet:
- Les ICO et les PNG autorisent une transparence totale basée sur le canal alpha
- ICO permet une compatibilité ascendante avec les navigateurs plus anciens (par exemple, IE6).
- PNG prend probablement en charge des outils plus larges pour la transparence, mais vous pouvez également trouver des outils pour créer des ICO à canal alpha, tels que outil Dynamic Drive et plugin 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 <link>. Donc, si vous n'en spécifiez pas explicitement un, il est préférable de toujours avoir un fichier favicon.ico, afin d'éviter un fichier 404. Yahoo! Vous suggère de le rendre petit et de le mettre en cache.
Et vous n'avez pas non plus besoin d'un PNG pour la transparence alpha. Les fichiers ICO supportent parfaitement la transparence alpha (c'est-à-dire les couleurs 32 bits), bien qu'aucun outil ne vous permette de les créer. J'utilise régulièrement FavIcon Generator de Dynamic Drive pour créer des fichiers favicon.ico avec une 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 gentils, mais les fichiers .ico offrent également une transparence alpha, plus ils vous offrent une compatibilité ascendante.
Regardez quel type StackOverflow utilise par exemple (notez qu'il est transparent):
<link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico">
<link rel="Apple-touch-icon" href="http://sstatic.net/so/Apple-touch-icon.png">
Le truc 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’il s’agit de conteneurs pouvant contenir plusieurs icônes. 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 ajouter des icônes 32x32 et 48x48 (ce qui devrait être le cas lorsque vous faites glisser un lien vers l'Explorateur Windows).
Cependant, cette bonne idée a tendance à se heurter aux implémentations du navigateur.
Le format PNG présente deux avantages: sa taille réduite et son utilisation et son support plus répandus (sauf dans le cas de favicons). Comme mentionné précédemment, ICO peut avoir plusieurs icônes 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 à la racine de votre application. Si vous avez accès aux pages Head of your website, utilisez la balise pour pointer vers un fichier png. Donc, le navigateur plus ancien montrera les favicon.ico et les plus récents les 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 recherchant http://votre.nomdomaine.com/favicon.ico
Puisqu'ils ne prélèvent pas le contenu HTML, la balise <link> ne fonctionnera pas. Dans ce cas, vous pouvez 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, bien que pas nécessairement par le logiciel d'édition d'icônes.
Tout png valide (tout y compris l’en-tête) peut être précédé d’un répertoire en-tête ico de 6 octets et de 16 octets.
GIMP a un support natif. Exportez simplement en ico et cochez "Compressé (PNG)".
Dans tous les cas, évitez PNG si vous voulez une compatibilité fiable avec IE6.