I was designing a website whose brand icon is an emoji. While I was testing it across various browsers I noticed that the emoji changes according to the different browsers. Further digging showed that it also changes the emoji in the title when sharing it on platforms like Messenger and WhatsApp.
Is there a way to get around this?
This site was how I actually realized emojis are just Unicode. The image that is displayed depends on the image associated with that Unicode on that platform
You have different possibilities. As @PraneethAvvari answer: if it is a brand icon, get it as picture, so that you have full control on how it will be displayed, also in future version of fonts.
An other possibility it is to specify the font you want to use (select a webfont) for specific items. You can do this with CSS and e.g. a special <span class="my_emoji">X</span>.
On the other hand, you should care about the expected consistency from people, not of your site. People prefers consistent view on their architecture. If I look your website from Windows, probably I'll never look it from a Mac. The same between IPhone and Android. And possibly within 10 minutes I'll not change architecture (computer to phone), but I'll change website. So I would be more annoyed if I do not recognize the same emoji quickly. As you see, there is always a trade off, and you should check for every element, it you need to use it as a logo, or as a functional feature (so with specific font), or just semantic (e.g. text from user, so keeping default font).
Don't use emoji as Brad Icon , Instead take a Image file of the emoji you want, being a Unicode emoji changes from platform to platform, take a Screenshot of required Emoji resize it to all the sizes you require and upload.
