Tell me who drew that favicon

How to change the favicon and a way to attribute authorship

Portrait by Mailén García in Mujeres en STEAM

What is a favicon? It’s an icon, a simple image seen in the web previews and navigator tabs. Here I show how to personalize the favicon of a website like this one, i.e. made with R blogdown, RMarkdown and Hugo Academic and how I cited the authorship of the image.

A favicon can be a photo, but it’s better to use a simplified drawing, a logo or maybe your favorite emoji. By default, the Hugo Academic favicon is:


The portrait of Mujeres en STEAM that became favicon

The origin of the drawing

STEAM is an acronym that means: Science, Technology, Engineering, Art and Mathematics. I’ve learned this term in campaigns such as #MujeresEnSTEAM or #WomenInSTEM. In Argentina, Mariana Silvestro carries out a beautiful project, spreading that a lot of women are doing science! And also, the project features portraits by Mailén García.

In September 2020, Mariana interviewed me, and this is the short video trailer (in Spanish):

The full video-interview is also available.

The fact that is related to this post is that Mujeres en STEAM includes a written post, which is illustrated by Mailén García. That is the portrait that today becomes a favicon!

I invite you to know more stories of scientists and tech women, and to spread them to those girls that hesitate to get into this beautiful research world (or program, or work in technology, or simply find and follow their vocation). You can visit Mujeres en STEAM and also subscribe to the Youtube channel.

How to configure a favicon in Blogdown + Hugo

First, you need a png image formatted in 512 x 512 pixels. You can get this image size as you wish, I used the web favicon.io. The resulting image has to be named “icon.png”.

In recent Hugo versions (I use v.0.74.3), you just need to copy “icon.png” into the path: “assets/images/”. Done.

How I chose to cite the favicon authorship

To attribute the authorship of the drawing, I decided to include a text in the site footer:

To do this, I looked for the file “site_footer.html” in the path “themes/hugo-academic/layouts/partials/”. I added the desired text after the Hugo Academic attribution. You can see my file here.


Extra. Do you have a comment? 😊

Leave me a message with utterances

I attended the lecture-workshop Bloguear con R Markdown by Maëlle Salmon in LatinR 2020 and got enthusiastic about several things! For example, I learned that a post can be as brief as this one. I also learnt how to insert emojis 😁 🌈. Also, how to configure the web so that github users can leave me comments. The comments are made through utterances (open source), which files a git issue for each comment. Maëlle explains who to configure it here and the official guide is also very clear.

I add that given a site with Hugo Academic theme, you can choose to use utterances in some of the web categories and not in others. For example, I added the comment form in the “Posts” but not in the “Fictions” (because I think that the potential readers of the fictions mostly don’t use github). To configure utterances, I created a folder “layouts/post”. In this folder, I created a file “single.html” that I copied from other Hugo layout and you can see in my site repository. You need to replace the code between <script and </script> for the code generated for your own web following the utterances guide. Be careful not to modify the layouts within the Hugo themes folder (thanks Maëlle for sharing this tweet by Alison Hill!).

Natalia Morandeira
Natalia Morandeira
Adjunct Researcher

I’m a biologist, specialized in Landscape Ecology, Plant Ecology & Remote Sensing. I’m also a fiction writer.

Related