2

I am making a bookmarklet that will open a menu in which you can change the websites favicon and title, and have presets. I am fine with the title changing, but I don't know how to add a favicon. I'm attempting to do so without having to find the websites favicon, but adding a favicon element. I have tried the following:

javascript:$('head').append('<link rel="shortcut icon" type="image/png" href='https://ssl.gstatic.com/docs/doclist/images/infinite_arrow_favicon_5.ico"/>');

This would be a bit of code that would supposedly change the favicon to the google drive symbol, but it doesn't work for me. how would I inject a favicon into a website without knowing the specific element class or id, but by inserting a whole new element.

  • Does this answer your question? [Changing website favicon dynamically](https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically) – ggorlen Mar 27 '21 at 19:54

2 Answers2

2

Try this code:

var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/png';
link.rel = 'shortcut icon';
link.href = 'https://ssl.gstatic.com/docs/doclist/images/infinite_arrow_favicon_5.ico';
document.getElementsByTagName('head')[0].appendChild(link);
Prabhjot Singh Kainth
  • 1,831
  • 2
  • 18
  • 26
1

You can give a try to faviconjs, which support image change, animations and notifications. Its homepage lets you check in a blink if this library might be useful to you or not.

philippe_b
  • 38,730
  • 7
  • 57
  • 59
  • 1
    Thanks. I think I may have figured out the problem. In the actual program, I am using a relative href. That makes sense in the original tab but not the new one. (Relative to what?) I just need to straighten out the path. Thanks! – Blake McBride Mar 29 '23 at 18:58