web-dev-qa-db-fra.com

Comment ajouter une image dans la barre de titre en utilisant HTML?

<DOCTYPE! HTML>
<html>
<head>
    <title>Login</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    some text

</body>
</html>

C’est le code que j’ai écrit pour ajouter une image dans la nouvelle barre d’onglet du navigateur . Mais cela ne fonctionne pas .J’utilise également wamp server, si wamp risque de poser problème.

html5wamp
11
pro_2911

Selon wikipedia , l'incantation la plus compatible avec les navigateurs est: 

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

Après cela, il vous suffit de vous demander si votre navigateur télécharge réellement l'icône. Que disent les journaux du serveur? Avez-vous vérifié la console de débogage du réseau de votre navigateur?

15
David-SkyMesh

Le W3C dit:

<!DOCTYPE html 
      PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
[…]
</head>
[…]
</html>

Voir http://www.w3.org/2005/10/howto-favicon

Mais gardez à l'esprit: Certains navigateurs ont besoin de temps pour reconnaître qu'il existe un favicon - essayez de supprimer les cookies et de rouvrir votre site! (Et assurez-vous que l'icône est sur le chemin :))

6
Mirco

Essayez ce qui suit: 

<link rel="icon" type="image/png" href="img/iconimg.png" />

NB: La href est le répertoire de votre exemple d'image. Votre image se trouve dans un dossier appelé "img" et le nom de votre image est "iconimg". S'il s'agit d'un png, utilisez .png, s'il s'agit d'un jpg, puis .jpg. N'oubliez pas de le faire dans la tête de votre fichier et non dans le corps. 

2
Priscilla

Essayez avec cette réponse complète,

<html>
 <head>
  <link rel="icon" href="Image path" type="image/gif" sizes="16x16">
 </head>
 <body>
   Something
 </body>
</html>

Chemin de l'image -: /images/title_icon.png comme ceci

Référence -: w3school

0
Dev4World

Je viens d'essayer avec ce code et cela a fonctionné pour moi: <link rel="icon" type="image/jpg" href="C:\Users\nrm05\Pictures\logo.jpg" /> Assurez-vous de taper type="image/jpg" pour les fichiers jpg et type="image/png" pour les fichiers PNG. Si vous n'avez pas téléchargé l'image, mais que vous connaissez l'URL de l'image, vous pouvez la saisir comme suit: href="image_url"

J'espère que cela a répondu à votre question :-)

0
TacoMannen

J'ai essayé dans mon projet angular7 en écrivant ces lignes et j'ai travaillé.

<link rel="icon" type="image/x-icon" href="filepath/filename.ico">

veuillez noter que le fichier image doit être au format icône (.ico)

0
Basil Mohammed

dans votre vous avez des lettres majuscules pour html.vous l'avez écrit comme ceci IS pas correct !!! votre navigateur ne le comprendra pas comme html5.

0
Matt

Ça marche

Ajoutez ceci dans votre tag head

<link rel="shortcut icon" href="http://example.com/myicon.png" />
0
sam bhola

Afficher une image dans la barre de titre est facile . Veuillez suivre les étapes suivantes:

a) enregistrez d’abord votre image dans le dossier et nommez-la comme favicon . b) puis utilisez la ligne en dessous de la balise en-tête de la vue html

<link rel="icon" type="image/png" href="image_url" />

c) Ici, vous devez connaître le chemin de votre fichier, où vous avez enregistré l'image d) enregistrez votre URL à la place de image_url e) enregistrez votre travail.

0
NARGIS PARWEEN

Utilisez le suivant

1.) Choisissez l'image que vous souhaitez définir dans votre barre de titre.
2..) Convertissez-le au format ".ico". (Vous pouvez utiliser le lien suivant en ligne) http://image.online-convert.com/convert-to-ico
3.) Enregistrez le fichier sous le nom "favicon.ico" dans le même dossier que votre fichier .html.
4.) Ajoutez ceci dans votre balise head <link rel="shortcut icon" href="favicon.ico"/>

0
Jyotsna Singh