Comment mettre une image / logo (ou favicon) à côté de l'adresse url ?


Pour identifier votre site web il est possible de rajouter une image à côté de l'adresse url. Cette image est appelée une Favicon (voir exemple de la favicon de youtube sur l'image ci-contre). Le plus simple pour ajouter une image est d'utiliser directement la ligne de code suivante dans l'entête de votre page HTML avec une image MonImage.png quelconque:

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

Mettre une image à côté de l'adresse url ? (favicon de youtube)

Exemple complet (avec le logo de la NASA par exemple comme Favicon

Mettre une image à côté de l'adresse url ? (Exemple)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<link rel="icon" type="image/png" href="MonImage.png" />
</head>

<body>
Test Test Test...
</body>

</html>

En procédant comme ceci, votre favicon doit fonctionner sur la majorité des navigateurs web sauf sur certaines versions d'Internet Explorer. Dans ce cas il est nécessaire de créer une image au format .ico

Il existe une multitude de site permettant de créer une favicon, il suffit de taper dans votre moteur de recherche préféré: favicon generator. Exemple:

Discussion très complète en anglais sur stackoverflow sur le sujet du Favicon: HTML 5 Favicon - Support?

Note: Pour créer une favicon ou un logo avec un design plus professionnel, vous pouvez utiliser des services payant comme logaster par exemple.

Recherches associées

Image

of