web-dev-qa-db-fra.com

quel favicon est chargé dans le navigateur?

actuellement, j'expérimente avec 2 favicons et les inclut de 3 manières différentes dans mon balisage, mais je ne suis pas sûr de savoir lequel sera chargé dans le navigateur. L'onglet réseau de Firebug ne me dit pas lequel il a téléchargé.

  <link rel="icon" type="image/png" href="favicon.png">
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="Apple-touch-icon" href="favicon.png">

où favicon.png est 144x144px et favicon.ico est 16x16px.

idéalement, je veux que tous les navigateurs utilisent le png au lieu de ico chaque fois qu'ils le supportent, et se replient sur ico pour ie. Je ne sais pas comment vérifier si le code le fait déjà ou non.

faviconpng
6
sunnz

Vous devez également modifier l'ordre de la résolution la plus basse au plus élevé. Depuis les navigateurs utiliseront la dernière instance qu'ils peuvent utiliser.

Votre:

<link rel="icon" type="image/png" href="favicon.png">
<link rel="shortcut icon" href="favicon.ico">
<link rel="Apple-touch-icon" href="favicon.png">

Devrait être:

<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="Apple-touch-icon" href="favicon.png">

Ainsi, tout navigateur qui recherche rel="icon" et peut utiliser le fichier .png le fera.

1
thejimbirch

Selon un article de Wikipedia sur l'utilisation de Favicon , la méthode recommandée pour utiliser un favicon est d'utiliser le code <link rel="shortcut icon" href="http://example.com/myicon.ico" /> car Internet Explorer ne comprend pas le format PNG, et GIF une icône ou l'attribut type. Vous devez également placer favicon.ico dans le répertoire racine de votre site Web afin qu'il s'agisse de http://example.com/favicon.ico.

0
ub3rst4r

Vous pouvez modifier le favicon manuellement pour IE:

/*!
 * Dynamically changing favicons with JavaScript
 * Works in all A-grade browsers except Safari and Internet Explorer
 * Demo: http://mathiasbynens.be/demo/dynamic-favicons
 */

// HTML5™, baby! http://mathiasbynens.be/notes/document-head
document.head = document.head || document.getElementsByTagName('head')[0];

function changeFavicon(src) {
 var link = document.createElement('link'),
     oldLink = document.getElementById('dynamic-favicon');
 link.id = 'dynamic-favicon';
 link.rel = 'shortcut icon';
 link.href = src;
 if (oldLink) {
  document.head.removeChild(oldLink);
 }
 document.head.appendChild(link);
}
0
Shluch