How can I change a favicon using jQuery when it doesn't have an ID?

Question

How can I change a favicon using jQuery when it doesn't have an ID? I tried to add an ID, but I just can't seem to find it. I've been trying to get the right path in the Console without success. This is what I have tried: jQuery(:contains("shortcut icon")).attr("id", "favicon")

I figure these are the steps, but I haven't been able to get past the first one:

1. ACCESS LOCATION OF FAVICON VIA jQUERY: STUCK. Here's the HTML:

   <link href='/favicon.png' rel='shortcut icon' />
   

2. ADD AN ID TO THE FAVICON:

   $('element').attr('id', 'favicon');
   

3. USING THE ID, CHANGE FAVICON:

   $('#favicon').attr('href','https://aerohive.com/sites/all/themes/aerohivenetworks/favicon.ico');
   

This is the page: http://community.aerohive.com/aerohive

Answer 1

The type of the element is link not element.

You probably have multiple link elements though, so you should be more specific and use an attribute selector (since you have an attribute with a, presumably, unique value on it).

jQuery('link[rel="shortcut icon"]')

There is not point in adding an ID, throwing away your reference to the element, then getting a new reference to the element using the ID. Just skip step 2.

jQuery('link[rel="shortcut icon"]').attr('href','https://aerohive.com/sites/all/themes/aerohivenetworks/favicon.ico');