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:
- Take in a link to the lyrics
- Grab the lyrics
- Split the lyrics into half
- 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!
Top comments (8)
Nice idea. Especially handy for when you just need something quick to polish a demo. The playground is great too.
Not really sure this needs to be a service, but it would be great to download the favico directly from the playground. It would also be cool to have gradient colors.
Ohhh finally someone replying haha
Thanks! Gradient is definitely on my to-do list.
Hey there, very nice project! One thing that might be worth it would be to vectorize completely the fonts instead of loading a complete font. It might be very big to download a font for such a small favicon. What do you think?
I managed to do it by hand using danmarshall.github.io/google-font-.... Thanks
This is such an awesome idea! Do you wanna work with me on making this possible?
Ahah you got me good here lol! I wish I could spend time on your project but I know it would be bad for the current other projects I am maintaining / working on. Next time I need a favicon I might just try to do it yep!
In fact I am super busy with other stuff too. I'd be really happy to see this feature coming to faviator tho! Happy to help anyone who would like to pick this up too. 😁
Haha! Thanks! Give me a star if you like it! :D