Quelle est la meilleure pratique pour créer un favicon sur un site Web?

103

Question

  • Quelle est la meilleure pratique pour créer un favicon sur un site Web?
  • et un fichier .ico avec des images 16x16 et 32x32 est-il meilleur qu'un fichier .png avec 16x16 seulement?
  • La bonne méthode préférée aujourd'hui ne fonctionnerait-elle pas dans des navigateurs relativement anciens?

Méthode 1

Placer un fichier nommé favicon.icodans le répertoire principal est un moyen. Le navigateur demande toujours ce fichier. Vous pouvez le voir dans les fichiers journaux Apache.

Méthode 2

Balise HTML dans la <head>section:

<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />
html favicon bytecode77
la source

Réponses:

154

Il existe plusieurs façons de créer un favicon. La meilleure façon pour vous dépend de divers facteurs:

  • Le temps que vous pouvez consacrer à cette tâche. Pour beaucoup de gens, c'est «aussi vite que possible».
  • Les efforts que vous êtes prêt à faire. Comme dessiner une icône 16x16 à la main pour de meilleurs résultats.
  • Des contraintes spécifiques, comme la prise en charge d'un navigateur spécifique avec des spécifications étranges.

Première méthode: utiliser un générateur de favicon

Si vous voulez faire le travail correctement et rapidement, vous pouvez utiliser un générateur de favicon . Celui-ci crée les images et le code HTML pour tous les principaux navigateurs de bureau et mobiles. Divulgation complète: je suis l'auteur de ce site.

Avantages d'une telle solution: elle est rapide et toutes les considérations de compatibilité ont déjà été prises en compte pour vous.

Deuxième méthode: créer un favicon.ico (navigateurs de bureau uniquement)

Comme vous le suggérez, vous pouvez créer un favicon.icofichier contenant des images 16x16 et 32x32 (notez que Microsoft recommande 16x16, 32x32 et 48x48 ).

Ensuite, déclarez-le dans votre code HTML:

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">

Cette méthode fonctionnera avec tous les navigateurs de bureau, anciens et nouveaux. Mais la plupart des navigateurs mobiles ignoreront le favicon.

À propos de votre suggestion de placer le favicon.icofichier à la racine et de ne pas le déclarer: attention, bien que cette technique fonctionne sur la plupart des navigateurs, elle n'est pas fiable à 100%. Par exemple, Windows Safari ne peut pas le trouver (d'accord: ce navigateur est en quelque sorte obsolète sur Windows, mais vous voyez le point). Cette technique est utile lorsqu'elle est combinée avec des icônes PNG (pour les navigateurs modernes).

Troisième méthode: créer un favicon.ico, une icône PNG et une icône Apple Touch (tous les navigateurs)

Dans votre question, vous ne mentionnez pas les navigateurs mobiles. La plupart d'entre eux ignoreront le favicon.icofichier. Bien que votre site puisse être dédié aux navigateurs de bureau, il est probable que vous ne souhaitiez pas ignorer complètement les navigateurs mobiles.

Vous pouvez obtenir une bonne compatibilité avec:

  • favicon.ico, voir au dessus.
  • Une icône PNG 192x192 pour Android Chrome
  • Une icône Apple Touch 180x180 (pour iPhone 6 Plus; un autre appareil le réduira selon les besoins).

Déclarez-les avec 

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">

Ce n'est pas l'histoire complète, mais c'est assez bon dans la plupart des cas.

philippe_b
la source
9
En fait, le <link rel = "shortcut icon" href = "/ path / to / icons / favicon.ico"> encore souvent utilisé n'est pas une option valide. Ce n'est même pas standard et seul IE le prend en charge. Et depuis IE 9, IE prend en charge la méthode par défaut «look at root». Ce n'est donc pas un moyen de prendre en charge tous les navigateurs, mais juste un moyen de prendre en charge IE <9. Fiez-vous à la méthode (désormais standard) 'place in root' ou, si vous insistez, ajoutez: <link rel = "icon" href = "/ favicon.ico"> (Même si ce n'est pas standard non plus)
HappyMe
7
Le mécanisme du favicon a définitivement évolué au fil des ans. J'ai remarqué aujourd'hui que la spécification de MDN dit maintenant: Le type de lien de raccourci est souvent vu avant l'icône, mais ce type de lien est non conforme, ignoré et les auteurs Web ne doivent plus l'utiliser. Signification utiliser <link ref="icon" ...>plutôt que <link ref="shortcut icon" ...> developer.mozilla.org/en-US/docs/Web/HTML/Link_types
broc.seib
1
Merci @ broc.seib pour les commentaires. Au moment d'écrire ce commentaire, j'ai perdu la trace de la raison pour laquelle il s'agissait d'une "icône de raccourci" et non d'une "icône". Bien sûr, Mozilla a sa voix dans cette histoire. Mais nous ne devons pas oublier pourquoi cette déclaration est ici en premier lieu: pour supporter les anciens navigateurs, tels que IE 8. La plupart des navigateurs récents utilisent des icônes PNG, qui sont plus propres et plus légères que ICO. Mon plan pour RealFavicon est de supprimer complètement cette déclaration. Avant cela, je dois exécuter des tests sur IE 7, 8 et 9.
philippe_b
Sans oublier que si vous «affichez la source» sur cette page, sur Stack Overflow, ref="shortcut icon"c'est exactement ce qu'ils utilisent.
Steven Ventimiglia
1
@laggingreflex /favicon.icoest la méthode préférée. C'est ce que vous obtenez lors de votre visite www.google.com. Pourtant, vous ne voudrez peut-être pas polluer votre répertoire racine avec une icône. Dans ce cas, le balisage fonctionne très bien.
philippe_b
2
  1. vous pouvez travailler avec ce site Web pour générer favin.ico
  2. Je recommande d'utiliser le format .ico car le png ne fonctionne pas avec la méthode 1 et ico pourrait avoir plus de détails!
  3. les deux méthodes fonctionnent avec tous les navigateurs, mais quand cela fonctionne automatiquement, que voulez-vous, tapez un code pour cela? donc je pense que la méthode 1 est meilleure.
a828h
la source
2

J'ai utilisé https://iconifier.net J'ai téléchargé mon image, téléchargé le fichier zip des images, ajouté des images à mon serveur, suivi les instructions sur le site, y compris l'ajout de liens vers mon index.html et cela a fonctionné. Mon favicon s'affiche maintenant sur mon iPhone dans Safari lorsque `` Ajouter à l'écran d'accueil ''

Hblegg
la source