favicon.png vs favicon.ico - pourquoi devrais-je utiliser PNG au lieu d'ICO?

442

Outre le fait que PNG est un format d'image plus courant, y a-t-il une raison technique de favoriser 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 PNG.

png favicon ico Jon Galloway
la source

Réponses:

233

Réponse remplacée (et transformée Wiki communautaire) en raison de nombreuses mises à jour et notes de divers autres dans ce fil:

  • Les ICO et PNG permettent tous les deux une transparence basée sur le canal alpha
  • ICO permet une rétrocompatibilité avec les anciens navigateurs (par exemple IE6)
  • PNG a probablement un support d'outils 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és par @mercator.

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

ambre
la source
78
ICO autorise également le canal alpha
Álvaro González
58
-1 ICO prend en charge plusieurs résolutions, y compris le canal alpha complet. Soit dit en passant, l'alpha 1 bit est appelé "transparence". La seule vraie limite que ICO a eu était avec des icônes plus grandes ou égales à 256 de longueur (dans toutes les directions), bien qu'elle ait été surmontée plusieurs fois.
Christian
26
-1 .ico autorise également plusieurs résolutions dans un seul fichier (16x16 et 32x32 par exemple). L'icône reste donc agréable lorsque vous créez un raccourci sur un bureau.
gagarine
4
La plupart des navigateurs préfèrent le favicon.ico à la racine au lien. Avec votre solution, la plupart des navigateurs choisiraient le .ico non transparent au lieu du png lié.
Lode
@lode pourquoi choisirait-il particulièrement un ico non transparent au lieu d'un ico transparent?
Rob Grant
367

Tous les navigateurs modernes (testés avec Chrome 4, Firefox 3.5, IE8, Opera 10 et Safari 4) demanderont toujours un favicon.icosauf 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 favicon.icofichier, pour éviter un 404. Yahoo! vous suggère de le rendre petit et pouvant être mis en cache.

Et vous n'avez pas non plus à opter pour un PNG uniquement pour la transparence alpha. Les fichiers ICO prennent très bien en charge la transparence alpha (c'est-à-dire la couleur 32 bits), bien que pratiquement aucun outil ne vous permette de les créer. J'utilise régulièrement le générateur FavIcon de Dynamic Drive pour créer des favicon.icofichiers 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.

mercator
la source
6
Excellent indice cet outil Dynamic Drive! Signet instantanément. Merci!
Marcos Buarque
3
en ce qui concerne les outils, c'est en grande partie faux; il existe plusieurs outils de conception d'icônes. J'en ai moi-même écrit un simple par le passé.
Christian
4
Pour ceux qui n'ont pas 650 $ pour Photoshop, vous pouvez utiliser pixlr.com (gratuitement) pour créer, éditer et enregistrer des fichiers .png avec une superposition et une transparence complètes :)
Scott B
3
@Pacerier Il est incroyablement difficile d'obtenir des .icomodifications sur PS. Et même si vous le faites, le résultat final est tellement mauvais, vous penseriez que .bmpc'était un meilleur format (cela ajoute beaucoup de métadonnées, ce qui rend la réédition une énorme douleur).
Christian
4
@mikevoermans: Il est toujours lu en PNG; la plupart des navigateurs modernes ne se soucient pas tellement des extensions de fichiers. BTW, c'est la meilleure réponse et devrait être celle acceptée.
rvighne
48

Les fichiers .png sont agréables, mais les fichiers .ico offrent également la transparence du canal alpha, et ils vous offrent une compatibilité descendante.

Jetez un œil au type utilisé par StackOverflow 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 font un raccourci vers un site Web.

Wouter van Nifterick
la source
16
PNG peut également fournir un canal alpha
Álvaro González
10
oui, mon point de vue était que les ico peuvent faire tout ce que les png peuvent faire (transparence alpha) en tant que favicon, et en outre, ils sont pris en charge par tous les navigateurs depuis l'année 0.
Wouter van Nifterick
selon wikipedia, Internet Explorer ne supportera pas une ligne comme celle-ci: <link rel = "icon" type = "image / vnd.microsoft.icon" href = " example.com/image.ico " />
frankster
2
Il y a de fortes chances que le site Web ne prenne pas en charge les navigateurs depuis l'année 0, alors pourquoi s'embêter? Essayez de charger un site Web moderne dans IE6 et voyez ce qui se passe;)
Dominic
26

L'avantage théorique des fichiers * .ico est qu'ils sont des conteneurs qui peuvent 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 hérités, ou vous pouvez ajouter des icônes 32x32 et 48x48 (qui s'afficheront par exemple 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.

Álvaro González
la source
Lié à cela est le fait qu'IE9 utilise également ces grandes icônes pour épingler à la barre des tâches win7 voir: stackoverflow.com/questions/3723715/…
GazB
Uhm, théorique? La même icône livrée avec Windows 7 peut être utilisée dans Windows 95 en mode couleur 8 bits. Je pense que c'est assez pratique, non?
Christian
Veuillez noter que cette réponse a été écrite en 2009. La scène du navigateur à l'époque était très différente de ce qu'elle est maintenant.
Álvaro González
15

PNG a 2 avantages: il a une taille plus petite et il est plus largement utilisé et pris en charge (sauf dans le cas des 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 recommanderais de mettre un favicon.ico à la racine de votre application. Si vous avez accès aux pages Head de votre site Web, utilisez la balise pour pointer vers un fichier png. Ainsi, les anciens navigateurs afficheront le favicon.ico et les plus récents le png.

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

pmoleri
la source
3
Pas tant pour les sites Web? Attendez que tout le monde commence à utiliser des écrans de type rétine; tout à coup, il y aura une très bonne raison pour laquelle on pourrait inclure une taille 32x32 ou plus dans leur favicon ...
Roman Starkov
1
Nous parlons de favicons donc la question du support est en fait l'opposé de ce que vous dites
David Heffernan
1
+1 Répond à la question d'origine et ne s'embourbe pas dans la transparence. Mentionne également une application qui prend en charge le format .ico.
kovacsbv
12

Certains outils sociaux comme 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 prélèvent pas le contenu HTML, la <link>balise ne fonctionnera pas. Dans ce cas, vous pouvez utiliser une règle mod_rewrite ou simplement placer le fichier à l'emplacement par défaut.

jdavid.net
la source
1
Je ne sais pas si c'est vrai ou faux, mais c'était l'argument décisif pour moi d'aller créer favicon.ico en racine en plus de png que j'ai.
Alexei Tenitski
2
Je le sais grâce au travail sur telly.com , -via paul lindner qui fait partie de l'équipe google plus. plus.google.com/117259934788907243749/about
jdavid.net
Placer le favicon à la racine est la norme de facto , donc j'y adhérerais pour des raisons telles que mentionnées dans cette réponse.
Stijn de Witt
8

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.

La prise en charge est ancienne, apparaissant dans Windows Vista (2007) et est bien prise en charge par les navigateurs, mais pas nécessairement par un logiciel d'édition d'icônes.

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'images de 16 octets.
GIMP a un support natif. Exportez simplement en ico et cochez "Compressed (PNG)".

Adria
la source
3

Évitez le PNG dans tous les cas si vous voulez une compatibilité IE6 fiable.

aehlke
la source
19
Il n'y a aucune raison pour laquelle vous ne pouvez pas utiliser les deux - un ico dans l'arborescence des répertoires pour IE6 et un PNG spécifié via un <link>dans le code de page pour les navigateurs modernes.
Ambre
10
Pourquoi utiliseriez-vous les deux? Si vous vous donnez la peine de créer un ico, quel avantage aurait également l'utilisation d'un png? C'est sûrement juste du travail supplémentaire et du code supplémentaire.
Mr_Chimp
@Mr_Chimp parce que png est un standard ouvert et plus tourné vers l'avenir? C'est une ligne supplémentaire de balisage.
Wyatt8740
9
Salut @Orcra - Je pense que vous ne trouveriez pas ça si drôle si vous aviez lu ceci il y a ~ 8 ans quand j'ai écrit cette réponse, et que vous deviez considérer des choses comme IE6 :) StackOverflow permet de modifier les réponses, alors n'hésitez pas à le mettre à jour vous-même quelque chose de pertinent aujourd'hui
aehlke
3
@aehike vous avez un bon point, mon mauvais pour ne pas vérifier l'horodatage.
Orcra
0

Pour ce que ça vaut, je fais ça:

    <!-- Favicon - Generic -->
    <link rel="icon" href="path/favicon-32_x_32.png" sizes="32x32">
    <link rel="icon" href="path/favicon-57_x_57.png" sizes="57x57">
    <link rel="icon" href="path/favicon-76_x_76.png" sizes="76x76">
    <link rel="icon" href="path/favicon-96_x_96.png" sizes="96x96">
    <link rel="icon" href="path/favicon-128_x_128.png" sizes="128x128">
    <link rel="icon" href="path/favicon-192_x_192.png" sizes="192x192">
    <link rel="icon" href="path/favicon-228_x_228.png" sizes="228x228">
    <!-- Favicon - Android -->
    <link rel="shortcut icon" href="path/favicon-196_x_196.png" sizes="196x196">
    <!-- Favicon - iOS -->
    <link rel="apple-touch-icon" href="path/favicon-120_x_120.png" sizes="120x120">
    <link rel="apple-touch-icon" href="path/favicon-152_x_152.png" sizes="152x152">
    <link rel="apple-touch-icon" href="path/favicon-180_x_180.png" sizes="180x180">

Et je garde toujours le favicon.ico en racine.

s3c
la source