web-dev-qa-db-fra.com

Comment faire pour que le logo de mon site Web soit l'image de l'icône dans les onglets du navigateur?

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

htmlfavicon
86
jay

Cette image s'appelle ' favicon ' et c'est un petit fichier de forme carrée .ico, qui est le fichier standard. tapez pour favicons. Vous pouvez aussi utiliser .png ou .gif, 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’existe pas de taille maximale *), puis transformez-le en fichier .ico. Vous pouvez le faire sur Gimp, Photoshop (avec l’aide d’un plugin ) ou d’un site Web tel que Favicon.cc ou RealFaviconGenerator .

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

    A) Placez-le sur le dossier/répertoire racine de votre site Web (à côté de index.html) avec le nom favicon.ico.

    ou

    B) Associez-le aux balises <head></head> de chaque fichier .html de votre site, comme ceci:

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

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

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

153
LasagnaAndroid

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

Ajoutez simplement ceci à la section <head>.

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

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é.

7
Vincent Ramdhanie
<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">
2
user3680001

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

1
Mike Fulton