How to add a bookmarklet with a specific favicon?

Question

I made a little script bookmarklet and I’m trying to add a favicon, but I can’t.

It is in this bookmarklet that I want to implement a favicon - keepvid.com

// Juntar a url ativa na barra de endereço, com url destino e redireciona
location.href='http://keepvid.com?url='+location.href;

<a href="javascript:location.href='http://keepvid.com?url='+location.href;">keevid : Download</a>
<br>
<p>OJETIVO - Baixar vídeos do "Youtube".</p><p>MODO DE USAR - Adicone na sua barra de favoritos. Abra um vídeo do site "Youtube" e clique no Bookmarklet.</p><p>AVISO - Ainda não há um ícone de identificação para este Bookmarklet.</p>

---

According to the image, the favicon I wish would be next to the title "Keepvid: ...", well in the circular area of red. I want to add this icon to bookmarklet above.

I quote two reference sources on the subject:

Adding-favicon-to-javascript-bookmarklet-uses-window-open

how-to-have-favicon-icon-set-when-bookmarklet-dragged-to-Toolbar

Answer 1

In this Q&A, the main intention was to find a way to only make the inclusion of a Favicon in the Bookmarklet. I bring two Script for such purpose in pure Javascript. Let’s see:

Observe the figure - 1:

This example is intended to set Favicon defined in the Window and/or Pop-up

Example - A

javascript:var pic = document.createElement('link'); pic.setAttribute('rel','shortcut icon');  pic.setAttribute('href','http://keepvid.com/favicon.ico'); document.getElementsByTagName('head')[0].appendChild(pic);void(0);

<a href="javascript:var pic = document.createElement('link'); pic.setAttribute('rel','shortcut icon');  pic.setAttribute('href','http://keepvid.com/favicon.ico'); document.getElementsByTagName('head')[0].appendChild(pic); void(0);">Adicionar Favicon Pop-Up</a>

Observe the figure - 2:

This other example will set Favicon not only in the Bookmarklet in the Bookmarklet/Bookmark Bar, but also in the Address Bar and Tab in use

Example - B

javascript: var icone = document.getElementsByTagName('head')[0];ElementoTemporario = icone.innerHTML;NovoElemento ='<link rel=\'shortcut icon\' href=\'http://keepvid.com/favicon.ico\'>';ElementoTemporario =NovoElemento+ElementoTemporario;icone.innerHTML=ElementoTemporario;

<a href="javascript: var icone = document.getElementsByTagName('head')[0];ElementoTemporario = icone.innerHTML;NovoElemento ='<link rel=\'shortcut icon\' href=\'http://keepvid.com/favicon.ico\'>';ElementoTemporario =NovoElemento+ElementoTemporario;icone.innerHTML=ElementoTemporario;">Adicionar Favicon Favoritos</a>

For the best understanding of all, what I did was add a new element link in both Script, where the:

1) First - inserts the favicon address bar and active tab

2) According to - already inserts the favicon in the address bar, tab and "Bookmaklet"

To make it easy to understand, test it in your browser.

Now it is up to adapt your need, in case you will use with some third service.