Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Image icon beside the site URL

I would like to have information about the icons which are displayed alongside the site URLs on a web browser. Is this some browser specific feature? Where do we specify the icon source, ie, is it in some tag on the web page itself ?

like image 795
Nrj Avatar asked Sep 23 '08 11:09

Nrj


People also ask

What is the icon next to the URL?

A favicon (/ˈfæv.ɪˌkɒn/; short for favorite icon), also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons, associated with a particular website or web page.

What is a favicon on a website?

A favicon is a graphic image (icon) associated with a particular Web page and/or Web site. Many recent user agents (such as graphical browsers and newsreaders) display them as a visual reminder of the Web site identity in the address bar or in tabs.


2 Answers

These icons are called favicons

Most web browsers support http://mysite.com/favicon.ico but the proper way to do it is to include an icon meta tag in the head profile.

<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" 
      type="image/png" 
      href="/somewhere/myicon.png" />
[…]
</head>

Source from the W3C itself.

Your best bet is to probably do both with the same icon image.

like image 180
Brian R. Bondy Avatar answered Oct 07 '22 19:10

Brian R. Bondy


I believe you're referring to the Favicon, which allows a website to specify a 16x16 (or larger) image which is displayed in the address bar next to the URL in most modern browsers.

Some browsers just pick the file called favicon.ico which is in the root of your web folder, whereas others require it to be specified in the <head> of the HTML using the following code,

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

This was originally the way it was done with IE, but that doesn't conform to standards (because of the space in the rel), so most browsers now let you do it as follows, where you can use any standard image format, not just .ico

<link rel="icon" href="favicon.png" type="image/png" />
like image 21
Rich Adams Avatar answered Oct 07 '22 19:10

Rich Adams