Favicon diferente para el desarrollo

Apuesto a que muchos de nosotros tendemos a tener el sitio web de producción y el sitio web de desarrollo activos simultáneamente. Es casi un cliché de desarrollador en este punto hacer algún cambio local, actualizar, actualizar, actualizar, actualizar y simplemente no ver el cambio, sólo para descubrir que estaba mirando el sitio web de producción, no su sitio web de desarrollo local.

Es divertido al principio, pero frustrante si sucede con frecuencia. También es totalmente evitable al tener una diferencia visual ¹ obvia entre los dos sitios. ¿Una manera fácil de hacer eso? Diferentes favicons.

Me puse a hacer eso de cambiar el favicon para el desarrollo local. De lo contrario, resulta muy confuso cuando tienes ambos abiertos, lo cual es muy común para mí. pic.twitter.com/6Eu4MMfp5I

– Chris Coyier (@chriscoyier) 17 de marzo de 2020

No hay ningún truco real para esto. Literalmente tengo un favicon.icoarchivo diferente en desarrollo que en producción. En este sitio (WordPress), solo controla la versión e implementa la wp-contentcarpeta, que no es la raíz del sitio donde reside el favicon. Cualquier archivo en la raíz tengo que ingresarlo mediante SFTP manualmente para cambiarlo. Simplemente cambié mi versión local y ahí está, siendo todas diferentes.

Otros engaños

• Simplemente no tenga un favicon local para que muestre el logotipo predeterminado para ese navegador. Bastante diferente.
• Un archivo SVG dinámico que muestra el nombre de la rama ( ¡¿Quéaaa?! )
• Chrome tiene una función experimental de “grupos de pestañas”. Tenga diferentes grupos de pestañas para desarrollo y producción.
• Utilice una extensión del navegador para agregar prefijos de títulos.
• Utilice una extensión del navegador para colorear automáticamente los favicons según las coincidencias de URL.

Hablando de favicons…

Esto me hace preguntarme cuáles son las mejores prácticas para los favicons en 2020, al menos para sitios web de contenido variado como este.

Odio decirlo, pero realmente no me importa cuál es el ícono cuando alguien agrega este sitio a la pantalla de inicio de un iPad, ¿sabes? Aparte de un compañero que quería una copia de toda la base de datos para usar el sitio sin conexión para enseñar a los prisioneros, nadie me ha preguntado nunca sobre “instalar” CSS-Tricks.

Tampoco me importa el color del mosaico en una tableta con Windows 8 ni personalizar el color del navegador Chrome en Android. Ese tipo de cosas tiende a ser parte del proceso al “generar” favicons.

Me importa que el favicon se vea bien en pantallas de alta resolución (un gráfico de 32×32 no es un gran derroche). Me gusta la idea de los favicons SVG. Me gusta la idea de asegurarme de que se maneje el modo oscuro. Me gusta la idea de hacer esto con la menor cantidad de código y archivos posibles. ¿Alguien ha profundizado en esto últimamente y quiere iluminarme?

1. Diferencia “visual”. Mmm. Me pregunto qué se podría hacer por los desarrolladores con discapacidad visual. ¿Ideas?