Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/faviator/faviator
A simple easy favicon generator.
https://github.com/faviator/faviator
cli faviator favicon generator icons logo svg
Last synced: 2 months ago
JSON representation
A simple easy favicon generator.
- Host: GitHub
- URL: https://github.com/faviator/faviator
- Owner: faviator
- License: mit
- Created: 2018-02-01T20:07:38.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:03:44.000Z (about 2 years ago)
- Last Synced: 2024-11-01T21:36:33.130Z (2 months ago)
- Topics: cli, faviator, favicon, generator, icons, logo, svg
- Language: JavaScript
- Homepage: https://www.faviator.xyz/
- Size: 1.69 MB
- Stars: 206
- Watchers: 1
- Forks: 19
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - faviator/faviator - A simple easy favicon generator. (cli)
- awesome-hk-open-source - Faviator - 用 CLI 創造簡單 icons/favicons。[](https://github.com/faviator/faviator/stargazers) (Javascript)
- jimsghstars - faviator/faviator - A simple easy favicon generator. (JavaScript)
README
# faviator
> A simple easy favicon generator.
[](https://travis-ci.org/faviator/faviator)
[](https://codecov.io/gh/faviator/faviator)
## 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.](https://www.faviator.xyz/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 Width and height of the favicon
-t, --text Text in the favicon
--dx Move text horizontally
--dy Move text vertically
--font-size Font size of the text
-f, --font-family Font family; please choose from Google Fonts
--font-weight Font weight; please choose from Google Fonts
--font-color Color name/hex/rgb
-B, --background-color Background color of favicon
--border-width Width of the border
-b, --border-color Color of the border
-R, --border-radius Short hand to set rx and ry
--rx x-axis border radius
--ry y-axis border radius
-c, --config use a config file to draw
-o, --output 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'
@import url('https://fonts.googleapis.com/css?family=Roboto:700');
Fav
```
-----
You can export the svg/jpeg/png to a file with the `-o` 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:
-------
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:
## 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