{"id":14982241,"url":"https://github.com/trigensoftware/flexis-favicons","last_synced_at":"2025-08-02T10:03:19.976Z","repository":{"id":37885133,"uuid":"140148660","full_name":"TrigenSoftware/flexis-favicons","owner":"TrigenSoftware","description":"A tool for generating icons for the modern web.","archived":false,"fork":false,"pushed_at":"2022-12-10T18:35:27.000Z","size":3016,"stargazers_count":5,"open_issues_count":39,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-11T23:42:18.218Z","etag":null,"topics":["android","favicon","generator","gulp","ico","icons","ios","manifest","pwa","webmanifest"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/TrigenSoftware.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-07-08T07:58:36.000Z","updated_at":"2022-09-12T17:03:48.000Z","dependencies_parsed_at":"2023-01-26T08:01:38.796Z","dependency_job_id":null,"html_url":"https://github.com/TrigenSoftware/flexis-favicons","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrigenSoftware%2Fflexis-favicons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrigenSoftware%2Fflexis-favicons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrigenSoftware%2Fflexis-favicons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TrigenSoftware%2Fflexis-favicons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TrigenSoftware","download_url":"https://codeload.github.com/TrigenSoftware/flexis-favicons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219857798,"owners_count":16556054,"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":["android","favicon","generator","gulp","ico","icons","ios","manifest","pwa","webmanifest"],"created_at":"2024-09-24T14:05:00.755Z","updated_at":"2024-10-11T23:42:36.958Z","avatar_url":"https://github.com/TrigenSoftware.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @flexis/favicons\n\n[![NPM version][npm]][npm-url]\n[![Node version][node]][node-url]\n[![Dependencies status][deps]][deps-url]\n[![Build status][build]][build-url]\n[![Coverage status][coverage]][coverage-url]\n[![Dependabot badge][dependabot]][dependabot-url]\n[![Documentation badge][documentation]][documentation-url]\n\n[npm]: https://img.shields.io/npm/v/@flexis/favicons.svg\n[npm-url]: https://npmjs.com/package/@flexis/favicons\n\n[node]: https://img.shields.io/node/v/@flexis/favicons.svg\n[node-url]: https://nodejs.org\n\n[deps]: https://david-dm.org/TrigenSoftware/flexis-favicons.svg\n[deps-url]: https://david-dm.org/TrigenSoftware/flexis-favicons\n\n[build]: https://img.shields.io/travis/com/TrigenSoftware/flexis-favicons/master.svg\n[build-url]: https://travis-ci.com/TrigenSoftware/flexis-favicons\n\n[coverage]: https://img.shields.io/coveralls/TrigenSoftware/flexis-favicons.svg\n[coverage-url]: https://coveralls.io/r/TrigenSoftware/flexis-favicons\n\n[dependabot]: https://api.dependabot.com/badges/status?host=github\u0026repo=TrigenSoftware/flexis-favicons\n[dependabot-url]: https://dependabot.com/\n\n[documentation]: https://img.shields.io/badge/API-Documentation-2b7489.svg\n[documentation-url]: https://trigensoftware.github.io/flexis-favicons\n\nA tool for generating icons for the modern web.\n\n- Traditional web favicons ❤️\n- Android and iOS icons, iOS startup screens 🖼\n- Generates assets for [PWA](https://developers.google.com/web/progressive-web-apps/) 📲\n- You can run it from the [CLI](#cli) ⌨️\n- Works with [Gulp](#gulp) and as [JS library](#js-api) 🦄\n- Based on [Sharp](https://github.com/lovell/sharp) library - lightning fast ⚡️\n\n\u003cimg src=\"https://pbs.twimg.com/media/EAyJvr5WsAEhw3F?format=jpg\u0026name=medium\" width=\"80%\"\u003e\n\n## Install\n\n```sh\nnpm i -D @flexis/favicons\n# or\nyarn add -D @flexis/favicons\n```\n\n## Usage\n\n### CLI\n\n```sh\nnpx favicons [...sources] [...options]\n# or\nyarn exec -- favicons [...sources] [...options]\n```\n\n| Option | Description | Default |\n|--------|-------------|---------|\n| sources | Source icon(s) glob patterns. | |\n| \u0026#x2011;\u0026#x2011;help, -h | Print this message. | |\n| \u0026#x2011;\u0026#x2011;verbose, -v | Print additional info about progress. | |\n| \u0026#x2011;\u0026#x2011;path, -p | Relative public path to use in webmanifest and html-headers. | |\n| \u0026#x2011;\u0026#x2011;background, -b | Background color for icons and startup images. | white |\n| \u0026#x2011;\u0026#x2011;manifest, -m | Path to webmanifest file to add icons. Also can use it to get background color. | |\n| \u0026#x2011;\u0026#x2011;headers, -H | Create html-file with headers for icons. | `false` |\n| \u0026#x2011;\u0026#x2011;skipFavicon | Do not create favicon. | `false`\n| \u0026#x2011;\u0026#x2011;skipAndroid | Do not create icons for Android. | `false`\n| \u0026#x2011;\u0026#x2011;skipApple | Do not create icons for iOS. | `false`\n| \u0026#x2011;\u0026#x2011;skipAppleStartup | Do not create startup screens for iOS. | `false`\n| \u0026#x2011;\u0026#x2011;androidBackground | Background color for Android icons. |  |\n| \u0026#x2011;\u0026#x2011;androidOffset | Offset size in percents for Android icons. | `0` |\n| \u0026#x2011;\u0026#x2011;appleBackground | Background color for iOS icons. |  |\n| \u0026#x2011;\u0026#x2011;appleOffset | Offset size in percents for iOS icons. | `0` |\n| \u0026#x2011;\u0026#x2011;appleStartupBackground | Background color for iOS startup screens. |  |\n| \u0026#x2011;\u0026#x2011;appleStartupOffset | Offset size in percents for iOS startup screens. | `0` |\n| \u0026#x2011;\u0026#x2011;dest, -d | Destination directory. | |\n\n#### Example\n\n```sh\n# From SVG\nfavicons src/favicon.svg --manifest src/manifest.json --headers -d build\n# From some PNGs with different sizes\nfavicons \"src/icons/*.png\" --background \"#FACE8D\" --headers -d build\n```\n\n#### Configuration\n\nConfiguration file is optional. If needed, can be defined through `.faviconsrc` JSON file in the root directory of the project.\n\nSupported options:\n\n```ts\ninterface IConfig {\n    /**\n     * Source icon(s) glob patterns.\n     */\n    src?: string | string[];\n    /**\n     * Relative public path to use in webmanifest and html-headers.\n     */\n    path?: string;\n    /**\n     * Background color for icons and startup images.\n     */\n    background?: string;\n    /**\n     * Path to webmanifest or webmanifest object to add icons. Also can use it to get background color.\n     */\n    manifest?: string | IManifestConfig;\n    /**\n     * Output icons configuration.\n     */\n    icons?: IIconsConfig;\n    /**\n     * Create html-file with headers for icons.\n     */\n    headers?: boolean | IHeadersConfig;\n    /**\n     * Print additional info about progress.\n     */\n    verbose?: boolean;\n    /**\n     * Destination directory.\n     */\n    dest?: string;\n}\n```\n\n- [`IIconsConfig`](https://trigensoftware.github.io/flexis-favicons/interfaces/_src_types_.iiconsconfig.html)\n- [`IManifestConfig`](https://trigensoftware.github.io/flexis-favicons/interfaces/_src_types_.imanifestconfig.html)\n- [`IHeadersConfig`](https://trigensoftware.github.io/flexis-favicons/interfaces/_src_types_.iheadersconfig.html)\n\n### Gulp\n\nAlso you can use `@flexis/favicons` with [Gulp](https://github.com/gulpjs/gulp):\n\n```js\nimport favicons from '@flexis/favicons/lib/stream';\nimport manifest from './src/manifest.json';\n\ngulp.task('favicons', () =\u003e\n    gulp.src('src/favicon.svg')\n        .pipe(favicons({\n            manifest,\n            headers: true\n        }))\n        .pipe(gulp.dest('build'))\n);\n```\n\nPlugin options:\n\n```ts\ninterface IPluginConfig {\n    /**\n     * Relative public path to use in webmanifest and html-headers.\n     */\n    path?: string;\n    /**\n     * Background color for icons and startup images.\n     */\n    background?: string;\n    /**\n     * Webmanifest to add icons. Also can use it to get background color.\n     */\n    manifest?: IManifestConfig;\n    /**\n     * Output icons configuration.\n     */\n    icons?: IIconsConfig;\n    /**\n     * Create html-file with headers for icons.\n     */\n    headers?: boolean | IHeadersConfig;\n    /**\n     * Print additional info about progress.\n     */\n    verbose?: boolean;\n}\n```\n\n- [`IIconsConfig`](https://trigensoftware.github.io/flexis-favicons/interfaces/_src_types_.iiconsconfig.html)\n- [`IManifestConfig`](https://trigensoftware.github.io/flexis-favicons/interfaces/_src_types_.imanifestconfig.html)\n- [`IHeadersConfig`](https://trigensoftware.github.io/flexis-favicons/interfaces/_src_types_.iheadersconfig.html)\n\n### JS API\n\nModule exposes next API:\n\n```js\nexport default FaviconsGenerator;\nexport {\n    IManifestConfig,\n    IIconConfig,\n    IIconsConfig,\n    IHeadersConfig,\n    IConfig,\n    getHtmlHeadersMarkup\n};\n```\n\n[Description of all methods you can find in Documentation.](https://trigensoftware.github.io/flexis-favicons/index.html)\n\n#### Example\n\n```js\nimport {\n    promises as fs\n} from 'fs';\nimport FaviconsGenerator, {\n    getHtmlHeadersMarkup\n} from '@flexis/favicons';\nimport Vinyl from 'vinyl';\nimport manifest from './src/manifest.json';\n\nasync function generate() {\n\n    const path = 'src/favicon.svg';\n    const contents = await fs.readFile(path);\n    const source = new Vinyl({\n        path,\n        contents\n    });\n    const favicons = new FaviconsGenerator({\n        manifest\n    });\n    const icons = favicons.generateIcons(source);\n\n    for await (const icon of icons) {\n        icon.base = './build';\n        await fs.writeFile(icon.path, icon.contents);\n    }\n\n    const headers = favicons.generateHtmlHeaders();\n    const html = getHtmlHeadersMarkup(headers);\n\n    await fs.writeFile('build/favicons.html', html);\n\n    const manifest = favicons.generateManifset();\n    const json = JSON.stringify(manifest);\n\n    await fs.writeFile('build/manifest.json', json);\n}\n\ngenerate();\n```\n\n[\u003cimg src=\"https://www.browserstack.com/images/layout/browserstack-logo-600x315.png\" width=\"300\"\u003e](https://www.browserstack.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrigensoftware%2Fflexis-favicons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrigensoftware%2Fflexis-favicons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrigensoftware%2Fflexis-favicons/lists"}