How do I put image in url in HTML?

Question

How do I put image in url in HTML? Just left of the address bar.

Answer 1

Short answer, simple solution

Design a 16x16 file in ICO format, call it favicon.ico and place it at the root of your web site (eg. http://mywebsite.com/favicon.ico).

Your favicon will look okay in classic, desktop environments (Windows+IE, Windows+Chrome, etc.).

Long answer, complex (or not) solution

The real answer is complex. The first case to address is the small icon in the tabs of PC's browsers. This is easily done, see the first solution above. Then, you have a lot of additional cases to consider:

• iOS web clips: iPhone and iPad users can add your web site to their home screen. You need special pictures for this. https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
• Android: Android tablet and phone users can add your site to their favorite and home screen. Again, you need additional pictures.
• Windows 8 & IE10/IE11: users can now pin your web site to their desktop. Yep, some other pictures here! http://msdn.microsoft.com/en-us/library/ie/dn255024(v=vs.85).aspx#msapplication-square70x70logo
• Google TV: yet another picture! https://developers.google.com/tv/web/docs/design_for_tv#favicons
• etc. etc.

You can look at this complete favicon picture list.

If you want to cover everything, I suggest you to use this favicon generator. It creates all these pictures at once and also the corresponding HTML code. Full disclosure: I'm the author of this site.

Answer 2

I remember driving myself crazy trying to figure out how to make an icon file type. To create an icon file (.ico extension) you can either use a graphics program that exports ico's (I prefer Fireworks) or use an online .ico generator which takes a JPG, PNG or GIF as input. 16x16 is the smallest file size for .ico that you will want to use. You don't need to put the favicon.ico in your root directory although that is most common. Using the link tag you could also use a relative link to file in a different folder. The file can be named logo.ico or even logo.png if the browser supports PNG for the favorites/shortcut icon. Internet Explorer only supports .ico so everyone uses .ico. Example with non-root directory:

<link rel="shortcut icon" href="/media/images/website_graphics/favicon.ico" />

Generate a favicon.ico file from a JPG, PNG or GIF

Answer 3

Take a look at the wikipedia entry for favicon - http://en.wikipedia.org/wiki/Favicon

The format for this is an .ico file and you need to place this in the root folder of your webserver.

For more advanced scenarios, you can also have a different icon per page by using:

<link rel="shortcut icon" href="http://www.example.com/myicon.ico" />

Answer 4

Just copy file with name facicon.ico in you website root and image will appear.

Answer 5

This is called a favicon actually. Just create your 16x16 pixels icon, name it "favicon.ico" and put it into your document root.