Generate selfie favicons

Just over 10 years ago, in the green sea off the west coast of Malaysia, I shot an underwater selfie. That image has since become part of my online presence. Now also as favicons, a set generated with Node.js.

Face blowing a kiss

Until recently, I used an emoji as favicon. The icon set was generated from the Unicode character 😘 with an online favicon generator(opens in a new window). I'm pro emoji, but I wanted a more personal touch for my web site. Like an underwater selfie.

Source photo

Once I decided to generate selfie favicons, I had to dig through my photo archive to find the source photo. The images I used on Twitter, GitHub and Gravatar were all of poor quality. Once I found the original, I cropped it to a quadratic (high resolution) image.

Node.js module

Instead of the online favicon generator, I wanted more control of which platforms to create images for. I found the Node.js module Favicons(opens in a new window). Not only does the module generate favicons, it also scaffolds a web app manifest(opens in a new window).

Generate favicons

After a couple of test runs, I opted for an icon set targeting web, iOS and Android. The favicon module supports other platforms and legacy formats than the ones I cherry picked.

Favicons setup #

const fs = require("fs").promises;
const favicons = require("favicons");
const config = {
  path: "/",
    "Jouni Kantola. Web developer.",
  appShortName: "Jouni Kantola",
    "I'm Jouni. I do web.",
  dir: "ltr",
  lang: "en",
  background: "#222",
  theme_color: "#222",
  display: "standalone",
  orientation: "any",
  scope: "/",
  icons: {
    favicons: true,
    android: true,
    appleIcon: true,
    appleStartup: false,
    coast: false,
    firefox: false,
    windows: false,
    yandex: false,

async function generateFavicons() {
  try {
    const selfie =
    const outputPath = `${__dirname}/favicons`;
    await fs.mkdir(outputPath);

    const {
    } = await favicons(selfie, config);

    const out = [
    ].map(({ name, contents }) =>

    await Promise.all(out);
  } catch (err) {


Currently I use seven favicons (View Source is your friend). Them and my image for social shares are all generated with the above code snippet. Now go personalize your web site! 😘