Site icon R-bloggers

Creating a Favicon with R

[This article was first published on R on jmarriott.com, and kindly contributed to R-bloggers]. (You can report issue about the content on this page here)
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

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.

To leave a comment for the author, please follow the link and comment on their blog: R on jmarriott.com.

R-bloggers.com offers daily e-mail updates about R news and tutorials about learning R and many other topics. Click here if you're looking to post or find an R/data-science job.
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.