Use Emoji in Safari

2 February 2013, 01:00

Emoji are colorful Japanese emoticons. Safari can display emoji pretty much everywhere — in web pages, and in web page titles (so that the emoji appear in the browser title bar and tabs). This is consistent with the rest of OS X, where emoji can be used in file and folder names, and so on.

As far as I can tell, this makes Safari unique amongst the mainstream OS X web browsers. Google Chrome displays emoji in tabs, but on the actual page it renders them as a squares. Firefox displays them in titlebar, but entirely ignores them on the page and in browser tabs — white space appears where they should be. See below for a screenshot showing first Safari, then Chrome, then Firefox.

Update: A reader has contacted me pointing out that emoji used in blog posting titles and articles can crash some feed readers! This is a good example of how the use of any new technology must be tested thoroughly before being implemented! Incidentally, and for what it’s worth, emoji also display fine in iPad and iPhone versions of Safari.

Windows 8 supports emoji and Windows 7 can do so via a system update. Lacking either OS, I don’t know how their browsers cope with emoji. Let me know in the comments if you can test on Windows.

Your web serving backend will have to be compatible for emoji to work. The simplest way to find out is simply to create a web page and insert emoji characters. Emoji can be inserted by clicking Edit -> Insert Special Characters, and then selecting Emoji on the left of the Characters palette that appears. You can insert an emoji at the cursor point by double-clicking it.

Know better? Let's hear about it...