Comment configurer un favicon?

j'essaie de faire un exercice préliminaire très simple pour mettre en place un site web qui crée un favicon.

C'est le code j'utilise: 

<!DOCTYPE html >
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
</html>

mais cela ne fonctionne pas - est-ce que quelqu'un peut nous aider? J'ai sauvegardé le fichier favicon.ico au même niveau que mon fichier html (sur un sous-répertoire).

merci Beaucoup

41
demandé sur David Moles 2013-08-18 21:22:27

10 réponses

avec l'introduction des téléphones (I|android|windows), les choses ont changé, et pour obtenir une solution correcte et complète qui fonctionne sur n'importe quel appareil prend vraiment beaucoup de temps.

https://realfavicongenerator.net/favicon_compatibility ou http://caniuse.com/#search=favicon pour obtenir une idée sur la meilleure façon d'obtenir quelque chose qui fonctionne sur n'importe quel appareil.

vous devriez jeter un oeil à http://realfavicongenerator.net/ pour automatiser une grande partie de ce travail, et probablement à https://github.com/audreyr/favicon-cheat-sheet comprendre comment cela fonctionne (même si cette dernière ressource n'a pas été mise à jour depuis un an environ).

une solution complète nécessite d'ajouter à votre en-tête ce qui suit (avec les images et les fichiers correspondants, bien sûr) :

<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<meta name="msapplication-config" content="browserconfig.xml">

En Juin 2016, RealFaviconGenerator claimed que les 5 lignes de code suivantes supportaient autant d'appareils que les 18 lignes précédentes:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
45
répondu Clément 2017-09-15 02:50:32

j'utilise ceci sur mon site et cela fonctionne très bien. 

<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
24
répondu Schw2iizer 2017-10-04 17:00:53

il y a une méthode très simple pour mettre un favicon, qui avait été autour depuis longtemps AFAIK. Placez le favicon.ico le fichier dans l'emplacement par défaut. j'.e 

http://www.yoursite.com/favicon.ico

Cela fonctionne dans presque tous les navigateurs sans <link> balise. Toutefois, cela ne fonctionne que si c'est un *.ico fichier. Les png et autres formats doivent encore être reliés à un <link> la balise

5
répondu Akash Kurian Jose 2018-01-31 17:19:26

vous pouvez prendre un coup d'oeil à l' w3 comment, je pense que cela vous sera utile

votre attribut de balise de lien doit être rel="icon"

4
répondu amdorra 2013-08-18 17:30:22 
<!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>
<body>
...
</body>
</html>

rel="shortcut icon" doit être rel="icon"

Source:W3C

1
répondu Vivek Jain 2013-08-18 17:32:14

à Partir de l'expérience de mon favicon.ico n'apparaissant pas, je suis le partage de mon expérience. Vous ne pouvez pas l'obtenir pour montrer jusqu'à ce que vous mettez votre site web sur un hôte, donc, essayer de le mettre sur un hôte local en utilisant XAMPP - http://www.apachefriends.org/en/xampp.html