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.
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.
Réponses:
Réponse remplacée (et transformée Wiki communautaire) en raison de nombreuses mises à jour et notes de divers autres dans ce fil:
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 favicon.ico
fichier, 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.ico
fichiers 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.
.ico
modifications sur PS. Et même si vous le faites, le résultat final est tellement mauvais, vous penseriez que .bmp
c'était un meilleur format (cela ajoute beaucoup de métadonnées, ce qui rend la réédition une énorme douleur).
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.
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.
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 .
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.
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)".
Évitez le PNG dans tous les cas si vous voulez une compatibilité IE6 fiable.
<link>
dans le code de page pour les navigateurs modernes.
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.