{"id":22979456,"url":"https://github.com/jsdeveloperr/favicon-badge-notify","last_synced_at":"2026-04-04T06:38:55.172Z","repository":{"id":41438060,"uuid":"503916061","full_name":"jsdeveloperr/favicon-badge-notify","owner":"jsdeveloperr","description":"🟠 Custom function adds a favicon and a badge","archived":false,"fork":false,"pushed_at":"2022-07-28T14:10:38.000Z","size":256,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T02:38:08.286Z","etag":null,"topics":["badge","dynamic-favicon-badge","dynamic-favicon-badge-notification","favicon","favicon-badge","favicon-badge-notification","react","react-favicon","react-favicon-badge","reactjs","solidjs","solidjs-favicon-badge","vue","vue-favicon-badge","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://react-favicon-badge-notify.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsdeveloperr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-15T20:41:42.000Z","updated_at":"2023-07-11T04:12:18.000Z","dependencies_parsed_at":"2022-07-29T18:39:49.792Z","dependency_job_id":null,"html_url":"https://github.com/jsdeveloperr/favicon-badge-notify","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jsdeveloperr/favicon-badge-notify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdeveloperr%2Ffavicon-badge-notify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdeveloperr%2Ffavicon-badge-notify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdeveloperr%2Ffavicon-badge-notify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdeveloperr%2Ffavicon-badge-notify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsdeveloperr","download_url":"https://codeload.github.com/jsdeveloperr/favicon-badge-notify/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdeveloperr%2Ffavicon-badge-notify/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260843046,"owners_count":23071465,"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":["badge","dynamic-favicon-badge","dynamic-favicon-badge-notification","favicon","favicon-badge","favicon-badge-notification","react","react-favicon","react-favicon-badge","reactjs","solidjs","solidjs-favicon-badge","vue","vue-favicon-badge","vue3","vuejs"],"created_at":"2024-12-15T01:31:25.042Z","updated_at":"2026-04-04T06:38:55.133Z","avatar_url":"https://github.com/jsdeveloperr.png","language":"TypeScript","readme":"# 🟠 Favicon Badge Notify\n\n\u003e \u003cp\u003eCustom function adds a favicon and a badge\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![npm](https://img.shields.io/npm/v/favicon-badge-notify?style=flat-square)](https://www.npmjs.com/package/favicon-badge-notify)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/favicon-badge-notify?style=flat-square)\n![npm](https://img.shields.io/npm/dt/favicon-badge-notify?style=flat-square)\n![GitHub license](https://img.shields.io/npm/l/favicon-badge-notify?style=flat-square)\n\n\u003c/div\u003e\n\n## :books: Introduction\n\nFavicon Badge Notify implemented as custom function.\n\n## :rocket: Examples\n\nCheck our Reactjs 👉 [example](https://react-favicon-badge-notify.vercel.app/)\n\nCheck our Vuejs 👉 [example](https://vue-favicon-badge-notify.vercel.app/)\n\nCheck our Solidjs 👉 [example](https://solid-favicon-badge-notify.vercel.app/)\n\n## :package: Installation\n\n```bash\n# install with yarn\nyarn add favicon-badge-notify\n# install with npm\nnpm install favicon-badge-notify\n# install with pnpm \npnpm add favicon-badge-notify\n```\n\n## :sparkles: Reactjs example\n\n```js\nimport { useState, useEffect } from 'react'\nimport { Helmet } from \"react-helmet\"\n\nimport useFaviconBadgeNotify from 'favicon-badge-notify'\nimport faviconSvg from \"./assets/favicon.svg\";\n\nfunction ReactFaviconBadgeNotify() {\n  const [count, setCount] = useState(0)\n  const [favicon, setFavicon] = useState(faviconSvg)\n  const { drawBadge, destroyBadge } = useFaviconBadgeNotify({\n    src: faviconSvg,\n    badgeValue: count,\n  })\n\n  useEffect(() =\u003e {\n    drawBadge().then(badge =\u003e setFavicon(badge));\n\n    return () =\u003e destroyBadge();\n  }, [count]);\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cHelmet\u003e\n        \u003clink rel=\"icon\" type=\"image/png\" sizes=\"128x128\" href={favicon}\u003e\u003c/link\u003e\n      \u003c/Helmet\u003e\n      \u003cheader className=\"App-header\"\u003e\n        \u003cp className=\"buttons\"\u003e\n          \u003cbutton type=\"button\" className=\"increase\" onClick={() =\u003e setCount((count) =\u003e count + 1)}\u003e\n            increase\n          \u003c/button\u003e\n          \u003cspan\u003e{count}\u003c/span\u003e\n          \u003cbutton type=\"button\" className=\"decrease\" onClick={() =\u003e count - 1 \u003e= 0 \u0026\u0026 setCount((count) =\u003e count - 1)}\u003e\n            decrease\n          \u003c/button\u003e\n        \u003c/p\u003e\n      \u003c/header\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default ReactFaviconBadgeNotify\n```\n\n## :sparkles: Vuejs example\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { reactive, onBeforeUnmount, watch } from 'vue';\nimport { Head } from '@vueuse/head';\nimport useFaviconBadgeNotify from 'favicon-badge-notify';\n\nconst state = reactive({\n  favicon: '/favicon.svg',\n  count: 0\n});\n\nconst setFavicon = (val: string) =\u003e state.favicon = val;\nconst setCount = (val: number) =\u003e state.count = val;\n\nconst { drawBadge, destroyBadge } = useFaviconBadgeNotify({\n  src: state.favicon\n});\n\nwatch(\n  () =\u003e state.count,\n  (count, prevCount) =\u003e {\n    drawBadge(count).then((badge) =\u003e setFavicon(badge));\n  }\n);\n\nonBeforeUnmount(() =\u003e {\n  destroyBadge();\n});\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cHead\u003e\n    \u003clink rel=\"icon\" type=\"image/png\" sizes=\"128x128\" :href=\"state.favicon\" /\u003e\n  \u003c/Head\u003e\n  \u003cp class=\"buttons\"\u003e\n    \u003cbutton type=\"button\" class=\"increase\" @click=\"setCount(state.count + 1)\"\u003eincrease\u003c/button\u003e\n    \u003cspan\u003e{{ state.count }}\u003c/span\u003e\n    \u003cbutton type=\"button\" class=\"decrease\" @click=\"state.count - 1 \u003e= 0 \u0026\u0026 setCount(state.count - 1)\"\u003e\n      decrease\n    \u003c/button\u003e\n  \u003c/p\u003e\n\u003c/template\u003e\n```\n\n## :sparkles: Solidjs example\n\n```js\nimport { Component, createEffect, createSignal } from 'solid-js';\nimport { MetaProvider, Link } from '@solidjs/meta';\n\nimport useFaviconBadgeNotify from 'favicon-badge-notify';\nimport faviconSvg from './assets/favicon.svg';\n\nconst SolidFaviconBadgeNotify: Component = () =\u003e {\n  const [count, setCount] = createSignal\u003cnumber\u003e(0);\n  const [favicon, setFavicon] = createSignal\u003cstring\u003e(faviconSvg);\n  const { drawBadge, destroyBadge } = useFaviconBadgeNotify({\n    src: faviconSvg\n  });\n\n  createEffect(() =\u003e {\n    drawBadge(count()).then((badge: any) =\u003e setFavicon(badge));\n\n    return () =\u003e destroyBadge();\n  }, [count()]);\n\n  return (\n    \u003cdiv class={styles.App}\u003e\n      \u003cMetaProvider\u003e\n        \u003cLink rel=\"icon\" type=\"image/png\" sizes=\"128x128\" href={favicon()} /\u003e\n      \u003c/MetaProvider\u003e\n      \u003cheader class={styles.header}\u003e\n        \u003cp class={styles.buttons}\u003e\n          \u003cbutton type=\"button\" class={styles.increase} onClick={() =\u003e setCount(count() + 1)}\u003e\n            increase\n          \u003c/button\u003e\n          \u003cspan\u003e{count}\u003c/span\u003e\n          \u003cbutton\n            type=\"button\"\n            class={styles.decrease}\n            onClick={() =\u003e count() - 1 \u003e= 0 \u0026\u0026 setCount(count() - 1)}\u003e\n            decrease\n          \u003c/button\u003e\n        \u003c/p\u003e\n      \u003c/header\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default SolidFaviconBadgeNotify;\n```\n\n\u003cp align=\"center\" dir=\"auto\"\u003e\n    \u003cimg src=\"https://github.com/jsdeveloperr/favicon-badge-notify/blob/master/example/react/src/assets/favicon-badge-notify.png\" width=\"150\" alt=\"Favicon Badge Notify\" style=\"max-width: 100%;\"\u003e \n\u003c/p\u003e\n\n## 📄 License\n\n\u003cdiv calign=\"center\"\u003e\n    🍁 MIT Licensed | Copyright © 2022-present Abdulnasır Olcan and @FaviconBadgeNotify contributors\n\u003c/div\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdeveloperr%2Ffavicon-badge-notify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsdeveloperr%2Ffavicon-badge-notify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdeveloperr%2Ffavicon-badge-notify/lists"}