CODEWITHSUNDEEP
javascriptfaviconbookmarklet
user12156952
user12156952

Reputation:

add/change favicon using js

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.

Upvotes: 2

Views: 5657

Answers (2)

philippe_b
philippe_b

Reputation: 41318

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.

Upvotes: 1

Prabhjot Singh Kainth
Prabhjot Singh Kainth

Reputation: 1861

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);

Upvotes: 2

Related Questions