{"id":13406465,"url":"https://github.com/itgalaxy/favicons","last_synced_at":"2025-05-13T15:11:53.916Z","repository":{"id":17077917,"uuid":"19842927","full_name":"itgalaxy/favicons","owner":"itgalaxy","description":"Favicons generator for Node.js","archived":false,"fork":false,"pushed_at":"2025-05-11T17:15:42.000Z","size":101719,"stargazers_count":1205,"open_issues_count":43,"forks_count":164,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-05-13T14:21:55.113Z","etag":null,"topics":["favicon","favicon-generator","favicons","generating-favicons","javascript"],"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/itgalaxy.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2014-05-16T03:00:08.000Z","updated_at":"2025-05-11T11:59:17.000Z","dependencies_parsed_at":"2024-01-16T03:46:09.875Z","dependency_job_id":"702234b7-73cc-4597-8382-cb509f869ea2","html_url":"https://github.com/itgalaxy/favicons","commit_stats":{"total_commits":549,"total_committers":72,"mean_commits":7.625,"dds":0.5792349726775956,"last_synced_commit":"a4e4367642d3938732804d95f0b5e709e286ef8e"},"previous_names":["haydenbleasel/favicons"],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itgalaxy%2Ffavicons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itgalaxy%2Ffavicons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itgalaxy%2Ffavicons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itgalaxy%2Ffavicons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itgalaxy","download_url":"https://codeload.github.com/itgalaxy/favicons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253969261,"owners_count":21992263,"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":["favicon","favicon-generator","favicons","generating-favicons","javascript"],"created_at":"2024-07-30T19:02:30.980Z","updated_at":"2025-05-13T15:11:48.900Z","avatar_url":"https://github.com/itgalaxy.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","DevTools","JavaScript","javascript"],"sub_categories":["Languages"],"readme":"# Favicons\n\n[![NPM version](https://img.shields.io/npm/v/favicons.svg)](https://www.npmjs.org/package/favicons)\n[![Build Status](https://github.com/itgalaxy/favicons/actions/workflows/ci.yml/badge.svg)](https://github.com/itgalaxy/favicons/actions/workflows/ci.yml)\n\nA **Node.js module** for generating favicons and their associated files. Originally built for [Google's Web Starter Kit](https://github.com/google/web-starter-kit) and [Catalyst](https://github.com/haydenbleasel/catalyst). Installed through NPM with:\n\n```\nnpm install favicons\n```\n\n## Usage\n\nTo use Favicons, require the appropriate module and call it, optionally specifying configuration and callback objects. A sample is shown on the right. The full list of options can be found on GitHub.\n\nFavicons generates its icons locally using pure Javascript with no external dependencies.\n\nPlease note: Favicons is tested on Node 14 and above.\n\n```js\nimport { favicons } from \"favicons\";\n\nconst source = \"test/logo.png\"; // Source image(s). `string`, `buffer` or array of `string`\n\nconst configuration = {\n  path: \"/\", // Path for overriding default icons path. `string`\n  appName: null, // Your application's name. `string`\n  appShortName: null, // Your application's short_name. `string`. Optional. If not set, appName will be used\n  appDescription: null, // Your application's description. `string`\n  developerName: null, // Your (or your developer's) name. `string`\n  developerURL: null, // Your (or your developer's) URL. `string`\n  cacheBustingQueryParam: null, // Query parameter added to all URLs that acts as a cache busting system. `string | null`\n  dir: \"auto\", // Primary text direction for name, short_name, and description\n  lang: \"en-US\", // Primary language for name and short_name\n  background: \"#fff\", // Background colour for flattened icons. `string`\n  theme_color: \"#fff\", // Theme color user for example in Android's task switcher. `string`\n  appleStatusBarStyle: \"black-translucent\", // Style for Apple status bar: \"black-translucent\", \"default\", \"black\". `string`\n  display: \"standalone\", // Preferred display mode: \"fullscreen\", \"standalone\", \"minimal-ui\" or \"browser\". `string`\n  orientation: \"any\", // Default orientation: \"any\", \"natural\", \"portrait\" or \"landscape\". `string`\n  scope: \"/\", // set of URLs that the browser considers within your app\n  start_url: \"/?homescreen=1\", // Start URL when launching the application from a device. `string`\n  preferRelatedApplications: false, // Should the browser prompt the user to install the native companion app. `boolean`\n  relatedApplications: undefined, // Information about the native companion apps. This will only be used if `preferRelatedApplications` is `true`. `Array\u003c{ id: string, url: string, platform: string }\u003e`\n  version: \"1.0\", // Your application's version string. `string`\n  pixel_art: false, // Keeps pixels \"sharp\" when scaling up, for pixel art.  Only supported in offline mode.\n  loadManifestWithCredentials: false, // Browsers don't send cookies when fetching a manifest, enable this to fix that. `boolean`\n  manifestMaskable: false, // Maskable source image(s) for manifest.json. \"true\" to use default source. More information at https://web.dev/maskable-icon/. `boolean`, `string`, `buffer` or array of `string`\n  icons: {\n    // Platform Options:\n    // - offset - offset in percentage\n    // - background:\n    //   * false - use default\n    //   * true - force use default, e.g. set background for Android icons\n    //   * color - set background for the specified icons\n    //\n    android: true, // Create Android homescreen icon. `boolean` or `{ offset, background }` or an array of sources\n    appleIcon: true, // Create Apple touch icons. `boolean` or `{ offset, background }` or an array of sources\n    appleStartup: true, // Create Apple startup images. `boolean` or `{ offset, background }` or an array of sources\n    favicons: true, // Create regular favicons. `boolean` or `{ offset, background }` or an array of sources\n    windows: true, // Create Windows 8 tile icons. `boolean` or `{ offset, background }` or an array of sources\n    yandex: true, // Create Yandex browser icon. `boolean` or `{ offset, background }` or an array of sources\n  },\n  shortcuts: [\n    // Your applications's Shortcuts (see: https://developer.mozilla.org/docs/Web/Manifest/shortcuts)\n    // Array of shortcut objects:\n    {\n      name: \"View your Inbox\", // The name of the shortcut. `string`\n      short_name: \"inbox\", // optionally, falls back to name. `string`\n      description: \"View your inbox messages\", // optionally, not used in any implemention yet. `string`\n      url: \"/inbox\", // The URL this shortcut should lead to. `string`\n      icon: \"test/inbox_shortcut.png\", // source image(s) for that shortcut. `string`, `buffer` or array of `string`\n    },\n    // more shortcuts objects\n  ],\n};\n\ntry {\n  const response = await favicons(source, configuration);\n\n  console.log(response.images); // Array of { name: string, contents: \u003cbuffer\u003e }\n  console.log(response.files); // Array of { name: string, contents: \u003cstring\u003e }\n  console.log(response.html); // Array of strings (html elements)\n} catch (error) {\n  console.log(error.message); // Error description e.g. \"An unknown error has occurred\"\n}\n```\n\nThe default sources are as follow (groupped by platform):\n\n```javascript\n{\n  \"android\": [\n    \"android-chrome-144x144.png\",\n    \"android-chrome-192x192.png\",\n    \"android-chrome-256x256.png\",\n    \"android-chrome-36x36.png\",\n    \"android-chrome-384x384.png\",\n    \"android-chrome-48x48.png\",\n    \"android-chrome-512x512.png\",\n    \"android-chrome-72x72.png\",\n    \"android-chrome-96x96.png\"\n  ],\n  \"appleIcon\": [\n    \"apple-touch-icon-1024x1024.png\",\n    \"apple-touch-icon-114x114.png\",\n    \"apple-touch-icon-120x120.png\",\n    \"apple-touch-icon-144x144.png\",\n    \"apple-touch-icon-152x152.png\",\n    \"apple-touch-icon-167x167.png\",\n    \"apple-touch-icon-180x180.png\",\n    \"apple-touch-icon-57x57.png\",\n    \"apple-touch-icon-60x60.png\",\n    \"apple-touch-icon-72x72.png\",\n    \"apple-touch-icon-76x76.png\",\n    \"apple-touch-icon-precomposed.png\",\n    \"apple-touch-icon.png\"\n  ],\n  \"appleStartup\": [\n    \"apple-touch-startup-image-1125x2436.png\",\n    \"apple-touch-startup-image-1136x640.png\",\n    \"apple-touch-startup-image-1242x2208.png\",\n    \"apple-touch-startup-image-1242x2688.png\",\n    \"apple-touch-startup-image-1334x750.png\",\n    \"apple-touch-startup-image-1536x2048.png\",\n    \"apple-touch-startup-image-1620x2160.png\",\n    \"apple-touch-startup-image-1668x2224.png\",\n    \"apple-touch-startup-image-1668x2388.png\",\n    \"apple-touch-startup-image-1792x828.png\",\n    \"apple-touch-startup-image-2048x1536.png\",\n    \"apple-touch-startup-image-2048x2732.png\",\n    \"apple-touch-startup-image-2160x1620.png\",\n    \"apple-touch-startup-image-2208x1242.png\",\n    \"apple-touch-startup-image-2224x1668.png\",\n    \"apple-touch-startup-image-2388x1668.png\",\n    \"apple-touch-startup-image-2436x1125.png\",\n    \"apple-touch-startup-image-2688x1242.png\",\n    \"apple-touch-startup-image-2732x2048.png\",\n    \"apple-touch-startup-image-640x1136.png\",\n    \"apple-touch-startup-image-750x1334.png\",\n    \"apple-touch-startup-image-828x1792.png\",\n    \"apple-touch-startup-image-1179x2556.png\",\n    \"apple-touch-startup-image-2556x1179.png\",\n    \"apple-touch-startup-image-1290x2796.png\",\n    \"apple-touch-startup-image-2796x1290.png\",\n    \"apple-touch-startup-image-1488x2266.png\",\n    \"apple-touch-startup-image-2266x1488.png\",\n    \"apple-touch-startup-image-1640x2360.png\",\n    \"apple-touch-startup-image-2360x1640.png\"\n  ],\n  \"favicons\": [\n    \"favicon-16x16.png\",\n    \"favicon-32x32.png\",\n    \"favicon-48x48.png\",\n    \"favicon.ico\"\n  ],\n  \"windows\": [\n    \"mstile-144x144.png\",\n    \"mstile-150x150.png\",\n    \"mstile-310x150.png\",\n    \"mstile-310x310.png\",\n    \"mstile-70x70.png\"\n  ],\n  \"yandex\": [\n    \"yandex-browser-50x50.png\"\n  ]\n}\n\n```\n\nYou can programmatically access Favicons configuration (icon filenames, HTML, manifest files, etc) with:\n\n```js\nimport { config } from \"favicons\";\n```\n\nBelow you will find a simple working example to generate an output. Amend the `src`, `dest`, `htmlBasename` and `configuration` constants to suit your own needs.\n\n```js\nimport favicons from \"favicons\";\nimport fs from \"fs/promises\";\nimport path from \"path\";\n\nconst src = \"./icon.svg\"; // Icon source file path.\nconst dest = \"./favicons\"; // Output directory path.\nconst htmlBasename = \"index.html\"; // HTML file basename.\n\n// Configuration (see above in the README file).\nconst configuration = {\n  path: \"/favicons\",\n  appName: \"My Great App\",\n  appShortName: \"Great App\",\n  appDescription: \"A great application to test itgalaxy/favicons.\",\n  // Extra options...\n};\n\n// Below is the processing.\nconst response = await favicons(src, configuration);\nawait fs.mkdir(dest, { recursive: true });\nawait Promise.all(\n  response.images.map(\n    async (image) =\u003e\n      await fs.writeFile(path.join(dest, image.name), image.contents),\n  ),\n);\nawait Promise.all(\n  response.files.map(\n    async (file) =\u003e\n      await fs.writeFile(path.join(dest, file.name), file.contents),\n  ),\n);\nawait fs.writeFile(path.join(dest, htmlBasename), response.html.join(\"\\n\"));\n```\n\n## Questions\n\n\u003e Why are you missing certain favicons?\n\nBecause pure Javascript modules aren't available at the moment. For example, the [El Capitan SVG favicon](https://github.com/haydenbleasel/favicons/issues/61) and the [Windows tile silhouette ability](https://github.com/haydenbleasel/favicons/issues/58) both require [SVG support](https://github.com/haydenbleasel/favicons/issues/53). If modules for these task begin to appear, please jump on the appropriate issue and we'll get on it ASAP.\n\n## Thank you\n\n- [@haydenbleasel](https://github.com/haydenbleasel) for this great project.\n- [@phbernard](https://github.com/phbernard) for all the work we did together to make Favicons and RFG awesome.\n- [@addyosmani](https://github.com/addyosmani), [@gauntface](https://github.com/gauntface), [@paulirish](https://github.com/paulirish), [@mathiasbynens](https://github.com/mathiasbynens) and [@pbakaus](https://github.com/pbakaus) for [their input](https://github.com/google/web-starter-kit/pull/442) on multiple source images.\n- [@sindresorhus](https://github.com/sindresorhus) for his help on documentation and parameter improvements.\n- Everyone who opens an issue or submits a pull request to this repo :)\n\n## Contribution\n\nFeel free to push your code if you agree with publishing under the MIT license.\n\nWhen testing, don't forget to update snapshots whenever you edit them: `npm test -- -u`.\n\n## [License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitgalaxy%2Ffavicons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitgalaxy%2Ffavicons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitgalaxy%2Ffavicons/lists"}