Creating a Favicon with R

I use the Hugo Coder theme for this website, but I don’t like the default favicon, so I decided to make a new one using ggplot2. For those of you who don’t know, a favicon is the little icon that shows up on your browser tab next to the website name (in most browsers).

How hard could it be, right? As always, let’s load the tidyverse.

library(tidyverse)

First, I manually set all of the points for my graphic. This was a little tedious and involved a lot of trial and error, but for such a basic geometric shape it wasn’t too bad. Then, I plotted the points using geom_path.

favicon_data <- read_table2("x y
                           .50 .00
                           .00 .66
                           .16 .9
                           .84 .9
                           1.0 .66
                           .50 .00
                           .33 .66
                           .50 .9
                           .66 .66
                           .50 .00
                           .00 .66
                           1.0 .66
                           .84 .9
                           .66 .66
                           .33 .66
                           .16 .9")

# create ggplot of favicon
favicon <- favicon_data %>%
  ggplot(aes(x = x, y = y)) +
  geom_path(lineend = "round", linejoin = "round", size = .5) +
  theme_void() +
  theme(aspect.ratio = .9) # Make it a little more squatty
favicon

I used the convinient ggsave function to save an svg and 16×16 png of the favicon. The line width is a function of the plot size, so I had to reset it for the larger 32×32 favicon.

# save favicons
ggsave("favicon.svg", scale = 1, width = .25, height = .25, bg = "transparent")
ggsave("favicon16.png", scale = 1, width = 1, height = 1, dpi = 16, bg = "transparent")

favicon <- favicon_data %>%
  ggplot(aes(x = x, y = y)) +
  geom_path(lineend = "round", linejoin = "round", size = 1) +
  theme_void() +
  theme(aspect.ratio = .9)

# save the 32x32 favicon
ggsave("favicon32.png", plot = favicon, scale = 1, width = 1, height = 1, dpi = 32, bg = "transparent")

The svg image looks way better on my high-resolution screen, and I also figured out that svgs are human-readable, which is super cool. But it appears that the most common browsers don’t support them, so I’ll stick with the rasterized images for my website.