146 votes

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 peut-on lier une image ici ?

249voto

Adrián Salgado Points 124

Cette image est appelée ' favicon ' et c'est une petite forme carrée .ico qui est le type de fichier standard pour les favicons. Vous pouvez utiliser .png o .gif aussi, mais vous devez suivre la norme pour une meilleure compatibilité.

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

  1. Faites 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 un fichier .ico fichier. Vous pouvez faire cela sur Gimp, Photoshop (avec l'aide d'un plugin ) ou un site web comme Favicon.cc o RealFaviconGenerator .

  2. Ensuite, vous avez deux façons de le mettre en place :

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

    o

    B) Établir un lien avec elle entre le <head></head> les balises de chaque .html sur votre site, comme ceci :

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

Si vous voulez voir le favicon à partir de n'importe quel site web, il suffit d'écrire www.url.com/favicon.ico et vous le verrez (probablement). Le site de Stackoverflow La favicon 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 pourriez facilement faire planter un navigateur avec un favicon excessivement grand, plus d'infos ici

31voto

Dulith De Costa Points 3936

Elle s'appelle favicon et vous devez ajouter le code ci-dessous à l'adresse suivante en-tête de votre site web.

Il suffit de l'ajouter au <head> section.

<link rel="icon" href="http://stackoverflow.com/your_path_to_image/favicon.jpg">

13voto

Vincent Ramdhanie Points 46265

C'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">

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

4voto

Mike Fulton Points 508

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

3voto

user3680001 Points 91
<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">

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X