Title UTF-8 on HTML

Question

I'm having a problem with UTF-8 character on the page title, I want to add this on the title of the page --> ♫ <--- (the Music symbol)

The thing is, sometimes it works (on Google Chrome) and sometimes it doesn't (when it doesn't work, it appears a square that is supposed to be an error of encoding) weirdly. And in firefox, it always work when you look to the title in the top of the window (the title that appears up in your page) but the title that appears in the bar below appears the square thing again. :/ What do I do to fix this?

I'm defining the title via Javascript by a js file which I'm using PHP to define it utf-8 as well.

var title = "♫ My Music"; document.title = title;

by the way, it seems to work always on Linux, but on Windows, it does those stuff. =/

Thanks in advance.

Answer 1

This is a font problem rather than an encoding problem; a small rectangle in place of a character typically means that the character is not present in the font(s) used.

Browsers typically use some specific fonts when they render title element contents (somewhere outside the page itself). These fonts may depend on the settings in the operating systems. On Windows 7 for example, the default for them is 9pt Segoe UI, a relatively rich font, whereas older systems have more limited fonts. Anyway, that’s outside an author’s hands.

So the conclusion is that special symbols should be avoided in title elements. Their rendering is not guaranteed, and they probably have no value as far as search engines are considered.