favicon.png vs favicon.ico-pourquoi utiliser PNG au lieu D'ICO?
mis à part le fait que PNG est un format d'image plus courant, y a-t-il une raison technique pour favoriser favicon.png contre favicon.ico?
je supporte les navigateurs modernes qui prennent tous en charge les icônes préférées de PNG.
8 réponses
réponse remplacée (et transformée en Wiki communautaire) en raison de nombreuses mises à jour et des notes de divers autres dans ce fil:
- ICOs et Png permettent à la fois plein de canal alpha en fonction de la transparence
- ICO permet de rétro-compatibilité pour les navigateurs plus anciens (par exemple, IE6)
- PNG a probablement plus large soutien d'outillage pour la transparence, mais vous pouvez trouver des outils pour créer alpha-canal ICOs ainsi, comme le Outil d'entraînement dynamique 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 d'avoir toujours un fichier favicon.ico , pour éviter un 404. Yahoo! ça suggère que tu le rendes petit et cachable.
et vous n'avez pas besoin d'un PNG juste pour la transparence alpha non plus. fichiers ICO supporte la transparence alpha très bien (i.e. couleur 32 bits), bien que peu d'outils vous permettent de les créer. J'utilise régulièrement générateur de FavIcon 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 y a aussi un plug-in gratuit qui peut les créer.
.les fichiers png sont sympas, mais .les fichiers ico offrent aussi la transparence alpha-channel, plus ils vous donnent 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">
L'apple itouch thingy est pour les utilisateurs d'iphone que de faire un raccourci vers un site web.
L'avantage théorique de *.les fichiers ico est qu'ils sont des conteneurs qui peuvent contenir plus d'une icône. Vous pouvez par exemple stocker une image avec alpha channel et une version en 16 couleurs pour les systèmes existants, ou vous pouvez ajouter des icônes 32x32 et 48x48 (qui devraient monter lors du déplacement d'un lien vers Windows explorer).
cette bonne idée, cependant, tend à entrer en conflit avec les implémentations de navigateur.
PNG a 2 avantages: il a une plus petite taille et il est plus largement utilisé et pris en charge (sauf en cas favicons). Comme mentionné ci-dessus ICO, peut avoir des icônes de plusieurs tailles, 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. Et si vous avez accès à la tête des pages de votre site Web, utilisez la balise pour pointer vers un fichier png. Donc l'ancien navigateur affichera le favicon.ico et les plus récents La png.
pour créer des fichiers Png et icônes, je recommande The Gimp .
certains outils sociaux comme Google+ utiliser une méthode simple pour obtenir un favicon pour les liens externes, aller chercher http://your.domainname.com/favicon.ico
Puisqu'ils ne préfetchent 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 dans 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 de l'habituel bitmap+alpha que tout le monde associe fortement à ico.
Soutien est vieux, figurant dans Windows Vista (2007), et est bien pris en charge par les navigateurs, mais pas nécessairement par l'icône d'un logiciel de montage.
tout png valide (entier, y compris en-tête) peuvent être précédés d'un 6 octets ico header et 16 octets image directory.
GIMP a le soutien des natifs. Il suffit d'exporter en tant qu'ico et de cocher la case "comprimé (PNG)".
évitez PNG dans tous les cas si vous voulez une compatibilité IE6 fiable.