{"id":21033181,"url":"https://github.com/josephuspaye/emojicon","last_synced_at":"2026-05-21T10:34:28.402Z","repository":{"id":41719976,"uuid":"238164213","full_name":"JosephusPaye/emojicon","owner":"JosephusPaye","description":"🔥 Easily use any emoji as favicon!","archived":false,"fork":false,"pushed_at":"2022-12-11T23:14:37.000Z","size":1639,"stargazers_count":2,"open_issues_count":18,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-01T07:22:42.850Z","etag":null,"topics":["createweekly","emoji","favicon","javascript"],"latest_commit_sha":null,"homepage":"https://emojicon.netlify.com","language":"Vue","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/JosephusPaye.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":"2020-02-04T09:06:00.000Z","updated_at":"2024-04-20T11:49:55.000Z","dependencies_parsed_at":"2023-01-27T09:01:11.191Z","dependency_job_id":null,"html_url":"https://github.com/JosephusPaye/emojicon","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/JosephusPaye/emojicon","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosephusPaye%2Femojicon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosephusPaye%2Femojicon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosephusPaye%2Femojicon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosephusPaye%2Femojicon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JosephusPaye","download_url":"https://codeload.github.com/JosephusPaye/emojicon/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosephusPaye%2Femojicon/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33297520,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-21T02:57:32.698Z","status":"ssl_error","status_checked_at":"2026-05-21T02:57:31.990Z","response_time":62,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["createweekly","emoji","favicon","javascript"],"created_at":"2024-11-19T12:52:32.725Z","updated_at":"2026-05-21T10:34:28.384Z","avatar_url":"https://github.com/JosephusPaye.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Emojicon\n\nEmojicon is a small JS library that allows you to dynamically change a page's favicon to any emoji.\n\n![Screenshot of browser tabs showing emoji favicons](./screenshot.png)\n\nThis project is part of [#CreateWeekly](https://dev.to/josephuspaye/createweekly-create-something-new-publicly-every-week-in-2020-1nh9), my attempt to create something new publicly every week in 2020.\n\n## Features\n\nWith Emojicon you can:\n\n- Dynamically change the favicon to any emoji\n- Specify custom emoji color (for some older monochrome emojis)\n- Render emoji to a data URL without changing page favicon\n- Use a custom canvas for rendering (e.g. in Node, for SSR)\n\nEmojicon is tiny and has no dependencies - weighing only 939 bytes (603 bytes g-zipped).\n\n## Design\n\nEmojicon has been designed to work as follows:\n\n- Renders the given emoji to a 32x32 transparent canvas using the platform's emoji font\n- Converts the canvas image to a data URL using [`canvas.toDataURL('image/png')`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL)\n- Changes the page's favicon by setting the `href` attribute on the favicon `\u003clink\u003e` element in the document head\n\n## Installation\n\n```\nnpm install emojicon --save\n```\n\n## Usage\n\nBefore using Emojicon, ensure that your favicon `\u003clink\u003e` element in the document head has an id of `emojicon`, or pass `linkId` with the actual id when calling [`emojicon.set()`](#emojiconsetemoji-options).\n\n```html\n\u003clink rel=\"shortcut icon\" id=\"emojicon\" href=\"/favicon.ico\" /\u003e\n```\n\n### Set the page emoji\n\n```js\nimport emojicon from 'emojicon';\n\nemojicon.set('🔥');\n```\n\n### Change the emoji color\n\nThis only works for some older monochrome emojis.\n\n```js\nimport emojicon from 'emojicon';\n\nemojicon.set('✷', { color: '#EA0' });\n```\n\n### Change the emoji color for dark mode\n\n```js\nimport emojicon from 'emojicon';\n\nfunction getEmojiColor() {\n  // Check for dark mode support\n  if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {\n    return window.matchMedia('(prefers-color-scheme: dark)').matches\n      ? '#fff'\n      : '#000';\n  }\n\n  // Default to black\n  return '#000';\n}\n\nemojicon.set('🔥', { color: getEmojiColor() });\n```\n\n### Render the emoji to a data URL\n\n```js\nimport emojicon from 'emojicon';\n\nconst faviconUrl = emojicon.render('🔥');\n\n// Use `faviconUrl` anywhere you would use an image URL\n```\n\n### Use a custom canvas for rendering\n\nA custom canvas is useful when running in an environment that doesn't have `\u003ccanvas\u003e` available natively (e.g. Node).\n\n```js\nconst emojicon = require('emojicon');\nconst { createCanvas } = require('canvas'); // npm install canvas\n\nconst faviconUrl = emojicon.render('🔥', { canvas: createCanvas(32, 32) });\n\n// Use `faviconUrl` to set the favicon \u003clink\u003e element's `href` attribute\n```\n\nNote that Node Canvas's emoji support [is not that great](https://github.com/Automattic/node-canvas/issues/760). You are probably better off using a default favicon server-side and setting the emoji favicon client-side when the page loads.\n\n### Use Emojicon from a CDN\n\nAdd Emojicon to your list of scripts:\n\n```html\n\u003cscript src=\"https://unpkg.com/emojicon\"\u003e\u003c/script\u003e\n```\n\nThen use it anywhere in JS via the global `emojicon` variable:\n\n```js\nemojicon.set('🔥');\n```\n\n## API\n\n### `emojicon.set(emoji, [options])`\n\nSet the page's favicon to the given emoji.\n\n- `emoji`: String (required): the emoji (should contain one emoji only)\n- `options`: Object (optional) with any of the following properties:\n  - `linkId`: String: id of the favicon `\u003clink\u003e` element to set the emoji on, defaults to `emojicon`\n  - `color`: String: color of the emoji (any CSS color string)\n  - `canvas`: Object: a custom canvas implementation, must be compatible with the [standard canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)\n\n### `emojicon.render(emoji, [options])`\n\nRender the given emoji to a data URL.\n\n- `emoji`: String (required): the emoji (should contain one emoji only)\n- `options`: Object (optional) with any of the following properties:\n  - `color`: String: color of the emoji (any valid CSS color string)\n  - `canvas`: Object: a custom canvas implementation, must be compatible with the [standard canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)\n\nReturns a data URL string that can be used anywhere you would use an image URL.\n\n## To-Do\n\n- [ ] Add TypeScript declarations (contributions welcome)\n\n## Licence\n\n[MIT](LICENCE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosephuspaye%2Femojicon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjosephuspaye%2Femojicon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosephuspaye%2Femojicon/lists"}