web-dev-qa-db-fra.com

Résolutions compatibles avec Favicon et taille de fichier pour divers périphériques

Avec les nombreuses utilisations des favicons de nos jours (nouvel onglet, signets, barre d’URL, IE épingle à la barre des tâches, etc.), quelles tailles dois-je inclure dans mon fichier favicon.ico?

J'utilise Converticon et j'ai pensé que la solution de facilité serait d'inclure toutes les résolutions qu'il prend en charge. Toutefois, comme cela crée une taille de fichier supérieure, le navigateur ne télécharge-t-il que les résolutions dont il a besoin (si c'est le cas même possible), ou le fichier entier, en utilisant ma bande passante, et ce qui signifie que le navigateur prend plus de temps pour le charger?

Comme vous le savez peut-être, je ne suis pas exactement un webmaster "pro" :)

imagesfaviconbrowser-support
1
Joshua Todd Cowper

  • 16px est compatible avec tous les navigateurs et se trouve souvent aux emplacements suivants, dans la barre d’adresse, dans les onglets et dans les signets.

  • 24px Internet Explorer 9 (sites épinglés).

  • 32px Internet Explorer 9, barre des tâches sous Windows 7 et 8, barre latérale de Safari.

  • 57px Format standard iOS, première génération pour 3G +, iPod Touch

  • 72px Apple iPad Home Icon

  • 96px Pris en charge par la plate-forme TV de Google

  • 114px écran d'accueil de l'iPhone 4+, soit le double de la taille de l'original de 57px trouvé dans les iPhones de première génération.

  • 144px Peut être utilisé avec Apple iPod touch (Dernière version moderne, besoin de confirmation à ce sujet).

  • 128px Chrome Web Store

  • 195px Opera Numérotation abrégée - La version 11 prend en charge 114x114px jusqu’à un maximum de 256x160px.

Pour des choses générales comme Internet Explorer 9, GoogleTV, Andriod, ce qui suit peut être utilisé pour spécifier un PNG plutôt qu'un ICO.

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

Pour Apple Devices, vous pouvez utiliser les éléments suivants:

<!-- iPhone 3G -->
<link rel="Apple-touch-icon-precomposed" href="Apple-touch-icon-precomposed.png">
<!-- iPhone 4+ -->
<link rel="Apple-touch-icon-precomposed" sizes="114x114" href="Apple-touch-icon- 114x114-precomposed.png&rdquo;>
<!-- iPad -->
<link rel="Apple-touch-icon-precomposed" sizes="72x72" href="Apple-touch-icon- 72x72-precomposed.png&rdquo;>

Taille du fichier

Les formats PNG sont souvent beaucoup plus volumineux qu'un ICO 16x16 pixels standard, mais le haut débit s'est amélioré depuis les débuts de l'ICO. Fournir un fichier PNG coloré devrait offrir une expérience plus riche lors de la visite de votre site Web. Si vous êtes préoccupé par la vitesse du site, vous pouvez le compresser davantage le format PNG utilisant une compression sans perte telle que "PNGCrush" "PngOpt" ou mon favori personnel Smushit par Yahoo, regardez vos fichiers PNG devenir encore plus petits que jamais.

1
Simon Hayter

Tous les navigateurs ne supportent pas les favicons de toutes tailles.

Je vous recommanderais d'utiliser un fichier .png '32X32'. Vous pouvez ajouter ce code dans la section head de votre site web: <link rel='icon' href='img/favicon.png' type='image/png' />

img voici le nom du dossier dans lequel le fichier serait présent. Pour les navigateurs qui ne peuvent pas afficher la favicon '32X32', vous pouvez utiliser un fichier .ICO '16X16' pour ces navigateurs.

0
Nilabh