faviator

by faviator

faviator / faviator

A simple easy favicon generator.

140 Stars 20 Forks Last release: Not found MIT License 94 Commits 22 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

faviator

A simple easy favicon generator.

Build Status codecov

Logo

Playground

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.

Install

CLI:

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.

Options:

-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" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Fav


<p><img src="https://github.com/faviator/faviator/raw/master/example/0.svg" alt="0.svg"></p>

<hr>

<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 ```

1.png:

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

2.png:

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

Buffer
that represents the favicon.

config

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.

javascript
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)); ```

faviator.png(config)

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

 tag.

PNG:

html

JPG:

html

Author

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.