Need help with faviator?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

176 Stars 23 Forks MIT License 94 Commits 13 Opened issues


A simple easy favicon generator.

Services available


Need anything else?

Contributors list


A simple easy favicon generator.

Build Status codecov



Manually changing the config and generate the favicon to see the result might be time consuming. A faviator playground is created to allow us to tweak the config and view the result instantly.

Click here to go to the playground.



npm install -g faviator

Programatic API:

npm install --save-dev faviator

How to use (CLI)

> faviator -h
    Usage: faviator [options]

A simple easy favicon generator.


-V, --version                   output the version number
-s, --size <n>                  Width and height of the favicon
-t, --text <value>              Text in the favicon
--dx <n>                        Move text horizontally
--dy <n>                        Move text vertically
--font-size <n>                 Font size of the text
-f, --font-family <value>       Font family; please choose from Google Fonts
--font-weight <value>           Font weight; please choose from Google Fonts
--font-color <value>            Color name/hex/rgb
-B, --background-color <value>  Background color of favicon
--border-width <n>              Width of the border
-b, --border-color <value>      Color of the border
-R, --border-radius <n>         Short hand to set rx and ry
--rx <n>                        x-axis border radius
--ry <n>                        y-axis border radius
-c, --config <path>             use a config file to draw
-o, --output <path>             If not specified, svg will be printed to stdout. You can use .svg/.jpeg/.jpg/.png extensions.
-h, --help                      output usage information

By default, faviator will print the xml of the svg to stdout.

Example: ```

faviator --size '160' --text 'Fav' --dy '19.5' --font-size '32' --font-family 'Roboto' --font-color 'skyblue' --font-weight '700' --background-color 'navy' --border-width '11.5' --border-color 'skyblue' --border-radius '18.5' <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "">


<p><img src="" alt="0.svg"></p>


<p>You can export the svg/jpeg/png to a file with the </p><pre>-o</pre> flag.

faviator --size '160' \ --text 'f' \ --dx '-5' \ --dy '0' \ --font-size '55' \ --font-family 'Tangerine' \ --font-color '#75b7ff' \ --font-weight '700' \ --background-color 'rgb(37, 86, 209)' \ --border-width '3.5' \ --border-color '#75b7ff' \ --border-radius '0' \ -o example/1.png ```



You should also save your config to a json file so that you can reproduce your design.

> faviator -c path/to/config.json \
           -o example/2.png



How to use? (Programatic API)

Faviator provides three functions that generate the favicon as svg, jpeg or png. The API of the three functions are identical. They all return a promise that resolves to a

that represents the favicon.


The config object takes in the following keys and generate the favicon correspondingly. Most values are self-explantory.

The following values are the default values if it is not defined. This defines the faviator's logo.

const config = {
  size: 16,            // the width and height of the generated image (in px)
  text: '',
  dx: 0,               // move the text from the 'center' horizontally
  dy: 0,               // move the text from the 'center' vertically
  fontSize: 0,
  fontFamily: '',      // a font from Google Font
  fontColor: '',
  fontWeight: '',      // the weight of the font from Google Font
  backgroundColor: '',
  borderWidth: 0,
  borderColor: '',
  borderRadius: 0,     // rx and ry will be set to this if defined
  rx: 0,               // x-axis radius of the favicon
  ry: 0,               // y-axis radius of the favicon

faviator(config) / faviator.svg(config)

Example: ```javascript const faviator = require('faviator');

faviator.svg(config) .then(buffer => buffer.toString()) .then(svg => console.log(svg));

// output: the xml of the svg ```

faviator.jpeg(config) / faviator.jpg(config)

Example: ``` const fs = require('fs'); const faviator = require('faviator');

faviator.jpeg(config).then(buffer => fs.writeFileSync('favicon.jpg', buffer));

// or

faviator.jpg(config).then(buffer => fs.writeFileSync('favicon.jpg', buffer)); ```


Example: ``` const fs = require('fs'); const faviator = require('faviator');

faviator.png(config).then(buffer => fs.writeFileSync('favicon.png', buffer)); ```

How to use the icon generated?

After generating the icon, you could simply add the following line in your







Jason Yu [email protected]

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.