52

How do I add image in title bar?

I have title- "Webnet"

Merging it with a FontAwesome Glyphicon's icon images as-

<title><i class="icon-user icon-black"></i>Webnet</title>

And I tried it replacing with image source-

<title><img src="assests/img/user-Hermosillo.png" ></img>Webnet</title>

But title shows innerHTML instead of showing image there.

Any help?

Styx
  • 9,863
  • 8
  • 43
  • 53
Manoz
  • 6,507
  • 13
  • 68
  • 114
  • – freshbm Apr 03 '13 at 12:12
  • I think what you want is a [Favicon](https://en.wikipedia.org/wiki/Favicon) – yogi Apr 03 '13 at 12:10
  • This question is how to put an image in the title tag, which is a bit different than "how do I create a favicon" though quite related. FWIW title text supports unicode characters, so if unicode has an "image" glyph you can use that (ex: a raindrop [ex: `a raindrop: 💧`, music notes, etc.)) so you can't control the image, but can have one. Favicon is the standard way to do this. – rogerdpack Nov 08 '16 at 20:32
  • This might not be a favicon. please check this website, they have (smile like character) in title bar: `agario.top` – Giorgi Gvimradze Apr 25 '19 at 23:24

4 Answers4

85

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.

Samuel MacLachlan
  • 1,736
  • 15
  • 21
  • What if you're using a font awesome icon? – iiRosie1 Dec 29 '17 at 16:47
  • @iiRosie1 FontAwesome won’t work because your browser will display the Title in whatever default system/browser font it uses e.g. Arial. Writing a FontAwesome font into the title would result in others seeing a square char in its place as you can’t choose what font is used for the title. – Samuel MacLachlan Jan 27 '18 at 06:53
20

Add this in the head section of your html

<link rel="icon" type="image/gif/png" href="mouse_select_left.png">
karthick
  • 5,998
  • 12
  • 52
  • 90
18

you should be searching about how to add favicon.ico . You can try adding favicon.ico directly in your html pages like this 

<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="shortcut icon" type="image/png" href="http://www.example.com/favicon.png" />

Or you can update that in your webserver. It is advised to add in your webserver as you don't need to add this in each of your html pages (assuming no includes).

To add in your apache place the favicon.ico in your root website director and add this in httpd.conf 

AddType image/x-icon .ico
nandu
  • 779
  • 4
  • 18
12

You'll have to use a favicon for your page. put this in the head-tag: <link rel="shortcut icon" href="/favicon.png" type="image/png">

where favicon.png is preferably a 16x16 png image.

source: Adding a favicon to a static HTML page

Community
  • 1
  • 1
errieman
  • 1,849
  • 1
  • 12
  • 9