Come testare una serie di icone, favicon e riquadri touch del browser per un sito Web?

8

Vari browser e dispositivi hanno le proprie specifiche e standard per i tipi di icone simili a favicon che usano per rappresentare le pagine web. Questa risposta sul sito di progettazione grafica offre una panoramica abbastanza buona .

Supponiamo di esserti preso la briga di fornire un buon numero di questi file icona con le dichiarazioni appropriate nel tuo HTML - ma non ti capita di avere tutti i dispositivi che Apple ha prodotto oltre a un dispositivo Windows 8 più varie versioni di Android a portata di mano per testarli tutti.

Esiste un modo semplice per testare la configurazione e vedere quali file (se presenti) vari dispositivi e browser avranno, senza avere tutti i dispositivi necessari a portata di mano?

Modifica per essere chiari, intendo le icone che i browser passano su e usano quando rappresentano una pagina Web nelle funzionalità del browser come "più visitate", "preferiti" o quando si creano collegamenti alla schermata principale, che sono dichiarati in una pagina Web <head>ma non vengono visualizzati ovunque nella pagina web <body>.

— user56reinstatemonica8
fonte

3

Ho sempre usato il generatore favicon su realfavicongenerator.net , che ti consente di vedere come appariranno le opere d'arte scelte su diversi dispositivi. Ci sono alcune opzioni e puoi provare con la loro icona di esempio per testare. Inizia con un SVG quadrato per i migliori risultati in quanto il sito lo convertirà nei formati necessari e ti darà una cartella compressa con tutto pronto per l'uso.

È anche un servizio gratuito senza registrazione o altre sciocchezze richieste. Usalo e fai una donazione se lo ritieni utile.

— Tom Brossman
fonte

Adoro quel sito. Il miglior generatore di favicon che ho usato. Genererà una zip con tutti i tuoi file di immagine e genererà tutte le righe di codice necessarie per far funzionare.

— Disponibilità dal

0

Suggerirei di provare l'emulazione del dispositivo in Google Chrome. È il modo più semplice che ho visto e dovrebbe funzionare. Ecco un articolo completo su di esso, https://developer.chrome.com/devtools/docs/device-mode

— Ben Hoffman
fonte

Ho provato questo, ma non sono riuscito a capire come farlo fare qualcosa che avrebbe quindi mostrato l'icona a sfioramento come il browser avrebbe ad esempio su una pagina vuota. Sai se è possibile?

— user56reinstatemonica8,

Non penso che ci sia un modo semplice per testare quell'icona.

— Ben Hoffman,

-1

Basta testarli utilizzando Mozilla Firefox, la maggior parte degli sviluppatori di applicazioni Web utilizza questo metodo per i test

— Ashraf Zebronet
fonte

Questo non risponde affatto alla domanda. "Basta testare usando ..." l'OP chiede come testare. Mi piacerebbe vederlo svuotato in modo tale da poter usare FF per testare come oggetti come windows-tile-150x150.png rappresentino un sito in FireFox, per esempio.

— Will Lanni,