URL Encode Emoji Characters

Emoji characters are encoded in URLs using their UTF-8 byte sequences, just like other Unicode characters. However, emojis occupy high Unicode code points (U+1F000 and above), which means they require 4 bytes in UTF-8, producing 12 characters of percent-encoded output per emoji.

Percent-encoded example: The grinning face emoji (😀) has Unicode code point U+1F600:

• UTF-8 bytes: 0xF0, 0x9F, 0x98, 0x80
• URL encoded: %F0%9F%98%80

JavaScript behavior:

encodeURIComponent("😀")  // "%F0%9F%98%80" (grinning face)
encodeURIComponent("❤️")  // "%E2%9D%A4%EF%B8%8F" (red heart with variation selector)
encodeURIComponent("🇵🇱")  // "%F0%9F%87%BA%F0%9F%87%B8" (flag emoji, two code points)

// Decoding
decodeURIComponent("%F0%9F%98%80") // "😀"

Why emojis are special:

1. Length expansion: Each emoji becomes 12 characters when percent-encoded (4 bytes x 3 chars each). A URL with 20 emojis adds 240 characters.
2. Surrogate pairs in JavaScript: Emojis above U+FFFF are represented as surrogate pairs in JavaScript's UTF-16 strings. "😀".length returns 2, not 1. Use [..."😀"].length for the true character count.
3. Compound emojis: Many modern emojis are actually sequences of multiple code points joined by Zero Width Joiners (U+200D). The family emoji 👨‍👩‍👧‍👦 consists of 7 code points and produces an extremely long encoded string.
4. Variation selectors: Emojis like ❤️ (red heart) include an invisible variation selector character (U+FE0F) that adds 3 more encoded bytes.

Practical implications:

• URL length limits (commonly 2,048-8,192 characters) are consumed quickly by emoji-heavy content
• Some older servers, databases, or APIs may not handle 4-byte UTF-8 sequences correctly
• Email clients and messaging platforms may break or truncate emoji-heavy URLs
• Some URL shorteners do not preserve emoji URLs correctly

Pitfall: When storing or comparing URLs containing emojis, be aware that the same visual emoji may have multiple representations. For example, some emojis can be represented with or without variation selectors, producing different encoded forms. Normalize Unicode (NFC normalization) before encoding if you need consistent URLs.