Favicon: .ico ou .png / balises correctes?
Dans un document HTML5, quel format de favicon recommandez-vous et pourquoi? Je veux qu'il soit supporté par IE7 et tous les navigateurs modernes.
De plus, lors de l'utilisation de .png, dois-je spécifier le type (type = "image/png")?
Pour la compatibilité avec tous les navigateurs, utilisez .ico.
Le fichier .png reçoit de plus en plus de soutien, car il est plus facile de créer avec plusieurs programmes.
pour .ico
<link rel="shortcut icon" href="http://example.com/myicon.ico" />
pour .png, vous devez spécifier le type
<link rel="icon" type="image/png" href="http://example.com/image.png" />
Voir ici: favicon Cross Browser
C'est le chemin à parcourir:
<link rel="icon" type="image/png" href="http://www.example.com/image.png"><!-- Major Browsers -->
<!--[if IE]><link rel="SHORTCUT ICON" href="http://www.example.com/alternateimage.ico"/><![endif]--><!-- Internet Explorer-->
Je sais que c'est une vieille question.
Voici une autre option - répondre à différentes exigences de plate-forme - Source
<link rel='shortcut icon' type='image/vnd.Microsoft.icon' href='/favicon.ico'> <!-- IE -->
<link rel='Apple-touch-icon' type='image/png' href='/icon.57.png'> <!-- iPhone -->
<link rel='Apple-touch-icon' type='image/png' sizes='72x72' href='/icon.72.png'> <!-- iPad -->
<link rel='Apple-touch-icon' type='image/png' sizes='114x114' href='/icon.114.png'> <!-- iPhone4 -->
<link rel='icon' type='image/png' href='/icon.114.png'> <!-- Opera Speed Dial, at least 144×114 px -->
C'est l'approche la plus large que j'ai trouvée jusqu'à présent.
En fin de compte, la décision dépend de vos propres besoins. Demandez-vous qui est votre public cible?
UPDATE du 27 mai 2018: Comme prévu, le temps passe et les choses changent. Mais il y a de bonnes nouvelles aussi. J'ai trouvé un outil appelé Real Favicon Generator qui génère toutes les lignes requises pour que l'icône fonctionne sur tous les navigateurs et plates-formes modernes. Il ne gère cependant pas la compatibilité ascendante.