Dime quién dibujó ese favicon

Cómo cambiar el favicon y una forma de citar la autoría

Retrato por hizo Mailén García en Mujeres en STEAM

¿Qué es un favicon? Es un ícono, una imagen simple, que se ve en las previsualizaciones de la web y en las pestañas de los navegadores. En este post cuento cómo personalizar el favicon de una web de este estilo, es decir, armada con R blogdown, RMarkdown y Hugo Academic y cómo se me ocurrió reconocer la autoría de la imagen.

Un favicon podría ser una foto, pero es bueno que sea un dibujo simplificado, un logo o quizás tu emoji preferido. Por defecto, el favicon de Hugo Academic es este:


El retrato de Mujeres en STEAM que se volvió favicon

El origen del dibujo

STEAM es un acrónimo que conocí hace poco y significa: ciencia, tecnología, ingeniería, arte y matemáticas. Pero no lo conocí así aislado sino con campañas como #MujeresEnSTEAM o #WomenInSTEM. Acá en Argentina, Mariana Silvestro lleva adelante un hermoso proyecto, en el que difunde que ¡somos muchas las mujeres que hacemos ciencia! Y encima suma los bellos retratos de Mailén García.

En septiembre de 2020, Mariana me entrevistó y este es el video breve:

También se puede ver la video-entrevista completa.

Lo que aquí viene al caso es que además hay una nota escrita, que lleva el retrato-ilustración de Mailén García. ¡Es ese retrato el que hoy se convierte en favicon!

Las/los invito a conocer más historias de mujeres científicas y tecnólogas y acercarlas a las pibas que dudan meterse en esto hermoso que es investigar (o programar, o trabajar en tecnología, o simplemente encontrar y seguir su vocación). Pueden visitar Mujeres en STEAM y también suscribirse al canal de Youtube.

Cómo configurar un favicon en Blogdown + Hugo

En primer lugar, hay que tener una imagen png en formato 512 x 512 píxeles. Se puede hacer como quieras: yo usé la web favicon.io para convertir el dibujo de Mailén García a ese formato. La imagen resultante debe renombrarse “icon.png”.

En las versiones recientes de Hugo (tengo v.0.74.3), basta copiar “icon.png” al directorio: “assets/images/”. Listo.

Cómo elegí reconocer la autoría del Favicon

Para reconocer la autoría del dibujo, decidí incluir un texto en el pie de página o “footer”:

Para hacer esto, busqué el archivo “site_footer.html” en el directorio “themes/hugo-academic/layouts/partials/”. Agregué el texto deseado luego de la atribución de Hugo Academic. Pueden ver mi archivo acá.


Extra. ¿Querés hacer un comentario? 😊

Dejame un mensaje con utterances

Vi la charla Bloguear con R Markdown de Maëlle Salmon en LatinR 2020 y me entusiasmé con varias cosas! Como por ejemplo aprendí que un post puede ser un contenido breve como este. También aprendí a insertar emoticones 😁 🌈 y, un poco más serio, a configurar la web para que quienes usan gitbub pueden hacer comentarios. Los comentarios se hacen a través de utterances (software libre), que realiza un issue de git por cada comentario que dejen. Maëlle explica cómo configurarlo aquí y la guía oficial también es muy clara.

Sólo agrego que en el caso de un sitio con plantilla Hugo Academic, es posible elegir que utterances esté en algunas de las categorías de la web y no en otras. Por ejemplo, en mi caso agregué el formulario de comentarios en los “Posts” pero no en las “Ficciones” (porque creo que el posible público que lee las ficciones mayormente no usa github). Para ello, creé un directorio: “/layouts/post”. Dentro de esta carpeta creé un archivo “single.html” que copié de otro layout de Hugo y si quieren pueden ver en el repositorio de mi sitio. Lo importante es reemplazar el código que está entre <script y </script> por aquel que generen para su propia web siguiendo el instructivo de utterances. Tengan cuidado de no modificar el layout dentro de la carpeta themes de Hugo (gracias Maëlle por compartir este tweet de Alison Hill!).

Natalia Morandeira
Natalia Morandeira
Investigadora Adjunta

Soy bióloga, especializada en ecología de paisajes, vegetación y teledetección. Investigadora y escritora de ficción.

Relacionado