¿Cómo probar un conjunto de iconos táctiles del navegador, favicons y mosaicos para un sitio web?

8

Varios navegadores y dispositivos tienen sus propias especificaciones y estándares para los tipos de íconos tipo favicon que usan para representar páginas web. Esta respuesta en el sitio de diseño gráfico ofrece una visión general bastante buena .

Suponga que se ha tomado la molestia de proporcionar una buena cantidad de estos archivos de iconos con las declaraciones apropiadas en su HTML, pero no tiene todos los dispositivos que Apple ha producido más un dispositivo con Windows 8 más varias versiones de Android a mano para probarlos a todos.

¿Hay alguna forma directa de probar su configuración y ver qué archivos (si los hay) tendrán varios dispositivos y navegadores, sin tener todos los dispositivos necesarios a mano?

Editar para que quede claro, me refiero a los íconos que los navegadores utilizan para representar una página web en las funciones del navegador como "más visitado", "favoritos" o al crear accesos directos a la pantalla de inicio, que se declaran en una página web <head>pero no se muestran en cualquier lugar de la página web <body>.

testing favicon icon resources user56reinstatemonica8
fuente

Respuestas:

3

Siempre he usado el generador de favicon en realfavicongenerator.net , que le permite ver cómo su obra de arte elegida aparecerá en diferentes dispositivos. Hay bastantes opciones y puede probar con su icono de ejemplo para probar. Comience con un SVG cuadrado para obtener los mejores resultados, ya que el sitio lo convertirá a los formatos necesarios y le dará una carpeta comprimida con todo listo para usar.

También es un servicio gratuito sin registro u otras tonterías requeridas. Solo úselo y done si lo encuentra útil.

Tom Brossman
fuente
Me encanta ese sitio El mejor generador de favicones que he usado. Generará un Zip con todos sus archivos de imagen y generará todas las líneas de código necesarias para que funcionen.
Disponible el
0

Sugeriría probar la emulación del dispositivo en Google Chrome. Es la forma más fácil que he visto y debería funcionar. Aquí hay un artículo completo sobre él, https://developer.chrome.com/devtools/docs/device-mode

Ben Hoffman
fuente
Intenté esto, pero no pude averiguar cómo hacer que haga algo que luego muestre el ícono táctil como lo haría el navegador, por ejemplo, en una página de pestaña vacía. ¿Sabes si eso es posible?
user56reinstatemonica8
No creo que haya una manera fácil de probar ese icono.
Ben Hoffman
-1

Simplemente pruebe esto usando Mozilla Firefox, la mayoría de los desarrolladores de aplicaciones web están usando este método para probar

Ashraf Zebronet
fuente
Esto no responde a la pregunta en absoluto. "Solo prueba usando ..." el OP pregunta cómo hacer la prueba. Me encantaría ver esto enjuagado de tal forma que podamos usar FF para probar cómo elementos como windows-tile-150x150.png representa un sitio en FireFox, por ejemplo.
Will Lanni