favicon.png vs favicon.ico - pourquoi devrais-je utiliser PNG au lieu d'ICO?
https://stackoverflow.com/questions/1344122
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Autre que le fait que la PNG est un format d'image plus commune, est-il une raison technique pour favoriser favicon.png contre favicon.ico?
Je soutiens les navigateurs modernes tout le soutien PNG icônes favorites.
La solution
Réponse remplacé (et se Wiki de la communauté) en raison de nombreuses mises à jour et les notes de divers autres sur ce sujet:
- et ICOs PNGs permettent à la fois le canal alpha pleine transparence sur la base
- ICO permet une compatibilité descendante pour les navigateurs plus anciens (par exemple IE6)
- PNG a probablement le soutien d'outillage plus large pour la transparence, mais vous pouvez trouver des outils pour créer ainsi ICOs canal alpha, comme le outil Dynamic Drive et plug-in Photoshop mentionné par @mercator.
Ne hésitez pas à consulter les autres réponses ici pour plus de détails.
Autres conseils
Tous les navigateurs modernes (testé avec Chrome 4, Firefox 3.5, IE8, Opera 10 et Safari 4) demanderont toujours un favicon.ico à moins que vous avez spécifié une icône de raccourci via <link>. Donc, si vous n'avez pas spécifier explicitement un, il est préférable de toujours un fichier favicon.ico, pour éviter une 404. Yahoo! vous propose de faire petit et cacheable.
Et vous ne devez pas aller pour un PNG juste pour la transparence alpha soit. Dynamic Drive pour créer des fichiers favicon.ico avec transparence alpha. Il est le seul outil en ligne que je connaisse qui peut le faire.
Il y a aussi un href="http://www.telegraphics.com.au/sw/#icoformat" gratuit plug-in Photoshop qui peuvent les créer.
.png sont gentils, mais .ico fournissent canal alpha de transparence, aussi, plus ils vous donnent la rétrocompatibilité.
Jetez un oeil à 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 bidule pomme iTouch est pour les utilisateurs d'iPhone qui font un raccourci vers un site Web.
L'avantage théorique de fichiers * .ico est qu'ils sont des conteneurs que peut contenir plus d'une icône. Vous pouvez par exemple stocker une image avec canal alpha et une version 16 couleurs pour les systèmes existants, ou vous pouvez ajouter des icônes et 48x48 32x32 (qui devrait tout en faisant glisser un lien vers l'explorateur Windows).
Cette bonne idée, cependant, a tendance à entrer en conflit avec les implémentations du navigateur.
PNG a 2 avantages: il a une plus petite taille et il est plus largement utilisé et pris en charge (sauf en 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. Un si vous avez accès à la tête de vos pages Web utiliser la balise pour pointer vers un fichier .png. Ainsi, le navigateur affiche le plus favicon.ico et les nouvelles du .png.
Certains outils sociaux comme Google+ utilisent une méthode simple pour obtenir un favicon pour les liens externes, aller chercher http://your.domainname.com/favicon.ico
Comme ils ne prélecture pas le contenu HTML, la balise <link> ne fonctionnera pas. Dans ce cas, vous pouvez utiliser une règle de mod_rewrite ou tout simplement placer le fichier dans l'emplacement par défaut.
Une organisation internationale peut être .png.
Plus précisément, vous pouvez stocker un ou plusieurs .png dans ce format minimal de conteneurs, au lieu de l'image bitmap habituelle + alpha que tout le monde associe fortement avec ico.
Le soutien est vieux, apparaissant dans Windows Vista ( 2007) et est bien supporté par les navigateurs, mais pas nécessairement par l'icône du logiciel d'édition.
Toute .png valide (tout en-tête y compris) peut être préfixé par un tête ico 6 octets et le répertoire d'images de 16 octets.
GIMP a un support natif. exporter simplement ico et cochez "compressé (PNG)".
Contournez PNG dans tous les cas si vous voulez la compatibilité IE6 fiable.
