set bookmark favicon chrome

Tool to help setting favicon to any bookmark in Chrome. Also works for 'javascript:...' bookmarklets.

by Laurens Maneschijn

HTML

<p>
Tool to help setting favicon to any bookmark in Chrome.<br>
Also works for 'javascript:...' bookmarklets.<br>
Note that favicons are set for a specific url, any changes even just a whitespace in the middle will need to reset it's favicon using this method.
</p>

<form class="block">
	Input:<br>
	&lt;A
	<pre>
HREF          = "<input type="text" id="href" value="javascript:void(0);">"
ADD_DATE      = "<input type="text" class="js_update_nowdate">"
LAST_MODIFIED = "<input type="text" class="js_update_nowdate">"
ICON          = "<input type="text" id="icon" placeholder="data:image/png;base64,...">"
                 <a target="_blank" href="https://www.base64-image.de/">get icon value</a>
&gt;
linktitle        <input type="text" id="title" value="link">
&lt;/A&gt;</pre>
</form>
<img id="img">

<div class="block">
	Output:<br>
	Copy contents into any somename.html file, and import in chrome bookmark manager*:<br>
	<small>
		(*)
		Open bookmark manager: CTRL-SHIFT-O (letter O not number 0)<br>
		then left click on "Organize" (in the top gray bar),<br> 
		and then click "Import bookmarks from HTML file...".
	</small>
	<textarea id="result"></textarea>
</div>

<hr>
links:
<ul>
	<li>original idea source:
		<a target="_blank" href="https://gist.github.com/vinicius-stutz/29f759031b7e5a444733">github</a>
	<li>image to BASE64 converter:
		<a target="_blank" href="https://jsfiddle.net/ElMoonLite/nbdojy8e/">https://jsfiddle.net/ElMoonLite/nbdojy8e/</a>
	<li>image to BASE64 converter:
		<a target="_blank" href="https://www.base64-image.de/">https://www.base64-image.de/</a>
</ul>

<hr>

Important, the entire link needs to be on ONE line:<br>
<pre>&lt;A HREF="..." ADD_DATE="..." LAST_MODIFIER="..." ICON="..."&gt;linktitle&lt;/A&gt;</pre>
If it is parsed correctly an "Imported" folder should appear in your bookmarks.
(delete that folder after you drag the link in there out to where you want)

<hr>

example ICON...

CSS

textarea {
	box-sizing: border-box;
	width: 100%;
	height: 40px;
}

.block {
	display: inline-block;
	margin: 4px;
	padding: 4px;
	background: #eee;
	border: 1px solid #000;
}

hr {
	margin: 20px 10px;
}

img#img {
	outline: 1px solid #888;
	background-color: #fdf;
}

JavaScript

function Bookmarkdate_to_Date(s){
	var d = new Date();
	d.setTime(parseInt(s, 10) * 1000);
	return d;
}
function Date_to_Bookmarkdate(d){
	var d = new Date(d);
	return Math.floor(d.getTime() / 1000);
}

function update_NowBookmarkdate(){
	var v = Date_to_Bookmarkdate(new Date());
	$('.js_update_nowdate').val(v);
//	document.querySelectorAll('.js_update_nowdate').forEach(function(el){	el.value = v;	});
}

// https://stackoverflow.com/questions/6234773/can-i-escape-html-special-chars-in-javascript
function escapeHtml(unsafe) {
	return unsafe
		.replace(/&/g, "&amp;")
		.replace(/</g, "&lt;")
		.replace(/>/g, "&gt;")
		.replace(/"/g, "&quot;")
		.replace(/'/g, "&#039;");
}
function escapeHtmlParameterValue(s){
	return (''+s).replace(/"/g,'&quot;');
}


function update_result(){
	var title = $('#title').val();
	var href = $('#href').val();
	var icon = $('#icon').val();
	var s='<A';
	s += ' HREF="' + escapeHtmlParameterValue(href) + '"';
	s += ' ADD_DATE="' + Date_to_Bookmarkdate(new Date()) + '"';
	s += ' LAST_MODIFIED="' + Date_to_Bookmarkdate(new Date()) + '"';
	s += ' ICON="' + escapeHtmlParameterValue(icon) + '"';
	s += '>';
	s += escapeHtml(title);
	s += '</A>';
	$('#result').val(s);
	if(icon) {
		$('#img').attr('src', icon).show();
	} else {
		$('#img').attr('src', '').hide();
	}
}

update_NowBookmarkdate();
update_result();
setInterval(update_NowBookmarkdate, 1000);
setInterval(update_result, 1000);