Introducing Faviator: A simple easy favicon generator

Star this project if you like the idea: https://github.com/faviator/faviator

Quick links

Github: https://github.com/faviator/faviator
Playground: https://www.faviator.xyz/playground

Story

(this section is totally irrelevant, please feel free to skip to the TL; DR section.)

I am a musician. I write songs. I play guitar, piano and sing. And one thing I find absolutely irritating when trying to record myself singing is: most song lyrics do not fit into a single page. Take this song by John Mayer (my favourite artist). Not sure what monitor you have got, but it just won't fit completely on my 12" macbook. So this means I have to reach out to the mouse to scroll the page. Since my hands are already busy playing guitar/piano and the song must go on in the recording, it is basically a mission impossible.

And as a typical software engineer, I see a problem and I seek a solution. I started a project called split lyrics. The idea is simple:

1. Take in a link to the lyrics
2. Grab the lyrics
3. Split the lyrics into half
4. Display each half side by side.

Now I have made this simple application. I styled it a bit and started thinking maybe it deserves its own favicon. Something simple, perhaps a rounded square with a blue background with two letters 'SL'.

I open up the application dashboard on mac, hover my mouse on the Sketch logo. And I said to myself, why is it so complicated just to create a simple icon? How much time in total am I going to spend just to create icons for all my future random projects? How much time in total has humanity spent on creating an icon? (lol, this might be a little bit over, but you get the idea...)

As a typical software engineer, I see a problem and I seek a solution. Then I created faviator. Read on in the TL; DR section to learn more about it.

TL; DR

So basically I made a library called faviator (favicon generator) which allow us to create a simple icon easily. You could have a play with it on the faviator playground.

The usage is very very simple. Just pass in a configuration, then you get your icon. Simple as that! You could generate the icons in SVG, PNG and JPG.

There is also a command line tool which allow you to generate an icon without even writing a single line of code.

To install the command line tool, simply do

> npm install -g faviator

Example use:

faviator --size '300'\
         --text 'F'\
         --dx '-2.5'\
         --dy '2'\
         --font-size '70'\
         --font-family 'Dancing Script'\
         --font-color '#ffffff'\
         --background-color '#f5beb7'\
         --border-width '3.5'\
         --border-color '#feeeec'\
         --border-radius '50'

The above command will generate the following icon at ./favicon.png.

The font family is grabbed from Google Fonts and you could pass in the name of any font listed in there.

Besides the options you see above, there are just 4 more options, --dx, --dy, --rx and --ry, which I encourage to find out what they are yourself in the faviator playground.

After generating the icon, simply put it in your project and add a link tag pointing to it:

<link rel="icon" href="/favicon.png" type="image/png">

What's next?

Well, I want to even further simplify the process of creating simple favicons. I want to extend the platform (https://www.faviator.xyz/) and provide endpoints which returns the icon directly. So that we could just use the icon without the need to even install faviator. Basically faviator as a service would be the next milestone. What do you think? Give me some thoughts!