Creating the favicon for this website with ggplot2

Favicon – what is it?

Quoting from Mozilla’s documentation:

A favicon (favorite icon) is a tiny icon included along with a website, which is displayed in places like the browser’s address bar, page tabs and bookmarks menu.

[…]

They are used to improve user experience and enforce brand consistency. When a familiar icon is seen in the browser’s address bar, for example, it helps users know they are in the right place.

What kind of graphic am I trying to create?

I’m trying to re-create the favicon used for a previous iteration of my personal website:

• Square shape
• Solid blue background color
• My initials “GT” positioned on top, towards the bottom of the square.

I’m starting simple. Should be doable, right?

Setup

Installing and loading ggplot2.

install.packages('ggplot2')
library("ggplot2")

Here, I set the default size of my plots for the rest of the document. It is an important setting since I will generate a square icon and, by default, dimensions are 7 x 5 inches.

knitr::opts_chunk$set(
  fig.width = 5,
  fig.height = 5
)

Creating the graphic

I decided to tackle the blue background first. I remembered that ggplot has different geoms to create a square. I looked up the documentation and started coding.

I iterated through geom_raster(), geom_rect() and landed on geom_tile(). It is best suited for my use case. I just need to define the size of the square and use the origin (0,0) as the center of the square.

square_size <- 5
my_blue <- "#0063dc"

(p <- ggplot() +
  geom_tile(
    aes(x = 0, y = 0, width = square_size, height = square_size),
    fill = my_blue
  ))

Now, I will 1) add the text, position it, and then 2) remove all plot elements like grid lines, axes, etc.

(p <- p +
  geom_text(
    aes(
      x = 0,
      y = -square_size / 5,
      label = "GT",
      family = "Inter",
      fontface = "bold"
    ),
    color = "white",
    size = square_size / 2,
    size.unit = 'in'
  ) +
  theme_void()
)

Voilà!

On purpose, I defined the position of the text and its size as a factor of the variable square_size. I hope that it will make it easier to export this graphic in different sizes after.

Regarding the font, I’m using Inter. I had to download and install it on Mac OS for it to become available in the plot.

Saving in various sizes and formats

This is when things get more complicated for two reasons:

1. No clear spec for favicons exists. It depends on browsers, mobile OSes. Different formats, different sizes.
2. Resizing a plot is not as straightforward as I thought

ggsave(
  p,
  filename = "icons/favicon_problem.png",
  dpi = 'retina', #retina = 320, according to documentation
  width = 96,
  height = 96,
  units = 'px'
)

# Function that creates the icon with sizes in inches
create_icon <- function(square_size_inches) {
  p <- ggplot() +
    geom_tile(
      aes(
        x = 0,
        y = 0,
        width = square_size_inches,
        height = square_size_inches
      ),
      fill = my_blue
    ) +
    geom_text(
      aes(
        x = 0,
        y = -square_size_inches / 5,
        label = "GT",
        family = "Inter",
        fontface = "bold"
      ),
      color = "white",
      size = square_size_inches /2,
      size.unit = 'in'
    ) +
    theme_void()

    return(p)
  }

# Function that uses a size in pixels and a dpi to convert it into inches, create the icon and save it to disk
create_and_save_icon <- function(filename, size_pixels, dpi = 320) {
  square_size_inches <- size_pixels / dpi
  icon <- create_icon(square_size_inches)

  ggsave(
    plot = icon,
    filename = filename,
    dpi = dpi,
    width = size_pixels,
    height = size_pixels,
    units = 'px',
    bg = my_blue #otherwise white outline in png
  )
}

create_and_save_icon(filename = 'icons/favicon_32x32.png', size_pixels = 32, dpi = 320)

sizes = c(32, 96, 180)

for (size in sizes) {
  filename = paste0('icons/favicon_', size, 'x', size, '.png')

  create_and_save_icon(filename = filename, size_pixels = size, dpi = 320)
}

icon <- create_icon(1)
svg("icons/favicon.svg", width = 1, height = 1)
print(icon)
invisible(dev.off())