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

692

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?

favicon

— Alex G
source

voir ma réponse stackoverflow.com/a/45301651/661584 beaucoup plus facile. pourrait aider. merci

— MemeDeveloper

1448

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.

— philippe_b
source

136

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

— Mat
source

8

Y a-t-il une référence pour cette liste?

— Abdulhameed

81

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) .

— Daniel Vassallo
source

En 2006, je suis arrivé à des conclusions similaires (dans "Favicon Primer" (avril 2006; par hakre) ), mais je ne connaissais pas ce matériel du W3C 2005 (oui, le seraching + la lecture aide :)). Merci pour le résumé. Cette fois, j'ai écrit et non ou mais c'était aussi sur les couleurs 4 bits.

— hakre

2

C'est un projet depuis 2005? Oo

— mcont

7

Cette utilisation devrait maintenant être remplacée par la norme html5 . Il n'a pas de limitation sur la taille de l'icône et a fourni un exemple avec une icône 32768x32768.

— rhgb

1

@rhgb Merci! J'ai regardé autour de moi confus pourquoi diable [current year]j'ai encore besoin de faire face à certaines limitations de conneries quand les choses que vous pouvez faire avec seulement CSS seul sont assez incroyables, et j'ai failli manquer votre réponse. Je vais simplement utiliser ce que je veux alors et si quelque chose ne le prend pas en charge, c'est leur problème, conformément à la norme.

— Sahsahae

63

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!

— PedroHCan
source

6

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é.

— Brad
source

1

Je crois que XP et plus prennent en charge un format de type PNG (PNG lui-même?) Pour les images RGBA. egressive.com/tutorial/… montre comment vous pouvez utiliser GIMP pour inclure de telles images dans un .icofichier.

— SamB

1

ICO utilise un canal alpha 1 bit tandis que PNG a 8 bits comme sur les autres canaux. L'ICO suffira pour les icônes simples, mais dans certains cas, le PNG sera plus souhaitable en raison de cette différence.

— Steen Schütt

SamB a presque raison et Time Sheep a à moitié raison. ICO prend en charge les images PNG à y incorporer, et les PNG incorporés doivent être des images RGBA 32 bits.

— Cornstalks

2

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.

— Pekka
source

2

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.

— Trevor
source

3

désolé mais il y a beaucoup plus que votre réponse ne le suggère. Veuillez consulter stackoverflow.com/a/45301651/661584 et lisez si vous le souhaitez - son complexe fou. pourrait aider. merci

— MemeDeveloper

1

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/

— Richard
source

2

vous pouvez avoir plusieurs tailles d'icônes dans le même fichier.

— Brad

Merci beaucoup, c'est un excellent article. Encore un peu mystérieux de ce que les appareils Apple feraient avec les fichiers ico contenant plusieurs images.

— Alex G

1

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)

— snoob dogg
source