Star this project if you like the idea: https://github.com/faviator/faviator
(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
And as a typical software engineer, I see a problem and I seek a solution. I started a project called split lyrics
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
As a typical software engineer, I see a problem and I seek a solution. Then I created faviator
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
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
The font family is grabbed from Google Fonts
Besides the options you see above, there are just 4 more options,
--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">
Well, I want to even further simplify the process of creating simple favicons. I want to extend the platform (https://www.faviator.xyz/