← All articles 9 min read

Image to Emoji: Turn Any Photo into a Custom Emoji

A custom emoji is a tiny image that communicates more than any standard smiley ever could. Your team lead's face as a reaction, your company logo as a status, your cat mid-sneeze as a conversation ender — custom emojis turn inside jokes and brand moments into reusable visual shorthand.

The technical challenge is simple: take an image, crop it to the subject, resize it to platform specs, and export in the right format. The creative challenge is harder — emojis are viewed at 20-32 pixels on screen, so only bold shapes and high contrast survive. This guide covers the platform specs, the tools, and the design principles that make the difference between a custom emoji people actually use and one that looks like a blurry smudge.

Platform Specs at a Glance

Every platform has slightly different requirements. Getting these wrong means your emoji renders blurry, gets rejected on upload, or loses its transparent background.

Platform Max Size Format Dimensions Animated Notes
Slack 128 KB PNG, GIF, JPG 128×128 px (square) Yes (GIF) Auto-resized to fit; upload via workspace admin or /emoji command
Discord 256 KB PNG, GIF, JPG 128×128 px (square) Yes (GIF, Nitro only for use) 50 static + 50 animated emoji slots per server (free tier)
Microsoft Teams 50 KB PNG 128×128 px (square) No Upload via Apps > Manage your apps > Custom emoji
GitHub 1 MB PNG, GIF Any (displayed at ~20px) Yes (GIF) Org-level custom emoji; very small display size
Twitch 1 MB (static), 1 MB (animated) PNG, GIF 112×112 px Yes (GIF, affiliates+) Must upload 3 sizes: 28×28, 56×56, 112×112

Universal rule: Design at 128×128 px with a transparent PNG background. This covers every major platform. Downscale for Twitch's multi-size requirement.

Step 1: Choose the Right Source Image

Not every image works as an emoji. At 20-32 pixels of display size, most detail disappears. The best emoji source images share these qualities:

Bad source images: landscapes, group photos, anything with fine text, low-contrast images, images smaller than 128×128 px (upscaling creates blur).

Step 2: Remove the Background

Custom emojis almost always need a transparent background. A white or colored background makes the emoji look like a square stamp pasted into the chat — not the floating, integrated look you want.

Fastest method: Pixotter's background remover handles this in one step. Drop the image, get a transparent PNG cutout. No upload to a server, no account required. For more options, see our transparent PNG guide.

If your source is already a logo or icon on a solid color, most tools handle it instantly. Photos with complex backgrounds (hair, foliage, similar-color backgrounds) may need edge refinement.

Step 3: Crop and Resize

Using Pixotter

  1. After removing the background, download the transparent PNG.
  2. Open Pixotter's resize tool and upload the cutout.
  3. Set dimensions to 128×128 px with Fit mode (maintains aspect ratio with transparent padding) or Cover mode (crops to fill the square).
  4. Download the resized PNG.

For platform-specific sizes, check the specs table above. Twitch requires three sizes — resize to 112×112, 56×56, and 28×28 separately.

Using Photoshop v26.3

License: Proprietary, Creative Cloud subscription ($22.99/month).

  1. Open your cutout image (transparent background PNG).
  2. Go to Image > Canvas Size. Set width and height to the same value (use the larger dimension). Check Relative: off. This adds transparent padding to make the image square.
  3. Center the subject. Use Edit > Free Transform (Ctrl+T / Cmd+T) to scale the subject to fill most of the square while leaving a few pixels of breathing room at the edges.
  4. Go to Image > Image Size. Set width and height to 128 px. Set resampling to Bicubic Sharper (best for downscaling).
  5. File > Export > Export As > PNG. Check that transparency is preserved.

Using GIMP v2.10.38

License: GNU General Public License v3 (GPL-3.0) — free and open source.

  1. Open your cutout image.
  2. Go to Image > Canvas Size. Set both dimensions to the larger of width or height. Click Center to center the layer.
  3. Image > Flatten Image — then immediately Layer > Transparency > Add Alpha Channel to restore the alpha channel with the new canvas size.
  4. Image > Scale Image. Set width and height to 128 px. Set interpolation to NoHalo or LoHalo (best for downscaling).
  5. File > Export As > PNG.

Step 4: Optimize File Size

Platform file size limits are strict. A transparent 128×128 PNG is typically 5-30 KB — well within limits. But if your emoji uses gradients, soft shadows, or complex transparency, the file can balloon.

Quick compression: Run the image through Pixotter's compressor. PNG compression is lossless — you lose zero quality while potentially cutting file size by 30-60%.

If you are still over the limit (common with animated GIFs):

Step 5: Upload to Your Platform

Slack

  1. Open any channel and click the smiley face icon in the message toolbar.
  2. Click Add Emoji (or type /emoji in any channel).
  3. Upload your 128×128 PNG.
  4. Give it a short, memorable name — this is what people type after the colon (:catlaugh:, :shipit:, :approved:).
  5. Choose an alias if you want multiple trigger words for the same emoji.

Requires: Workspace admin permission or the "Allow members to add custom emoji" setting enabled.

Discord

  1. Open Server Settings > Emoji.
  2. Click Upload Emoji.
  3. Select your 128×128 PNG (or GIF for animated).
  4. Name it — Discord auto-generates from the filename, but short, lowercase names without spaces work best.
  5. The emoji appears immediately for all server members.

Limits: 50 static emoji + 50 animated emoji per server on free tier. Boosted servers get up to 250 of each.

Microsoft Teams

  1. In a chat or channel, click the emoji icon in the message toolbar.
  2. Click the + icon at the top of the emoji picker.
  3. Upload your 128×128 PNG (max 50 KB).
  4. Name the emoji.

Note: Custom emoji in Teams are organization-scoped. An admin may need to enable the feature.

Making Animated Emojis (GIF)

Animated emojis get more reactions and higher usage than static ones. The process adds a few steps.

Simple Animation: Bouncing or Spinning

For a simple bounce, spin, or pulse effect applied to a static image:

  1. Start with your 128×128 transparent PNG.
  2. Use ezgif.com (free, browser-based) to create a GIF:
    • Upload multiple frames with slight position/rotation changes, or
    • Use the Effects tool to auto-generate bounce, spin, or pulse animations from a single image.
  3. Set frame delay to 80-120 ms for smooth motion (8-12 fps).
  4. Optimize the GIF to stay under the platform's file size limit (256 KB for Discord, 128 KB for Slack).

From Video Clip

  1. Trim your video to 1-3 seconds maximum. Longer loops lose impact.
  2. Use FFmpeg v7.0 (LGPL-2.1+ license) to extract and convert:
ffmpeg -i clip.mp4 -vf "fps=10,scale=128:128:flags=lanczos,crop=128:128" -loop 0 emoji.gif
  1. Check file size. If over the limit, reduce fps to 8 or scale to 96×96:
ffmpeg -i clip.mp4 -vf "fps=8,scale=96:96:flags=lanczos" -loop 0 emoji-small.gif

Design Tips for Emojis That Actually Get Used

Making an emoji is easy. Making one that people reach for in conversation is harder. These patterns come from analyzing popular custom emoji sets across Slack communities and Discord servers.

Bold outlines work. At 20-32 px display size, emojis without outlines bleed into chat backgrounds. A 2-3 px dark outline at 128×128 source size (scales to roughly 0.5 px at display) keeps the shape readable.

Exaggerate features. Subtle expressions disappear at emoji scale. If you want a smile, make it a grin. If you want surprise, make the eyes huge. Caricature principles apply — amplify the defining trait.

Limit your palette. 3-5 colors maximum. Complex gradients and photo-realistic textures turn to mud at 20 px. Flat colors with clean edges read clearly at any size.

Test at actual display size. Before uploading, view your emoji at 20×20 px and 32×32 px on screen. If you cannot immediately identify the subject, simplify further.

Name it well. The emoji name is half the user experience. People search by typing : and a keyword. Short, obvious names get used: :shipit:, :lgtm:, :catlaugh:. Long or cryptic names get forgotten: :team_offsite_2024_group_photo:.

Quick Comparison: Emoji Maker Tools

Tool Type Transparent BG Resize Batch Best For
Pixotter Browser Yes (via background remover) Yes Yes Full pipeline: remove bg → resize → compress
Photoshop v26.3 Desktop Yes Yes Via Actions Professional control, layer effects
GIMP v2.10.38 Desktop Yes Yes Via Script-Fu Free, full-featured
Canva Browser Yes (Pro only) Yes No Quick designs with templates
Kapwing Browser Yes Yes No Animated emoji from video clips
ezgif.com Browser Limited Yes No GIF animation from static images

Turning Photos into Emoji-Style Art

If you want to convert a photo into something that looks like an emoji — simplified, cartoon-style, flat colors — rather than just shrinking a photo to emoji size, you need an additional artistic conversion step:

Frequently Asked Questions

What is the best image format for custom emojis? PNG with transparency for static emojis. GIF for animated emojis. Avoid JPEG — it does not support transparency, so your emoji will have a white or colored background instead of blending into the chat.

Can I use any image as a custom emoji? Technically yes, but practically no. Photos with fine detail, text, or complex scenes become unrecognizable at 20-32 px display size. The best emojis are simple shapes, faces with exaggerated expressions, logos, or icons. See the design tips section above.

How do I make a transparent background for my emoji? Use Pixotter's background remover for one-click removal, or follow our transparent PNG guide for manual methods. Export as PNG to preserve the transparency — JPEG does not support alpha channels.

Why does my emoji look blurry after uploading? Three common causes: (1) your source image is smaller than 128×128 and got upscaled, (2) you used JPEG instead of PNG (JPEG compression smears edges), or (3) the image has too much fine detail that turns to mush at emoji display size. Start with a 128×128 PNG and keep the design simple.

How many custom emojis can I add to Slack or Discord? Slack has no hard limit on custom emoji per workspace — you can add thousands. Discord allows 50 static + 50 animated emojis per server on the free tier, scaling up to 250 of each with server boosts.

Can I make animated emojis without a subscription? Yes. Use ezgif.com (free, browser-based) to create GIFs from static images or video clips. FFmpeg v7.0 (LGPL-2.1+ license) handles video-to-GIF conversion from the command line at no cost.