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" />
Exemple complet (avec le logo de la NASA par exemple comme Favicon
<!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
Liens | Site |
---|---|
Favicon & App Icon Generator | favicon-generator.org |
How to add a browser tab icon (favicon) for a website? | stackoverflow |
Favicon | wikipedia |
Favicon - L'icône de votre site dans la barre d'adresse | commentcamarche |
How to Add a Favicon to your Site | w3 |
HTML 5 Favicon - Support? | stackoverflow |
favicon generator | favicon |
Quick Tip: Adding a Favicon To Your Website | dwuser |
HTML link sizes Attribute | w3schools |
Créez facilement votre logo avec Logaster | logaster |