Favicon : bonnes pratiques

WRInaute passionné
Salut à tous,

Le favicon semble être incontournable mais quel code doit-on insérer et quels formats d'icons doit-on privilégier ?

Certains site de générateur de favicon nous invite à insérer tout ce code :
Code:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
Est-ce vraiment nécessaire d'insérer tout ce code et d'avoir toutes ces icons dans tous ces formats ?

Quelles sont les bonnes pratiques en matière de favicons ?

Merci pour vos réponses.
 
WRInaute passionné
J'utilise ce générateur : https://realfavicongenerator.net/
Il n'y a pas toutes ces balises meta mais on lie un fichier manifest.json

Tout ce qu'il génère est très recommandé oui. Facultatif, mais recommandé car sinon cela fait des icônes baveuses à certains endroits, sur mobile, etc. Du moins, si on ne doit laisser qu'une icône, la mettre en grand format, pas 16x16...

Apple a voulu faire ses formats à lui, comme depuis l'origine de la création de cette boîte (être incompatible, la devise d'Apple !), donc tout est doublé.
 
WRInaute impliqué
Il n’y a que 4 formats qui comptent encore pour iOS :
https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/
Et encore... si tu veux n’en avoir qu’un, tu peux :
https://stackoverflow.com/questions...d-apple-touch-icon-png-be-for-ipad-and-iphone
Le reste est composé de formats dépassés (iPhone edge/3g/3GS, par exemple). Comme il n’y a plus d’écrans non hidpi dans le monde iOS, tu ne risques pas d’avoir d’icône « baveuse » si tu ne proposes que le format le plus élevé. Si tu veux des icônes absolument parfaites pour tous les appareils Apple en circulation, il te faut les quatre formats de la doc Apple.
PS : mais bon, si tu génères les icônes automatiquement, ça ne sert à rien. Laisse iOS se charger de redimensionner.
 
Discussions similaires
Haut