{"id":13553451,"url":"https://github.com/faviator/faviator","last_synced_at":"2025-04-03T05:30:53.966Z","repository":{"id":29027197,"uuid":"119887353","full_name":"faviator/faviator","owner":"faviator","description":"A simple easy favicon generator.","archived":false,"fork":false,"pushed_at":"2023-01-06T02:03:44.000Z","size":1767,"stargazers_count":208,"open_issues_count":20,"forks_count":19,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-01T10:35:32.785Z","etag":null,"topics":["cli","faviator","favicon","generator","icons","logo","svg"],"latest_commit_sha":null,"homepage":"https://www.faviator.xyz/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/faviator.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-01T20:07:38.000Z","updated_at":"2025-02-09T12:39:00.000Z","dependencies_parsed_at":"2023-01-14T13:59:22.109Z","dependency_job_id":null,"html_url":"https://github.com/faviator/faviator","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faviator%2Ffaviator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faviator%2Ffaviator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faviator%2Ffaviator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faviator%2Ffaviator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/faviator","download_url":"https://codeload.github.com/faviator/faviator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246944377,"owners_count":20858773,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cli","faviator","favicon","generator","icons","logo","svg"],"created_at":"2024-08-01T12:02:25.177Z","updated_at":"2025-04-03T05:30:53.695Z","avatar_url":"https://github.com/faviator.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","cli","Javascript"],"sub_categories":[],"readme":"# faviator\n\u003e A simple easy favicon generator.\n\n[![Build Status](https://travis-ci.org/faviator/faviator.svg?branch=master)](https://travis-ci.org/faviator/faviator)\n[![codecov](https://codecov.io/gh/faviator/faviator/branch/master/graph/badge.svg)](https://codecov.io/gh/faviator/faviator)\n\n![Logo](favicon.png)\n\n## Playground\nManually 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.\n\n[Click here to go to the playground.](https://www.faviator.xyz/playground)\n\n## Install\n\nCLI:\n```\nnpm install -g faviator\n```\n\nProgramatic API:\n```\nnpm install --save-dev faviator\n```\n\n## How to use (CLI)\n\n```\n\u003e faviator -h\n    Usage: faviator [options]\n\n  A simple easy favicon generator.\n\n\n  Options:\n\n    -V, --version                   output the version number\n    -s, --size \u003cn\u003e                  Width and height of the favicon\n    -t, --text \u003cvalue\u003e              Text in the favicon\n    --dx \u003cn\u003e                        Move text horizontally\n    --dy \u003cn\u003e                        Move text vertically\n    --font-size \u003cn\u003e                 Font size of the text\n    -f, --font-family \u003cvalue\u003e       Font family; please choose from Google Fonts\n    --font-weight \u003cvalue\u003e           Font weight; please choose from Google Fonts\n    --font-color \u003cvalue\u003e            Color name/hex/rgb\n    -B, --background-color \u003cvalue\u003e  Background color of favicon\n    --border-width \u003cn\u003e              Width of the border\n    -b, --border-color \u003cvalue\u003e      Color of the border\n    -R, --border-radius \u003cn\u003e         Short hand to set rx and ry\n    --rx \u003cn\u003e                        x-axis border radius\n    --ry \u003cn\u003e                        y-axis border radius\n    -c, --config \u003cpath\u003e             use a config file to draw\n    -o, --output \u003cpath\u003e             If not specified, svg will be printed to stdout. You can use .svg/.jpeg/.jpg/.png extensions.\n    -h, --help                      output usage information\n```\n\n--------\n\nBy default, faviator will print the xml of the svg to stdout.\n\nExample:\n```\n\u003e 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'\n\u003c?xml version=\"1.0\" standalone=\"no\"?\u003e\n\u003c!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"\u003e\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"160\" height=\"160\" viewBox=\"0 0 100 100\"\u003e\n  \u003cdefs\u003e\n    \u003cstyle type=\"text/css\"\u003e\n      @import url('https://fonts.googleapis.com/css?family=Roboto:700');\n    \u003c/style\u003e\n  \u003c/defs\u003e\n\n\u003crect x=\"5.75\"\n  y=\"5.75\"\n  rx=\"18.5\"\n  ry=\"18.5\"\n  width=\"88.5\"\n  height=\"88.5\"\n  fill=\"navy\"\u003e\u003c/rect\u003e\n\n\u003ctext x=\"50\"\n  y=\"50\"\n  dx=\"0\"\n  dy=\"19.5\"\n  width=\"160\"\n  height=\"160\"\n  fill=\"skyblue\"\n  font-size=\"32\"\n  font-family=\"Roboto\"\n  text-anchor=\"middle\"\n  alignment-baseline=\"central\"\u003eFav\u003c/text\u003e\n\n\u003crect x=\"5.75\"\n  y=\"5.75\"\n  rx=\"18.5\"\n  ry=\"18.5\"\n  width=\"88.5\"\n  height=\"88.5\"\n  fill-opacity=\"0\"\n  stroke=\"skyblue\"\n  stroke-width=\"11.5\"\u003e\u003c/rect\u003e\n\u003c/svg\u003e\n```\n\n![0.svg](example/0.svg)\n\n-----\n\nYou can export the svg/jpeg/png to a file with the `-o` flag.\n```\n\u003e faviator --size '160' \\\n           --text 'f' \\\n           --dx '-5' \\\n           --dy '0' \\\n           --font-size '55' \\\n           --font-family 'Tangerine' \\\n           --font-color '#75b7ff' \\\n           --font-weight '700' \\\n           --background-color 'rgb(37, 86, 209)' \\\n           --border-width '3.5' \\\n           --border-color '#75b7ff' \\\n           --border-radius '0' \\\n           -o example/1.png\n```\n\n1.png:\n\n![1.png](example/1.png)\n\n-------\n\nYou should also save your config to a json file so that you can reproduce your design.\n\n```\n\u003e faviator -c path/to/config.json \\\n           -o example/2.png\n```\n\n2.png:\n\n![2.png](example/2.png)\n\n## How to use? (Programatic API)\n\nFaviator 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.\n\n### config\nThe config object takes in the following keys and generate the favicon correspondingly. Most values are self-explantory.\n\nThe following values are the default values if it is not defined. This defines the faviator's logo.\n```javascript\nconst config = {\n  size: 16,            // the width and height of the generated image (in px)\n  text: '',\n  dx: 0,               // move the text from the 'center' horizontally\n  dy: 0,               // move the text from the 'center' vertically\n  fontSize: 0,\n  fontFamily: '',      // a font from Google Font\n  fontColor: '',\n  fontWeight: '',      // the weight of the font from Google Font\n  backgroundColor: '',\n  borderWidth: 0,\n  borderColor: '',\n  borderRadius: 0,     // rx and ry will be set to this if defined\n  rx: 0,               // x-axis radius of the favicon\n  ry: 0,               // y-axis radius of the favicon\n};\n```\n\n### faviator(config) / faviator.svg(config)\n\nExample:\n```javascript\nconst faviator = require('faviator');\n\nfaviator.svg(config)\n  .then(buffer =\u003e buffer.toString())\n  .then(svg =\u003e console.log(svg));\n\n// output: the xml of the svg\n```\n\n### faviator.jpeg(config) / faviator.jpg(config)\n\nExample:\n```\nconst fs = require('fs');\nconst faviator = require('faviator');\n\nfaviator.jpeg(config).then(buffer =\u003e fs.writeFileSync('favicon.jpg', buffer));\n\n// or\n\nfaviator.jpg(config).then(buffer =\u003e fs.writeFileSync('favicon.jpg', buffer));\n```\n\n### faviator.png(config)\n\nExample:\n```\nconst fs = require('fs');\nconst faviator = require('faviator');\n\nfaviator.png(config).then(buffer =\u003e fs.writeFileSync('favicon.png', buffer));\n```\n\n## How to use the icon generated?\n\nAfter generating the icon, you could simply add the following line in your `\u003chead\u003e` tag.\n\nPNG:\n```html\n\u003clink rel=\"icon\" href=\"favicon.png\" type=\"image/png\"\u003e\n```\n\nJPG:\n```html\n\u003clink rel=\"icon\" href=\"favicon.jpg\" type=\"image/jpg\"\u003e\n```\n\n## Author\nJason Yu \u003cme@ycmjason.com\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffaviator%2Ffaviator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffaviator%2Ffaviator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffaviator%2Ffaviator/lists"}