Apple - Why do emoji like appear when I use Safari, but not Chrome?

The difference is the rendering engines for the browser windows.

We know Safari renders the character set differently than Chrome. But the Window UI elements (the tabs in Chrome) are okay. That's our biggest clue.

The window UI elements are likely (emphasis on likely, I may not be correct here) all being rendered by the OS. So they get the full OS-level emoji-expansion treatment.

But what happens inside a web browser window is all very browser dependent. The rendering engines are a big part of each browser's secret sauce.

Both Safari and Chrome use WebKit, but the similarities between the WebKit instances they use stop somewhere around the name of the engine. They're both forks from the main version and they're both heavily customized to improve the performance in ways that each browser development team thinks is meaningful for their end users.

@JasonSalaz found a great bug in the Chrome bug database that gives us the final clue that it's down to WebKit forks: http://code.google.com/p/chromium/issues/detail?id=90177 -- that bug is talking about the differences between the fork in Chrome and the mainline of WebKit from the open source project. There are rendering differences in the mainline that have yet to make it in to the version Chrome is using. And it looks like they intend to merge the changes in at some point.

Update: Paul Irish has a great blog post on how WebKit differs for all these browsers that currently use it. If you really want to understand just how diverse the WebKit environment is, this is a great read.

You can use the Chrome extension Chromoji. It's a workaround that will replace emoji with embedded images in web pages.

The problem is that your browser is using a different character encoding from that of the document you're viewing.

So how does the browser know which character encoding to use?

1. It can be specified in HTTP using the Content-Type header.
2. It can be specified for the HTML document using the meta element.
3. It can be specified for a specific HTML element using the charset attribute.

If none of these are specified, then different browsers use different techniques to guess at the right character encoding. Some use heuristics. Some allow the user to specify a character encoding. Some select the default character encoding of the operating system.

If none of these pan out, you get the gibberish, also known as mojibake.

So to answer your question directly: Safari and Chrome are trying different things to find the right character encoding.