JosephusPaye / emojicon

πŸ”₯ Easily use any emoji as favicon!

Home Page:https://emojicon.netlify.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Emojicon

Emojicon is a small JS library that allows you to dynamically change a page's favicon to any emoji.

Screenshot of browser tabs showing emoji favicons

This project is part of #CreateWeekly, my attempt to create something new publicly every week in 2020.

Features

With Emojicon you can:

  • Dynamically change the favicon to any emoji
  • Specify custom emoji color (for some older monochrome emojis)
  • Render emoji to a data URL without changing page favicon
  • Use a custom canvas for rendering (e.g. in Node, for SSR)

Emojicon is tiny and has no dependencies - weighing only 939 bytes (603 bytes g-zipped).

Design

Emojicon has been designed to work as follows:

  • Renders the given emoji to a 32x32 transparent canvas using the platform's emoji font
  • Converts the canvas image to a data URL using canvas.toDataURL('image/png')
  • Changes the page's favicon by setting the href attribute on the favicon <link> element in the document head

Installation

npm install emojicon --save

Usage

Before using Emojicon, ensure that your favicon <link> element in the document head has an id of emojicon, or pass linkId with the actual id when calling emojicon.set().

<link rel="shortcut icon" id="emojicon" href="/favicon.ico" />

Set the page emoji

import emojicon from 'emojicon';

emojicon.set('πŸ”₯');

Change the emoji color

This only works for some older monochrome emojis.

import emojicon from 'emojicon';

emojicon.set('✷', { color: '#EA0' });

Change the emoji color for dark mode

import emojicon from 'emojicon';

function getEmojiColor() {
  // Check for dark mode support
  if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
    return window.matchMedia('(prefers-color-scheme: dark)').matches
      ? '#fff'
      : '#000';
  }

  // Default to black
  return '#000';
}

emojicon.set('πŸ”₯', { color: getEmojiColor() });

Render the emoji to a data URL

import emojicon from 'emojicon';

const faviconUrl = emojicon.render('πŸ”₯');

// Use `faviconUrl` anywhere you would use an image URL

Use a custom canvas for rendering

A custom canvas is useful when running in an environment that doesn't have <canvas> available natively (e.g. Node).

const emojicon = require('emojicon');
const { createCanvas } = require('canvas'); // npm install canvas

const faviconUrl = emojicon.render('πŸ”₯', { canvas: createCanvas(32, 32) });

// Use `faviconUrl` to set the favicon <link> element's `href` attribute

Note that Node Canvas's emoji support is not that great. You are probably better off using a default favicon server-side and setting the emoji favicon client-side when the page loads.

Use Emojicon from a CDN

Add Emojicon to your list of scripts:

<script src="https://unpkg.com/emojicon"></script>

Then use it anywhere in JS via the global emojicon variable:

emojicon.set('πŸ”₯');

API

emojicon.set(emoji, [options])

Set the page's favicon to the given emoji.

  • emoji: String (required): the emoji (should contain one emoji only)
  • options: Object (optional) with any of the following properties:
    • linkId: String: id of the favicon <link> element to set the emoji on, defaults to emojicon
    • color: String: color of the emoji (any CSS color string)
    • canvas: Object: a custom canvas implementation, must be compatible with the standard canvas API

emojicon.render(emoji, [options])

Render the given emoji to a data URL.

  • emoji: String (required): the emoji (should contain one emoji only)
  • options: Object (optional) with any of the following properties:
    • color: String: color of the emoji (any valid CSS color string)
    • canvas: Object: a custom canvas implementation, must be compatible with the standard canvas API

Returns a data URL string that can be used anywhere you would use an image URL.

To-Do

  • Add TypeScript declarations (contributions welcome)

Licence

MIT

About

πŸ”₯ Easily use any emoji as favicon!

https://emojicon.netlify.com

License:MIT License


Languages

Language:Vue 55.7%Language:JavaScript 34.8%Language:HTML 8.3%Language:CSS 1.2%