web-dev-qa-db-fra.com

"/favicon.ico" vs <link rel = "icône de raccourci" />

Question

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

Méthode 1

Placer un fichier nommé favicon.ico dans 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 section <head>:

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

Il existe plusieurs façons de créer un favicon. Le meilleur moyen 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. J'aime, dessiner une icône 16x16 à la main pour de meilleurs résultats.
  • Des contraintes spécifiques, telles que la prise en charge d'un navigateur spécifique avec des spécifications impaires.

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

Si vous voulez que le travail soit bien fait et rapidement, vous pouvez utiliser un générateur 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: c'est rapide et toutes les considérations de compatibilité ont déjà été abordées 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 fichier favicon.ico contenant des images 16x16 et 32x32 (notez que Microsoft recommande les formats 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 vont ignorer le favicon.

À propos de votre suggestion de placer le fichier favicon.ico à 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 le trouve pas (d'accord: ce navigateur est obsolète sous Windows, mais vous obtenez 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 ignorent le fichier favicon.ico. 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 ci-dessus.
  • Icône PNG 192x192 pour Android Chrome
  • Une icône Apple Touch 180x180 (pour iPhone 6 Plus; un autre appareil l’agrandira si nécessaire).

Les déclarer 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.

124
philippe_b

J'ai utilisé https://iconifier.net J'ai téléchargé mon image, téléchargé le fichier Zip des images, ajouté des images sur mon serveur, suivi les instructions affichées sur le site, y compris l'ajout des liens vers mon index.html. . Mon favicon s'affiche désormais sur mon iPhone dans Safari lorsque "Ajouter à l'écran d'accueil"

3
Hblegg
  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 ça marche automatiquement, qu'est-ce que vous voulez taper un code? Je pense donc que la méthode 1 est meilleure.
3
amir2h

Je pense que tout ce qui est le plus important a déjà été dit… .. Laissez-moi seulement ajouter que cette déclaration vous permet de mettre un GIF mobile à la place de favicon:

<link rel="shortcut icon" href="img/icon.gif" />

Cela se passe sur quelques pages . L'effet du favicon moving permet à la carte de ce site Web de se distinguer des autres cartes . Malheureusement, ce comportement et cette propriété ne sont garantis par aucun des navigateurs. Même Firefox, sur lequel je l'ai observé un jour, le deuxième jour, une icône vide standard au lieu d'un GIF pour la même page.

0
simhumileco