emojico

v0.0.11

Published

20 days ago

CLI tool to convert emoji to favicon assets

0High
0Medium
0Low

threepointone

emoji favicon cli

emojico 🎨

A CLI tool that converts any emoji into a complete set of favicons and touch icons for your web projects.

Features

🖼️ Generates favicon.ico with multiple sizes (16x16, 32x32, 48x48)
📱 Creates Apple Touch Icons in all standard sizes
🌐 Generates Open Graph image (og:image) at 1200x630
✨ High-quality emoji rendering
🎯 Perfect for quick favicon generation
📦 Works with any emoji

Installation

# Install globally
npm install -g emojico

# Or use with npx
npx emojico 🚀

Usage

emojico <emoji> [--out <directory>] [--all]

Options

<emoji>: The emoji to convert (required)
-o, --out <directory>: Output directory for the generated assets (default: current directory)
--all: Generate all assets (favicon.ico, PNG favicons, and Apple touch icons)

Example

# Generate favicon.ico in the current directory
emojico 🍎

# Generate all assets (favicon.ico + PNG favicons + Apple touch icons) in current directory
emojico 🍎 --all

# Generate icons for an apple emoji in a specific directory
emojico 🍎 --out ./my-icons

# Generate all assets in a specific directory
emojico 🍎 --out ./my-icons --all

# Generate rocket favicon
emojico 🚀 --out ./rocket-icons

# Generate light bulb icons in a nested directory
emojico 💡 --out ./assets/icons

Output Structure

By default, the tool generates only favicon.ico. Use the --all flag to generate all assets.

Default Output (without --all)

output-directory/
└── favicon.ico             # Multi-size ICO file (16x16, 32x32, 48x48)

Complete Output (with --all)

output-directory/
├── favicon.ico             # Multi-size ICO file (16x16, 32x32, 48x48)
├── og-image.png            # Open Graph image (1200x630)
├── favicons/
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   └── favicon-48x48.png
└── apple-touch-icon/
    ├── apple-touch-icon-57x57.png
    ├── apple-touch-icon-60x60.png
    ├── apple-touch-icon-72x72.png
    ├── apple-touch-icon-76x76.png
    ├── apple-touch-icon-114x114.png
    ├── apple-touch-icon-120x120.png
    ├── apple-touch-icon-144x144.png
    ├── apple-touch-icon-152x152.png
    └── apple-touch-icon-180x180.png

HTML Usage

Add the following to your HTML <head> section:

<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" />

<!-- PNG favicon alternatives -->
<link
  rel="icon"
  type="image/png"
  sizes="16x16"
  href="/favicons/favicon-16x16.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="32x32"
  href="/favicons/favicon-32x32.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="48x48"
  href="/favicons/favicon-48x48.png"
/>

<!-- Apple Touch Icons -->
<link
  rel="apple-touch-icon"
  sizes="57x57"
  href="/apple-touch-icon/apple-touch-icon-57x57.png"
/>
<link
  rel="apple-touch-icon"
  sizes="60x60"
  href="/apple-touch-icon/apple-touch-icon-60x60.png"
/>
<link
  rel="apple-touch-icon"
  sizes="72x72"
  href="/apple-touch-icon/apple-touch-icon-72x72.png"
/>
<link
  rel="apple-touch-icon"
  sizes="76x76"
  href="/apple-touch-icon/apple-touch-icon-76x76.png"
/>
<link
  rel="apple-touch-icon"
  sizes="114x114"
  href="/apple-touch-icon/apple-touch-icon-114x114.png"
/>
<link
  rel="apple-touch-icon"
  sizes="120x120"
  href="/apple-touch-icon/apple-touch-icon-120x120.png"
/>
<link
  rel="apple-touch-icon"
  sizes="144x144"
  href="/apple-touch-icon/apple-touch-icon-144x144.png"
/>
<link
  rel="apple-touch-icon"
  sizes="152x152"
  href="/apple-touch-icon/apple-touch-icon-152x152.png"
/>
<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="/apple-touch-icon/apple-touch-icon-180x180.png"
/>

<!-- Open Graph Image -->
<meta property="og:image" content="/og-image.png" />

Development

# Clone the repository
git clone https://github.com/threepointone/emojico.git
cd emojico

# Install dependencies
npm install

# Build the project
npm run build

# Run tests
npm test

License

ISC

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.