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.

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

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

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

    const out = [
      ...files,
      ...images,
    ].map(({ name, contents }) =>
      fs.writeFile(
        `${outputPath}/${name}`,
        contents
      )
    );
    out.push(
      fs.writeFile(
        `${outputPath}/meta-tags.html`,
        html.join("\n")
      )
    );

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

generateFavicons();

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! 😘