Un favicon doit-il être 32x32 ou 16x16?

Je voudrais utiliser une seule image à la fois comme favicon normal et comme favicon convivial pour iPhone / iPad.

Est-ce possible? Une échelle PNG 72x72 compatible iPad serait-elle liée à un favicon de navigateur normal? Ou dois-je utiliser une image 16x16 ou 32x32 distincte?

Pour IE, Microsoft recommande 16x16, 32x32 et 48x48 emballés dans le fichier favicon.ico .

Pour iOS, Apple recommande des noms de fichier et des résolutions spécifiques , au plus 180x180 pour les derniers appareils exécutant iOS 8.

Android Chrome utilise principalement un manifeste et s'appuie également sur l'icône tactile d'Apple.

IE 10 sur Windows 8.0 nécessite des images PNG et une couleur d'arrière-plan et IE 11 sur Windows 8.1 et 10 accepte plusieurs images PNG déclarées dans un fichier XML dédié appelébrowserconfig.xml .

Safari pour Mac OS X El Capitan introduit une icône SVG pour les onglets épinglés .

Certaines autres plates-formes recherchent des fichiers PNG avec différentes résolutions, comme l' image 96x96 pour Google TV ou l' image 228x228 pour Opera Coast .

Regardez cette liste de photos favicon pour une référence complète.

TLDR: Ce générateur de favicon peut générer tous ces fichiers à la fois. Le générateur peut également être implémenté en tant que plugin WordPress . Divulgation complète: je suis l'auteur de ce site.

Je ne vois aucune information à jour répertoriée ici, alors voici:

Pour répondre à cette question maintenant, 2 favicons ne le feront pas si vous voulez que votre icône soit superbe partout. Voir les tailles ci-dessous:

16 x 16 - Taille standard pour les navigateurs
24 x 24 - Taille du site épinglé IE9 pour l'interface utilisateur
32 x 32 - Nouvel onglet IE, bouton de la barre des tâches Windows 7+, barre latérale de la liste de lecture Safari
48 x 48 - Site Windows
57 x 57 - iPod touch , iPhone jusqu'à 3G
60 x 60 - iPhone touch up jusqu'à iOS7
64 x 64 - Site Windows, Safari Reader List sidebar in HiDPI / Retina
70 x 70 - Win 8.1 Metro tile
72 x 72 - iPad touch up to iOS6
76 x 76 - iOS7
96 x 96 - GoogleTV
114 x 114 - iPhone retina touch up to iOS6
120 x 120 - iPhone retina touch iOS7
128 x 128 - Chrome Web Store app, Android
144 x 144 - IE10 Metro tile for pinned site, iPad retina up to iOS6
150 x 150 - tuile Metro 8.1 Win
152 x 152 - iPad retina touch iOS7
196 x 196 - Android Chrome
310 x 150 - Win 8.1 carreau Metro large
310 x 310 - Win 8.1 carreau Metro

Je ne sais pas si / comment les navigateurs mettent à l'échelle les grandes icônes, mais le W3C suggère ce qui suit ¹ :

Le format de l'image que vous avez choisie doit être de 16 x 16 pixels ou 32 x 32 pixels, en utilisant des couleurs 8 bits ou 24 bits. Le format de l'image doit être au format PNG (standard W3C), GIF ou ICO.

¹ w3c.org: comment ajouter un Favicon à votre site (brouillon en développement) .

En fait, pour que votre favicon fonctionne correctement dans tous les navigateurs, vous devrez ajouter plus de 10 fichiers aux tailles et formats corrects.

Mon ami et moi avons créé une application juste pour cela! vous pouvez le trouver sur faviconit.com

Nous l'avons fait, afin que les gens n'aient pas à créer toutes ces images et les bons tags à la main, créez-les tous pour m'énerver beaucoup!

Vous pouvez avoir plusieurs tailles d'icônes dans le même fichier. Je crée régulièrement des favicons ( .icofichiers) de 48, 32 et 16 pixels. Vous pouvez ajouter n'importe quelle taille d'image que vous souhaitez. La question est, l'iPhone utilisera-t-il un icofichier?

icoprend également en charge la transparence, mais je ne sais pas s'il s'agit d'un canal alpha comme PNG; probablement plus comme GIF où il est activé ou désactivé.

Selon l'article de Wikipédia sur Favicon, Internet Explorer prend uniquement en charge le format ICO pour les favicons.

Je resterais avec deux icônes différentes.

Le favicon ne doit pas nécessairement être 16x16 ou 32x32. Vous pouvez créer un favicon de 80x80 ou 100x100, assurez-vous simplement que les deux valeurs sont de la même taille, et évidemment ne le faites pas trop grand ou trop petit, choisissez une taille raisonnable.

Vous aurez besoin de fichiers séparés pour chaque résolution, je le crains. Il y a un très bon article sur le moniteur de campagne décrivant comment ils ont également créé et mis en œuvre leurs icônes pour chaque appareil iOS:

http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/

Comme je l'ai appris, aucune de ces plusieurs solutions n'est parfaite. L'utilisation d'un générateur de favicon est en effet une bonne solution mais leur nombre est écrasant et difficile à choisir. Je voudrais ajouter que si vous souhaitez que votre site Web soit activé pour PWA, vous devez également fournir une icône 512x512 comme indiqué par Google Devs :

icônes dont une version 192px et une version 512px

Je n'ai pas rencontré beaucoup de générateurs de favicon appliquant ces critères ( Firebase le fait , mais il y a beaucoup de choses qu'il ne fait pas). La solution doit donc être un mélange de nombreuses autres solutions.

Je ne sais pas, aujourd'hui au début de 2020, si fournir un 16x16, 32x32 est toujours d'actualité. Je suppose que cela compte toujours dans certains contextes comme, par exemple, si vos utilisateurs utilisent encore IE pour une raison quelconque (cela se produit toujours dans certaines sociétés privées qui ne migrent pas vers un navigateur plus récent pour certaines raisons)