Comment mettre le logo de mon site Web en image d'icône dans les onglets du navigateur?

100

L'image à côté du titre de la page dans l'onglet du navigateur - comment pouvez-vous lier une image ici?

html favicon geai
la source
2
Les mots clés sont favicon.ico
user956584
en.wikipedia.org/wiki/Favicon
Ry-

Réponses:

176

Cette image s'appelle ' favicon ' et c'est un petit .icofichier de forme carrée , qui est le type de fichier standard pour les favicons. Vous pouvez utiliser .pngou .gifaussi, mais vous devez suivre la norme pour une meilleure compatibilité.

Pour en définir un pour votre site Web, vous devez:

  1. Créez une image carrée de votre logo (de préférence 32x32 ou 16x16 pixels, pour autant que je sache, il n'y a pas de taille maximale *) et transformez-la en .icofichier. Vous pouvez le faire sur Gimp, Photoshop (avec l'aide d'un plugin ) ou un site Web comme Favicon.cc ou RealFaviconGenerator .

  2. Ensuite, vous avez deux façons de le configurer:

    A) En le plaçant dans le dossier / répertoire racine de votre site Web (à côté de index.html) avec le nom favicon.ico.

    ou

    B) Faites un lien vers celui-ci entre les <head></head>balises de chaque .htmlfichier de votre site, comme ceci:

    <head>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>

Si vous voulez voir le favicondepuis n'importe quel site Web, écrivez simplement www.url.com/favicon.icoet vous le verrez (probablement). Le favicon de Stackoverflow est de 16x16 pixels et Wikipedia est de 32x32.

*: Il y a même un problème de navigateur sans limite de taille de fichier. Vous pouvez facilement planter un navigateur avec un favicon extrêmement volumineux, plus d'informations ici

LasagneAndroïde
la source
18

Il s'appelle « favicon » et vous devez ajouter le code ci-dessous dans la section d'en- tête de votre site Web.

Ajoutez simplement ceci à la <head>section.

<link rel="icon" href="/your_path_to_image/favicon.jpg">
Dulith De Costa
la source
8

Ceci est le favicon et est expliqué dans le lien.

par exemple du W3C

  <link rel="icon" 
     type="image/png" 
     href="http://example.com/myicon.png">

De plus, bien sûr, le fichier image à l'endroit approprié.

Vincent Ramdhanie
la source
2 
<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 
'apple-touch-icon-retina.png')}">

ou vous pouvez utiliser celui-ci

<link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}"
type="image/x-icon">
user3680001
la source
apple-touch-icon est pour les applications web iOS
LasagnaAndroid
1

Ajoutez un fichier icône nommé "favicon.ico" à la racine de votre site Web.

Mike Fulton
la source
N'oubliez pas qu'il doit être exactement 16x16 px.
uınbɐɥs
3
Non, ce n'est pas le cas, il doit être de forme carrée et de toute taille, il faudra juste plus de temps à charger
LasagnaAndroid