That image is called **&#39;[favicon][1]&#39;** and it&#39;s a small square shaped `.ico` file, which is the standard file type for favicons. You could use `.png` or `.gif` too, but you should follow the standard for better compatibility.

To set one for your website you should:

 1. Make a square image of your logo (preferably 32x32 or 16x16 pixels, as far as I know there&#39;s no max size*), and transform it into an `.ico` file. You can do this on Gimp, Photoshop (with help of a [plugin][3]) or a website like [Favicon.cc][2] or [RealFaviconGenerator][4].

 2. Then, you have two ways of setting it up:

 A) Placing it on the **root folder/directory** of your website (next to `index.html`)
   with the name `favicon.ico`.
 
 or
 
 B) Link to it between the `&lt;head&gt;&lt;/head&gt;` tags of every `.html` file on your site, like this:

        &lt;head&gt;
          &lt;link rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot; href=&quot;favicon.ico&quot; /&gt;
        &lt;/head&gt;

If you want to see the `favicon` from any website, just write `www.url.com/favicon.ico` and you&#39;ll (probably) see it. [Stackoverflow&#39;s][5] favicon is 16x16 pixels and [Wikipedia][6] is 32x32.

*: There&#39;s even a browser problem with no filesize limit. You could easily crash a browser with an exceedingly large favicon, more info [here][7]


  [1]: http://en.wikipedia.org/wiki/Favicon
  [2]: http://www.favicon.cc
  [3]: https://graphicdesign.stackexchange.com/questions/9422/how-to-open-or-save-as-ico-in-photoshop-cs6
  [4]: http://realfavicongenerator.net/
  [5]: https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d
  [6]: https://en.wikipedia.org/favicon.ico
  [7]: https://www.popularmechanics.com/technology/apps/a16040/favicon-bug-crashes-browser/

It is called &#39;**favicon**&#39; and you need to add below code to the **header** section of your website.

Simply add this to the `&lt;head&gt;` section.

    &lt;link rel=&quot;icon&quot; href=&quot;/your_path_to_image/favicon.jpg&quot;&gt;







This is the [favicon][1] and is explained in the link.

e.g. from W3C

      &lt;link rel=&quot;icon&quot; 
         type=&quot;image/png&quot; 
         href=&quot;http://example.com/myicon.png&quot;&gt;

Plus, of course the image file in the appropriate place.

  [1]: http://www.w3.org/2005/10/howto-favicon

Add a icon file named &quot;favicon.ico&quot; to the root of your website.

    &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;114x114&quot; href=&quot;${resource(dir: &#39;images&#39;, file: 
    &#39;apple-touch-icon-retina.png&#39;)}&quot;&gt;

or you can use this one

    &lt;link rel=&quot;shortcut icon&quot; sizes=&quot;114x114&quot; href=&quot;${resource(dir: &#39;images&#39;, file: &#39;favicon.ico&#39;)}&quot;
    type=&quot;image/x-icon&quot;&gt;


 1. ADD THIS
```
**&lt;HEAD&gt;**

  &lt; link rel=&quot;icon&quot; href=&quot;directory/image.png&quot;&gt;
```

Then run and enjoy it

I&#39;m trying to add pages to my list. I followed the AngularJS tutorial, the one about smartphones and I&#39;m trying to display only certain number of objects. Here is my html file:

	  &lt;div class=&#39;container-fluid&#39;&gt;
		&lt;div class=&#39;row-fluid&#39;&gt;
			&lt;div class=&#39;span2&#39;&gt;
				Search: &lt;input ng-model=&#39;searchBar&#39;&gt;
				Sort by: 
				&lt;select ng-model=&#39;orderProp&#39;&gt;
					&lt;option value=&#39;name&#39;&gt;Alphabetical&lt;/option&gt;
					&lt;option value=&#39;age&#39;&gt;Newest&lt;/option&gt;
				&lt;/select&gt;
				You selected the phones to be ordered by: {{orderProp}}
			&lt;/div&gt;

			&lt;div class=&#39;span10&#39;&gt;
			  &lt;select ng-model=&#39;limit&#39;&gt;
				&lt;option value=&#39;5&#39;&gt;Show 5 per page&lt;/option&gt;
				&lt;option value=&#39;10&#39;&gt;Show 10 per page&lt;/option&gt;
				&lt;option value=&#39;15&#39;&gt;Show 15 per page&lt;/option&gt;
				&lt;option value=&#39;20&#39;&gt;Show 20 per page&lt;/option&gt;
			  &lt;/select&gt;
			  &lt;ul class=&#39;phones&#39;&gt;
				&lt;li class=&#39;thumbnail&#39; ng-repeat=&#39;phone in phones | filter:searchBar | orderBy:orderProp | limitTo:limit&#39;&gt;
					&lt;a href=&#39;#/phones/{{phone.id}}&#39; class=&#39;thumb&#39;&gt;&lt;img ng-src=&#39;{{phone.imageUrl}}&#39;&gt;&lt;/a&gt;
					&lt;a href=&#39;#/phones/{{phone.id}}&#39;&gt;{{phone.name}}&lt;/a&gt;
					&lt;p&gt;{{phone.snippet}}&lt;/p&gt;
				&lt;/li&gt;
			  &lt;/ul&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	  &lt;/div&gt;

I&#39;ve added a select tag with some values in order to limit the number of items that will be displayed. What I want now is to add the pagination to display the next 5, 10, etc.

I have a controller that works with this:

    function PhoneListCtrl($scope, Phone){
    	$scope.phones = Phone.query();
    	$scope.orderProp = &#39;age&#39;;
    	$scope.limit = 5;
    }

And also I have a module in order to retrieve the data from the json files.

    angular.module(&#39;phonecatServices&#39;, [&#39;ngResource&#39;]).
    	factory(&#39;Phone&#39;, function($resource){
    		return $resource(&#39;phones/:phoneId.json&#39;, {}, {
    			query: {method: &#39;GET&#39;, params:{phoneId:&#39;phones&#39;}, isArray:true}
    		});
    	});

Pagination on a list using ng-repeat

How can JavaScript change CSS `:hover` properties?

For example:

**HTML**

    &lt;table&gt;
      &lt;tr&gt;
        &lt;td&gt;Hover 1&lt;/td&gt;
        &lt;td&gt;Hover 2&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;

**CSS**

    table td:hover {
    background:#ff0000;
    }

How can the `td :hover` properties be modified to, say, `background:#00ff00`, with JavaScript? I know I could access the style background property using JavaScript with:

    document.getElementsByTagName(&quot;td&quot;).style.background=&quot;#00ff00&quot;;

But I don&#39;t know of a `.style` JavaScript equivalent for `:hover`.

Change :hover CSS properties with JavaScript

The image next to the page title in the browser tab - how can you link an image here?

How do I put my website&#39;s logo to be the icon image in browser tabs?

<p>The image next to the page title in the browser tab - how can you link an image here?</p>


How to I get rid of Jade while using Express with Node.JS? I want to just use plain html. In other articles I have seen that people recommended app.register() which is now deprecated in the latest version.

Using HTML in Express instead of Jade

If the HTML has elements like this:

    id=&quot;product42&quot;
    id=&quot;product43&quot;
    ...

How do I match all of those id&#39;s starting with &quot;product&quot;?

I&#39;ve seen answers that do this exactly using javascript, but how to do it with only CSS?

How to get CSS to select ID that begins with a string (not in Javascript)?

I tried to create buttons and insert my own images instead of the standard button images. However, the gray border from the standard buttons still remains, showing on the outside of my black button images. 

Does anyone know how to remove this gray border from the button, so it&#39;s just the image itself? Thank you.

Remove border from buttons

I heard several times that jQuery&#39;s strongest asset is the way it queries and manipulates elements in the DOM: you can use CSS queries to create complex queries that would be very hard to do in regular javascript . 
However , as far as I know, you can achieve the same result with `document.querySelector` or `document.querySelectorAll`, which are supported in Internet Explorer 8 and above. 

So the question is this: why &#39;risk&#39; jQuery&#39;s overhead if its strongest asset can be achieved with pure JavaScript? 

I know jQuery has more than just CSS selectors, for example cross browser AJAX, nice event attaching etc. But its querying part is a very big part of the strength of jQuery!

Any thoughts?

jQuery vs document.querySelectorAll

How do I add an expand/collapse transition?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    function showHide(shID) {
        if (document.getElementById(shID)) {
            if (document.getElementById(shID + &#39;-show&#39;).style.display != &#39;none&#39;) {
                document.getElementById(shID + &#39;-show&#39;).style.display = &#39;none&#39;;
                document.getElementById(shID).style.display = &#39;block&#39;;
            } else {
                document.getElementById(shID + &#39;-show&#39;).style.display = &#39;inline&#39;;
                document.getElementById(shID).style.display = &#39;none&#39;;
            }
        }
    }

&lt;!-- language: lang-css --&gt;

    .more {
        display: none;
        padding-top: 10px;
    }

    a.showLink,
    a.hideLink {
        text-decoration: none;
        -webkit-transition: 0.5s ease-out;
        background: transparent url(&#39;down.gif&#39;) no-repeat left;
    }

    a.hideLink {
        background: transparent url(&#39;up.gif&#39;) no-repeat left;
    }


&lt;!-- language: lang-html --&gt;

    Here is some text.
    &lt;div class=&quot;readmore&quot;&gt;
        &lt;a href=&quot;#&quot; id=&quot;example-show&quot; class=&quot;showLink&quot; onclick=&quot;showHide(&#39;example&#39;);return false;&quot;&gt;Read more&lt;/a&gt;
        &lt;div id=&quot;example&quot; class=&quot;more&quot;&gt;
            &lt;div class=&quot;text&quot;&gt;Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/div&gt;
            &lt;p&gt;&lt;a href=&quot;#&quot; id=&quot;example-hide&quot; class=&quot;hideLink&quot; onclick=&quot;showHide(&#39;example&#39;);return false;&quot;&gt;Hide&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

[http://jsfiddle.net/Bq6eK/1][1]



  [1]: http://jsfiddle.net/Bq6eK/1

Add CSS3 transition expand/collapse

This is a really basic question, but I&#39;m trying to change the favicon of my node.js/Express app with

    app.use(express.favicon(__dirname + &#39;/public/images/favicon.ico&#39;));

and I&#39;m still getting the default favicon. This is in my `app.configure` function, and yes, I&#39;ve verified that there **is**  a `favicon.ico` in the `/public/images/favicon.ico`.There&#39;s nothing about a `favicon.ico` in the console, either, which leads me to believe that this line of code is being ignored. Everything else in the function (setting port, setting views directory, setting template engine. etc.) seems to be working fine, so why would this line of code not be executing?

**What I tried**

 - Emptying browser cache
 - Restarting Terminal and running `node app.js` again
 - Adding `{ maxAge: 2592000000 }`, as described [here](https://groups.google.com/forum/?fromgroups#!topic/express-js/W5mkAorVrW8)

Thanks in advance.

**Update:** I got it to work. See my answer below for more information.

Unable to Change Favicon with Express.js

&gt; **Possible Duplicate:**  
&gt; [HTML Title Image](https://stackoverflow.com/questions/3103490/html-title-image)  

&lt;!-- End of automatically inserted text --&gt;

Can someone please tell me how to make icons appear on browser tabs in PHP? 

I want my icon to appear on the tabs when my site is being accessed.

Add Favicon to Website

The [WHATWG document](http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-rel) for HTML5 says that the `rel` attribute must contain values that are space-separated, and then it gives a table of allowed values.

&gt; The attribute&#39;s value must be a set of space-separated tokens. The [allowed keywords and their meanings](http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#linkTypes)...

The list of allowed keywords for the `link` element does not include `shortcut`, but it does include `icon`. So I&#39;m looking at the all-too-well-known tag

    &lt;link rel=&quot;shortcut icon&quot; href=&quot;/favicon.ico&quot; /&gt;

and wondering if it is HTML5-compliant. Should I remove the keyword `shortcut` from this tag throughout my Website?

HTML5 `&lt;link rel=&quot;shortcut icon&quot; /&gt;`

I am making a HTML page and one of the things I wanted was a favicon appearing next to the title.

I&#39;m using Google Chrome, I see favicons working on other websites, but the favicon on my website won&#39;t show up.  The site is in a folder on my desktop named site.

The `favicon.ico` file is 16x16, and I used an online generator to make it.

This is the code: 

    &lt;!DOCTYPE html&gt;
    &lt;html&gt; 
        &lt;head&gt;
            &lt;title&gt;&lt;/title&gt;
            &lt;link rel=&quot;shortcut icon&quot; href=&quot;/favicon.ico&quot; /&gt;
        &lt;/head&gt;
        &lt;body&gt;
        &lt;/body&gt;
    &lt;/html&gt;

 

HTML Favicon.ico won&#39;t show on Google Chrome

According to the **Internet Assigned Numbers Authority** (IANA), all .ico file falls under the MIME type `image/vnd.microsoft.icon`. ([Source][1])

E.g.
`&lt;link rel=&quot;icon&quot; type=&quot;image/vnd.microsoft.icon&quot; href=&quot;favicon.ico&quot; /&gt;`

However, savvy internet guru, **Paul Irish**, claims this is wrong, and that it would actually be `image/x-icon`. ([Source][2])

E.g.
`&lt;link rel=&quot;icon&quot; type=&quot;image/x-icon&quot; href=&quot;favicon.ico&quot; /&gt;`

I know you can get away with not including a &quot;type&quot; for .ico files, but if you were going to include one, which should it be? Are there actually any problems with serving it as official IANA type?


  [1]: http://www.iana.org/assignments/media-types/image/vnd.microsoft.icon
  [2]: https://github.com/paulirish/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee

Content Type	Original Author	Original Content on Stackoverflow
Question	jay	View Question on Stackoverflow
Solution 1 - Html	LasagnaAndroid	View Answer on Stackoverflow
Solution 2 - Html	Dulacoste	View Answer on Stackoverflow
Solution 3 - Html	Vincent Ramdhanie	View Answer on Stackoverflow
Solution 4 - Html	Mike Fulton	View Answer on Stackoverflow
Solution 5 - Html	user3680001	View Answer on Stackoverflow
Solution 6 - Html	Muji Tech	View Answer on Stackoverflow

How do I put my website's logo to be the icon image in browser tabs?

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

Solution 3 - Html

Solution 4 - Html

Solution 5 - Html

Solution 6 - Html

Change :hover CSS properties with JavaScript

Pagination on a list using ng-repeat

Attributions