web-dev-qa-db-fra.com

HTML - Ajouter une icône à l'onglet du navigateur

Je fais un devoir pour la classe et on nous a demandé de faire une page Web. Tout s'est bien passé lors de la création de la page, mais j'ai du mal à afficher l'icône dans l'onglet de mon navigateur.

Il nous a demandé de récupérer l'icône de l'un de nos dossiers.

Ceci est de ses directions

"Remarque pour afficher votre icône, vous insérez cette ligne dans votre section html head" 

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

"En supposant que l'icône de votre société se trouve dans le dossier des images"

J'ai essayé plusieurs variantes, mais ça ne marchera pas.

Le mien s'appelle favicon (1) .ico

Voici une de mes tentatives

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

En voici un autre. 

<link rel="shortcut icon" href="images/favicon(1).ico" type="favicon/ico" />

J'ai un dossier sur mon bureau appelé "Question 1" et dans ce dossier, j'ai mon fichier HTML pour cet assignant et un autre dossier appelé "images". Dans le fichier "images", j'ai l'icône "favicon (1) .ico".

Est-il possible de prendre cette icône de mon dossier et de la placer dans mon code? 

5
user3577397

C'est l'extrait que j'utilise chaque fois que je dois configurer un favicon:

<!-- for FF, Chrome, Opera -->
<link rel="icon" type="image/png" href="/assets/favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/assets/favicons/favicon-32x32.png" sizes="32x32">

<!-- for IE -->
<link rel="icon" type="image/x-icon" href="/assets/favicons/favicon.ico" >
<link rel="shortcut icon" type="image/x-icon" href="/assets/favicons/favicon.ico"/>

Cela devrait bien fonctionner.

Vous devez utiliser .png dans FF, Chrome et Opera et les supporter avec 2 résolutions, pour différents appareils et résolutions d’écran.

IE a besoin de l'image .ico et a besoin que le rel soit "icône" et "icône de shortcus", ne me demandez pas pourquoi, IE est toujours un peu fou, comme nous le savons tous: D

9
RenokK

Essayer:

<link rel="shortcut icon" href="favicon(1).ico">

ou ceci (pour Mozilla)

<link href="favicon(1).png" rel="icon" type="image/png" />

Cela peut être .png ou .ico

1
arenaq