Introducing Faviator: A simple easy favicon generator
Tags: favicon, showdev, opensource, npm
Published: 2018-02-22 23:21:05

---
title: "Introducing Faviator: A simple easy favicon generator"
published: true
description: Generating icons easily.
tags: favicon, showdev, opensource, npm
cover_image: https://thepracticaldev.s3.amazonaws.com/i/2dgcou5rf8f7be1xbp86.png
---
![logo](https://www.faviator.xyz/assets/logo.png)

> 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](https://www.azlyrics.com/lyrics/johnmayer/stopthistrain.html) 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](https://split-lyrics.ycmjason.com/). 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](https://sketchapp.com/) 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](https://www.npmjs.com/package/faviator). Read on in the TL; DR section to learn more about it.

## TL; DR
So basically I made a library called [faviator](https://www.npmjs.com/package/faviator) (favicon generator) which allow us to create a simple icon easily. You could have a play with it on the [faviator playground](https://www.faviator.xyz/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`.
![logo](https://www.faviator.xyz/assets/logo.png)

The font family is grabbed from [Google Fonts](https://fonts.google.com/) 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](https://www.faviator.xyz/playground).

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

```html
<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/](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!