Question Est-ce qu'un favicon doit être 32x32 ou 16x16?


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

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


567
2017-10-25 13:09


origine


Réponses:


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

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

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

IE 10 sur Windows 8.0 nécessite des images PNG et une couleur de fond 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 plateformes recherchent des fichiers PNG avec diverses résolutions, comme le Image 96 x 96 pour Google TV ou la Image 228x228 pour la Côte d'Opéra.

Regarde ça liste des images favicon pour une référence complète.

TLDR: Ceci générateur de favicon peut générer tous ces fichiers à la fois. Le générateur peut également être implémenté comme un plugin WordPress. Divulgation complète: Je suis l'auteur de ce site.


1213
2017-10-25 12:51



Je ne vois aucune information à jour ici, alors voici:

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

16 x 16 - Taille standard pour les navigateurs
24 x 24 - IE9 taille du site épinglé pour l'interface utilisateur
32 x 32 - Onglet 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 tactile jusqu'à iOS7
64 x 64 - Site Windows, barre latérale de Safari Reader List dans HiDPI / Retina
70 x 70 - Win 8.1 Metro carrelage
72 x 72 - iPad tactile jusqu'à iOS6
76 x 76 - iOS7
96 x 96 - GoogleTV
114 x 114 - Retina iPhone tactile jusqu'à iOS6
120 x 120 - iPhone retina touch iOS7
128 x 128 - Application Chrome Web Store, Android
144 x 144 - IE10 Metro carrelage pour site épinglé, iPad rétine jusqu'à iOS6
150 x 150 - Win 8.1 Metro carrelage
152 x 152 - iPad retina touch iOS7
196 x 196 - Android Chrome
310 x 150 - Win 8.1 large Metro carrelage
310 x 310 - Win 8.1 Metro carrelage

Pris à partir de ici.


96
2017-11-07 17:45



Je ne suis pas sûr si / comment les navigateurs d'échelle de grandes icônes, mais le W3C suggère ce qui suit1:

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


1  w3c.org: Comment ajouter un favori à votre site (brouillon en développement).


71
2017-10-25 13:13



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

Mon ami et moi avons créé une application juste pour ça! vous pouvez le trouver dans faviconit.com

Nous l'avons fait, donc les gens n'ont pas besoin de créer toutes ces images et les bonnes balises à la main, de créer toutes ces choses qui m'ennuient beaucoup!

J'espère que cela vous aide!


49
2018-04-22 23:18



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

ico prend également en charge la transparence, mais je ne suis pas sûr que ce soit un canal alpha comme PNG; probablement plus comme GIF où il est ou il est éteint.


6
2017-10-25 13:14



Selon le Article de Wikipédia sur Favicon, Internet Explorer ne prend en charge que le format ICO pour les favicons.

Je voudrais coller avec deux icônes différentes.


2
2017-10-25 13:12



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


2
2017-11-16 22:34



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

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


1
2017-10-25 13:13