Google Chrome by default uses normal website favicon when you add it to bookmarks. If website doesn’t have favicon a default blank page icon will be displayed. This is also the case if you add a custom script as a bookmark (for example Plex It! JavaScript which adds videos to your Plex queue).
There is no easy way to add an icons for such bookmarks in Chrome. However, as usual there is a workaround. Following example will create Plex It! bookmark with default Plex icon.
Plex It! Bookmark
Step 1.
Create a new text file with following code:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<DT><A HREF="javascript: var s=document.createElement("script");s.type="text/javascript";s.src="https://my.plexapp.com/queue/bookmarklet_payload?uid=9865aa45345a5b132";var h=document.getElementsByTagName("head")[0];h.appendChild(s);void(0);"
ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACJUlEQVQ4jaWTO2hUQRSGv5l79643G/PSRI3GELN5SEB8FtrYKNgEy0RRIWBrGQuxsRMEQa2DVUBQLIxoK6ISi4AYJOJjiZjXJtmNLtmdze69cyzWbHLVztPNMP935v/PjPJ9X/iPcrXWWGtxHI3nevTsq+dafxA5dHvMYXxq8d8ApHIBBbgOrCxbWnsbOHxgHqaysMOlu7meg8NRYcLfQt4U0RtbQjwGhTXD5ZuaYqYPSjF4L3QfynFjaFsEkDdFAPR6AEppRBTbG2OsZrLcehhAawfEFCx4XDxZoK+n7S8LWmQjQ8fRxByXvo4aXo4v8flnLyT3Q66BnclargyUSXiNGGMwxlQAKsJTaA2eC1vjJZ69Wob6Y9DSDd+buHTa5eypDdfGGDRqPQEIrSUIhTAM2NPs8eL1JG+mgOQJWKsDD85f8KoA3/fRrDsQwdoQsRalXDK5kK6udo4mE5BOQTwEN8bTx6WqGNg8BVAoLFAMAtIrloEznXhMwrcJ2Jtl9EmJ0bFyVVwBbApBRMBaPk0X2NXexJG2GfjwFvwlVmcz3HkgLP5IR6dQFQNWIJcvE2iP64M+LH6EUhlaDCPPHb7OSKR7BSDRRWo+ZGhwNz0dszC9Cs3C3Befu2Nxsssp/qzqQ0KElbyl/3iC4XNpWJiDzjjU1XB1xCOVzke6ezEXAFcpEAErgiA4usz9ewWgFoB3cz6PJgy+YyKdS+Xgd/DwX9/5Fw1I0jlYOpBRAAAAAElFTkSuQmCC">
Plex it!</A>
Replace JavaScript code in HREF element with your own Plex It! bookmark link.
Step 2.
Save the file as plex.html
Step 3.
In Google Chrome go to Bookmark Manager > Organise > Import bookmarks from HTML file
Select your plex.html and click Open.
Step 4.
Your new bookmark with icon will be imported into separate Imported folder. Move the bookmark where you want and delete the Imported folder.
Other Bookmarks
It’s not difficult to make this work for any other bookmark and add a favicon. Simply modify the above text to suit your needs.
The tricky part is ICON=”data:image/png;base64,iVBORo……kSuQmCC”
Here you need to paste your icon encoded with base64 function. There are few ways to get this code.
Option 1 – There is a website with favicon which matches your needs
- Add this website to Chrome bookmarks.
- Export all bookmarks to HTML file (Bookmark Manager > Organise > Export bookmarks to HTML file).
- Open the HTML file with any text editor (notepad, etc).
- Find your new bookmark and copy all text between quotes in ICON part.
Option 2 – Encoding the icon yourself
- There are few free online tools which you can use. For example http://www.motobit.com/util/base64-decoder-encoder.asp
- upload your icon (use 16x16px .png file) and click Convert the source data button.
- This will output base64 code which you can copy and paste in relevant section of the above HTML file.
- If you used this method leave first part of ICON code intact: ICON=”data:image/png;base64, and add your base64 code immediately after the comma. Don’t forget closing quote.
Leave a Reply