HTML Title Image

Add image in title bar

That method will not work. The <title> only supports plain text. You will need to create an .ico image with the filename of favicon.ico and save it into the root folder of your site (where your default page is).

Alternatively, you can save the icon where ever you wish and call it whatever you want, but simply insert the following code into the <head> section of your HTML and reference your icon:

<link rel="shortcut icon" href="your_image_path_and_name.ico" />

You can use Photoshop (with a plug in) or GIMP (free) to create an .ico file, or you can just use IcoFX, which is my personal favourite as it is really easy to use and does a great job (you can get an older version of the software for free from download.com).

Update 1:
You can also use a number of online tools to create favicons such as ConvertIcon, which I've used successfully. There are other free online tools available now too, which do the same (accessible by a simple Google search), but also generate other icons such as the Windows 8/10 Start Menu icons and iOS App Icons.

Update 2: You can also use .png images as icons providing IE11 is the only version of IE you need to support. You just need to reference them using the HTML code above. Note that IE10 and older still require .ico files.

Update 3: You can now use Emoji characters in the title field. On Windows 10, it should generally fall back and use the Segoe UI Emoji font and display nicely, however you'll need to test and see how other systems support and display your chosen emoji, as not all devices may have the same Emoji available.

How to add any image as a icon in title?

When trying to set a favicon to your page you have to note the following:

your image is of the correct dimensions (300px is too big to be used as a favicon).
to achieve cross-browser support, you'll need different sizes and different link tags.

Usually, one 180x180, one 32x32 and one 16x16 will suffice to cover all browsers and devices.

Code:

<link rel = "apple-touch-icon" sizes = "180x180" href = "images/logo180x180.png">
<link rel = "icon" type = "image/png" sizes = "32x32" href = "images/logo32x32.png">
<link rel = "icon" type = "image/png" sizes = "16x16" href = "images/logo16x16.png">
<link rel = "mask-icon" href = "images/logo.png">
<link rel = "shortcut icon" href = "images/logo.png">

Correct path:

Aside from the above, it seems that you also use an incorrect path to the favicon, which is why it doesn't work at all. Based on what you have said, your structure is the following:

/
- docs
   - index.html
- images
   - logo.png

With respect to the above structure, the correct relative path you have to use in your html file in order to get the favicon is ../images/logo.png.

Adding image to html title not favicon

It is not a favicon showing with the link. og used to show the image and description.

<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">

Check this stackoverflow topic Provide an image for WhatsApp link sharing

How can I add image under title using css?

With pure HTML / CSS, i'll do it like so.

For the image, use flex to get the alignement you want. For the border, use box-shadow without any blur to control the offset of the border and border-radius to get the round corners.

HTML

<div class="container">
  <h1>About us</h1>
  <img src="https://cdn.pixabay.com/photo/2020/06/19/17/41/divider-5318234_1280.png">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sem ut orci varius rhoncus. Sed eu pulvinar enim. Vivamus egestas ac nisi quis semper. Nam pulvinar erat in rutrum scelerisque. Maecenas ac lectus ultricies, pretium mi in, bibendum urna. Aenean tempus aliquam leo ac dignissim. Maecenas sed porta velit. Cras ut nunc sit amet erat sagittis convallis vitae quis ante.
  </p>
</div>

CSS

.container {
  /* Flex properties */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  /* Border properties */
  box-shadow: -5px 5px 0px black; /* x-offset | y-offset | blur to 0 | color */
  border-radius: 10px; /* border-radius to get a curvy border */
  
  width: 500px;
  padding: 10px;  
}

.container > h1 {
  margin-bottom: 0px; /* Remove the space between title and img */
}

.container > img {
  max-width: 70%;
  height: 50px;
}

And the working fiddle

HTML Title Image

Add image in title bar

How to add any image as a icon in title?

Adding image to html title not favicon

How can I add image under title using css?

Related Topics

Leave a reply