CODEWITHSUNDEEP
htmlemojipage-title
Алексей Василенко
Алексей Василенко

Reputation: 104

How to add emoji to a title in HTML

I want to make the title of my website start with the flag of my country. However, if I copy the emoji itself or its unicode, it doesn`t work. Copying emojis just brings me the name of it in the title, not the emoji itself.

There is only one question about it on stackoverflow, but it was 9 years ago, so maybe something has changed!

Thanks in advance!

Upvotes: 1

Views: 6272

Answers (6)

pvti
pvti

Reputation: 57

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎯</text></svg>">

Demo

Source

Upvotes: 0

abdulkareem alabi
abdulkareem alabi

Reputation: 81

the best practice to add an icon to the title is to use a favicon here is an example

<title>your country name</title>
    <link
      rel="shortcut icon"
      href="logo_location/pakistan.svg"
      type="image/x-icon"
    />

in full usage

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pakistan</title>
    <link
      rel="shortcut icon"
      href="logo_location/pakistan.svg"
      type="image/x-icon"
    />
  </head>

Upvotes: 0

Infui0ayaan
Infui0ayaan

Reputation: 239

Simply copy and paste an emoji from emojipedia and paste it into , you might be copy and pasting from a different website.

<!DOCTYPE html>
<html>
<head>
<title>🏳️</title>
</head>
</html>

Upvotes: 1

Ian S
Ian S

Reputation: 31

Go to this site: https://emojipedia.org/emoji/

Grab the codepoint for the emoji you want (ex.U+1F600 for grinning face)

Replace "U+" with "&#x" so it will now look like &#x1F600

Throw that into a html tag

Title will now have a 😀 face

Upvotes: 3

Emel
Emel

Reputation: 2462

Just added as normal. Check the current support.

<!DOCTYPE html>
<html>
<head>
<title>🌎 Title with emoji 🌎</title>
</head>
<body>
 <h1> My body title 🌎 </h1>
</body>
</html>

Upvotes: 1

HaseebGarfinkel
HaseebGarfinkel

Reputation: 50

Emojis are not really recognized well in html. You could try using an image next to your title using and just setting it to a really small size.

Upvotes: 0

Related Questions