Faviconos para dispositivos móviles

El favicono forma parte de la identidad visual de un sitio web.

Es esa pequeña imagen que se hace presente en las pestañas de navegadores y listas de favoritos. De allí su nombre: icono de favoritos (por favorites icon, en inglés).

En Blogger es algo que varios de nosotros hemos personalizado (desde Diseño > Favicon > Editar) apenas nos dimos cuenta de su existencia. Pero los tiempos han cambiado y han entrado demasiado en juego esos cacharritos trasladables sin los cuales no podemos estar: los móviles (telefonitos inteligentes y tabletas).

Y si en un dispositivo móvil anclamos a inicio una página que no tenga su favicono optimizado para la plataforma correspondiente, la imagen resultante en pantalla (el favicono) será una miniatura de la previsualización de esa página; no el favicono que hubimos diseñado para utilizarlo en Blogger.

¿Cómo hacer, entonces, para adaptar nuestro iconito a diversos dispositivos? (Recordemos la importancia hoy en día de optimizar todo para móviles).

La solución que he encontrado hace uso de tres plataformas: Blogger (o página web: aplica igual), Favicon Generator y GitHub. Favicon Generator nos proporciona los iconos y demás archivos (que subiremos a GitHub) y el código html (que insertaremos en la plantilla de Blogger).

¿Qué necesitamos?

Solo dos cosillas.

Primero: diseñar una buena imagen "cuadrada" para el icono (si es de 500 px de lado, mejor) en formato ráster (jpg, png o gif) o vectorial (svg). Podemos trabajarlo con transparencias, en forma de círculo, con los bordes redondeados, en fin… como más nos guste (recordemos que el formato jpg no admite transparencias).

Segundo: crear un perfil en GitHub e instalar su aplicación para escritorio. Para una mejor comprensión de todos, me permito recomendar este excelente artículo del bloguero español José María Chema Acuña Morgado.

Generación de los favicones para diversas plataformas

Entramos en Favicon Generator y subimos la imagen que hemos diseñado (hacemos clic en Select your Favicon picture).

Luego, configuramos los parámetros para cada plataforma.

Dado que en los blogs es imposible subir los archivos a la "raíz del sitio", en las opciones para generar los favicones seleccionamos: «I cannot or I do not want to place favicon files at the root of my web site. Instead I will place them here:». Y en el cuadro de diálogo colocamos la referencia al sitio de GitHub (enlace referenciado) donde alojaremos los archivos que se generarán, de la siguiente manera:

https://cdn.rawgit.com/Usuario/Repositorio/master/.

Dado que RawGit dejó de funcionar en octubre de 2019, todos los enlaces de repositorios nuevos no podrán redirigir a ese servidor. En cambio, los enlaces de repositorios referenciados con anterioridad seguirán funcionando (incluso podrán añadirse nuevos archivos a esos repositorios preexistentes, los cuales serán leídos sin ningún inconveniente).

Debido a ello, si la referencia que nos ocupa se hiciese ahora, deberá tener la siguiente estructura:
https://raw.githubusercontent.com/Usuario/Repositorio/master/.

Para este blog resulta:

https://cdn.rawgit.com/MoniAlus/Favicon/master/; donde MoniAlus es el nombre de usuario y Favicon el nombre del repositorio que contendrá los archivos una vez generados.

Teniendo en cuenta la modificación citada, deberá ser:
https://raw.githubusercontent.com/MoniAlus/Favicon/master/.

Por último, hacemos clic en Generate your Favicons an HTML code. Descargamos y descomprimimos los archivos para faviconos en una carpeta de fácil acceso y copiamos el código html en algún archivo de texto.

Creación del repositorio y subida de los archivos a GitHub

Iniciamos la aplicación de escritorio de GitHub. Hacemos clic en el signito "+" del ángulo superior izquierdo y, en la pestaña Create, colocamos el nombre del repositorio en el cuadro de diálogo Name (Favicon en este caso). Cliqueamos en Create repository para finalizar.

Luego, hacemos clic en Publish…

Colocamos la descripción del repositorio y cliqueamos en Publish Favicon.

Luego cliqueamos en la ruedita del ángulo superior derecho y, a continuación, en View on GitHub.

El enlace nos lleva a nuestra carpeta (repositorio) dentro de la plataforma de GitHub. Resulta imprescindible estar identificado (ver recuadro blanco en ángulo superior derecho de la plataforma) para poder acceder a la pestaña Upload files (recuadro rojo), donde haremos clic.

Por arrastre o selección procederemos a subir los archivos que se hubieron generado en Favicon Generator.

Para finalizar la subida, hacemos clic en Commit changes.

La plataforma procesa los archivos…

Y, una vez subidos, ya forman parte del repositorio.

Cabe aclarar que, accediendo a la pestaña Settings (destacada en línea punteada naranja), es posible (entre otras opciones) borrar el repositorio.

Inserción del código en Blogger

Proceso final; fácil y ya conocido por varios de nosotros.

Nos vamos a la plataforma de Blogger y, dentro de Tema, hacemos clic en Editar HTML.

Buscamos «/head» y, justo antes, pegamos el código que nos hubo proporcionado Favicon Generator (en recuadro rojo). Hacemos clic en Guardar tema.

Nuevamente aquí se hace hincapié en la modificación para los nuevos repositorios, que deberán observar la estructura:
https://raw.githubusercontent.com/Usuario/Repositorio/master/.

Para este caso es:
https://raw.githubusercontent.com/MoniAlus/Favicon/master/.

Dado que los enlaces los crea Favicon Generator, esta aclaración sirve sólo como alerta.

Chequeo del funcionamiento de los faviconos

Accedemos nuevamente a Favicon Generator y, en el cuadro de diálogo que está debajo de «Check your favicon» (en recuadro rojo), completamos la dirección de nuestro blog (o web) y cliqueamos en Check Favicon.

El sitio testea la dirección web y devuelve el análisis de los iconos disponibles según plataforma.

Pequeño «bug» pendiente de subsanación en el apartado Classic, desktop browsers: ha detectado dos iconos presentes (el de Blogger y el de Favicon Generator). Como es un mal menor, y el icono igual se visualiza (es el mismo), prefiero no andar tocando código con el riesgo de meter la pata.

Ejemplo 1: Utilización bajo entorno Android

En el sitio, desde Menú (…) seleccionamos Añadir a pantalla de inicio.

Si lo deseamos, el sistema nos permite asignarle otro nombre distinto al que viene por omisión. Cliqueamos en Añadir…

Y lo tenemos disponible en pantalla.

Ejemplo 2: Utilización bajo entorno Windows 8.1

Aquí también accedemos desde Menú (…) y hacemos clic en anclar a inicio.

Y, al igual que en el caso anterior, lo tenemos disponible en pantalla.

Algunas ideas para tomar decisiones

¿Necesitamos realmente favicones de este tipo en nuestro sitio? Pensando a futuro, sí. Insisto con la creciente utilización de telefonitos y tabletas para navegar. Por otro lado, si se está en duda, una buena opción es anclar a inicio la página en cuestión y ver cómo queda.

¿Cuántos sitios tienen los favicones optimizados para dispositivos móviles? Si de blogs hablamos, pocos (la investigación corre por cuenta del lector). Algunas webs recurren directamente a las aplicaciones (o apps), que de por sí instalan los iconitos.

¿Qué posibilidades hay de que un usuario ancle a inicio nuestro blog? Tantas como popular lo sea o éxito tenga: «¡Uy! Hace rato que no visito el blog de Fulano… ¿Qué habrá escrito en este tiempo? ¡Ah! Por acá tengo el iconito».

Pensemos, pues, en positivo y apostemos a futuro ;).