CODEWITHSUNDEEP
htmlcssimagetitle
Ibrahim Rahman
Ibrahim Rahman

Reputation: 21

Add a picture to your title in HTML

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!

Upvotes: 2

Views: 14644

Answers (4)

cHao
cHao

Reputation: 86505

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 &lt; 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:

  1. 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.

  2. 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.)

Upvotes: 1

Sergio
Sergio

Reputation: 28837

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

Upvotes: 3

Aravind30790
Aravind30790

Reputation: 992

USE THIS: 

    <head>
    <link rel="icon" type="image/png" href="logo.ico"/>
    </head>

Upvotes: 1

zkanoca
zkanoca

Reputation: 9918

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" />

Upvotes: 2

Related Questions