Add a picture to your title in HTML

html css image title

12,838

Solution 1

<link rel="icon" type="image/ico" href="favicon.ico" /> Post this inside your <head> tags.

Solution 2

Go to: http://tools.dynamicdrive.com/favicon/

Generate your favicon then put your favicon.ico icon into your public_html/www/httpdocs folder, in other words, put the icon into the folder where your homepage is located.

Additionally you may type the following code into the homepage's <head></head> section:

<link rel="short icon" href="favicon.ico" />

Solution 3

Wait...are you literally trying to stick an <img> element in the <title>? That ain't gonna fly -- the title can't contain HTML. It contains what's called replaceable character data. Only entity references and the element's closing tag mean anything to the parser; everything else is taken literally, and shows up basically as if you'd already HTML-escaped it. If your HTML said <title><img> stuff</title>, for example, the document's title would be the literal text '<img> stuff', and a search engine would be entirely correct to show that literal text (replacing < with < on its end so it shows up correctly). In fact, it'd be largely incorrect not to, in my opinion; what if your page was about how to use the <img> tag?

The only standard way you're going to get an image anywhere near the title is by properly adding a favicon. It still won't be in the title, but that doesn't make much sense anyway. It'll show up next to the URL in most browsers, which is what you and your users typically want. And OSes that let you create web shortcuts will often use it as the shortcut's icon.

The most cross-browser way to add a favicon is two steps:

Put an icon file at the site's root, named favicon.ico and using the same format Windows uses for icon files. (Some browsers can use PNG/GIF/JPG icons, but it seems IE in particular only likes honest-to-goodness .ICO files.) There are sites, like http://tools.dynamicdrive.com/favicon/ as mentioned in another answer, that will convert an image into an icon for you.
Make sure the page has the following HTML in its head:
```
<link href="/favicon.ico" rel="shortcut icon">
```
(Add a slash to self-close the tag if the document is XHTML.)

12,838

Author by

Ibrahim Rahman

Updated on June 04, 2022

Comments

Ibrahim Rahman almost 2 years

I don't know how to add an image icon to the title, I have a favion Icon but it doesn't come, when I try to add a picture using the img src tag it comes as it is, no image!
- Porschiey almost 11 years
  
  Does your Favicon link element look like this?: <link rel="favicon" href="favicon.ico" type="image/x-icon" />
- cHao almost 11 years
  
  Did you spell favicon.ico correctly? :)
- Jukka K. Korpela almost 11 years
  
  Do you mean that when you try to insert the image normally into page content with an img tag, the image is not shown but the img tag is seen instead? Then this is a problem with your authoring environment, or in your way of using it.
cHao almost 11 years

<link> elements are void; </link> is actually invalid HTML. If you must do the XHTMLish thing, the self-closing tag syntax is tolerated in HTML 5; <link... /> is OK.