Comment tester un ensemble d'icônes tactiles de navigateur, de favicons et de vignettes pour un site Web?

8

Divers navigateurs et appareils ont leurs propres spécifications et normes pour les types d'icônes de type favicon qu'ils utilisent pour représenter les pages Web. Cette réponse sur le site de conception graphique donne un assez bon aperçu .

Supposons que vous ayez pris la peine de fournir un bon nombre de ces fichiers d'icônes avec les déclarations appropriées dans votre code HTML - mais vous n'avez pas tous les appareils qu'Apple a produits plus un appareil Windows 8 plus diverses versions d'Android à portée de main pour les tester tous.

Existe-t-il un moyen simple de tester votre configuration et de voir quels fichiers (le cas échéant) divers appareils et navigateurs auront, sans avoir tous les appareils nécessaires à portée de main?

Modifier pour être clair, je veux dire les icônes que les navigateurs aspirent et utilisent lorsqu'ils représentent une page Web dans des fonctionnalités de navigateur comme "les plus visitées", "favoris" ou lors de la création de raccourcis d'écran d'accueil, qui sont déclarés dans une page Web <head>mais ne sont pas affichés n'importe où dans la page Web <body>.

testing favicon icon resources user56reinstatemonica8
la source

Réponses:

3

J'ai toujours utilisé le générateur de favicon sur realfavicongenerator.net , qui vous permet de voir comment votre illustration choisie apparaîtra sur différents appareils. Il existe plusieurs options et vous pouvez essayer avec leur exemple d'icône pour tester. Commencez avec un SVG carré pour les meilleurs résultats car le site le convertira aux formats nécessaires et vous donnera un dossier compressé avec tout prêt à l'emploi.

C'est aussi un service gratuit sans inscription ou autre non-sens requis. Utilisez-le et faites un don si vous le jugez utile.

Tom Brossman
la source
J'adore ce site. Meilleur générateur de favicon que j'ai utilisé. Il générera un Zip avec tous vos fichiers image et générera toutes les lignes de code nécessaires à leur fonctionnement.
Disponible le
0

Je suggère d'essayer l'émulation de l'appareil dans Google Chrome. C'est la façon la plus simple que j'ai vue et cela devrait fonctionner. Voici un article complet à ce sujet, https://developer.chrome.com/devtools/docs/device-mode

Ben Hoffman
la source
J'ai essayé cela, mais je n'ai pas pu trouver comment le faire faire quelque chose qui afficherait ensuite l'icône tactile comme le ferait le navigateur, par exemple sur une page à onglet vide. Savez-vous si c'est possible?
user56reinstatemonica8
Je ne pense pas qu'il existe un moyen facile de tester cette icône.
Ben Hoffman
-1

Il suffit de les tester en utilisant Mozilla Firefox, la plupart des développeurs d'applications Web utilisent cette méthode pour tester

Ashraf Zebronet
la source
Cela ne répond pas du tout à la question. "Il suffit de tester en utilisant ..." l'OP demande comment tester. Je serais ravi de voir cela éliminé de telle sorte que nous puissions utiliser FF pour tester comment des éléments tels que windows-tile-150x150.png représentent un site dans FireFox, par exemple.
Will Lanni