Giving the Squirt.io bookmarklet a favicon
Tags: chrome, squirtio
Published: 2014-03-13 09:00:00

---
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/y9hxcwi5y92j6zfcxbjx.jpg
title: Giving the Squirt.io bookmarklet a favicon
slug: giving-the-squirt-io-bookmarklet-a-favicon
date: 2014-03-13 09:00
tags: 
 - chrome
 - squirt-io
---
Today I learnt about [squirt.io](http://www.squirt.io/), an open-source Spritz-like bookmarklet which helps you speed read the internet. From 250 words per minute all the way upto 950 words per minute. A bookmarklet is a javascript snippet which sits inside a bookmark on your "favourites bar", and allows you to execute that script on whichever website you're currently on.

I use Chrome mainly, and the only bug bear I have with bookmarklets is that they don't have favicons. As somebody who has a 1920 pixels of favicons stretching across the top of my browser, I can't stand to see that default white icon polluting the line of beautifully crafted icons.

There is a way to set the icon though!

Make sure you have the bookmarklet saved to your bookmarks bar. Then, go to [squirt.io](http://www.squirt.io/) and bookmark it. Right click that bookmark, go to `Bookmark manager`. In the top left hand corner you'll see a menu `Organise`. Click it, and export your bookmarks to a HTML file.

Now open it up in your favourite text editor. I'm using Sublime. Search for squirt.io and you should find a line near the bottom of the file. It'll have a `HREF` pointing to squirt.io, an `ADD_DATE`, and more importantly, an `ICON` attribute. 

    <DT><A HREF="http://www.squirt.io/" ADD_DATE="1394700500" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABRElEQVQ4jZXSPUtcURAG4MeY+BVi0EJsBD8gRZogsk0Eu8XKRiSQwgj5CbYRLGyTKk0gTZoUsfCjEMFS/4EgRME2WwXUoEHN7qa4czfXu3dZM3A458y8874z5wzF1hH7BzzP+dpaCiyjjvW4P/gfgl4coRokC/clSQErkXiFW5yiX5s20uAozoMgu9ZyuJbqnyOhgi/YilYuMNaKJHU8w298x3gmPhekn3JiTeofA/imQGkT1xjJxtLEGgbwKs4/IjaMoTgf4xFe5wk6w1HOgF8GUR+6I16KpPnA1NLSHsa+KnmsJclP9GTKfxK+97jE43zvIkDy6rN4ireYwSSmsI1f+JPJazzUi6igEv3CLpYxIZmNM3zL5d25fJX8QhU7OMEB9v0bqFJB9Q2SQexpnsJ6lL5YpJ63LrzDIW7wExuYLlL+C3jqSJn7EH8tAAAAAElFTkSuQmCC">Squirt</A>

Above this bookmark, you should see your bookmarklet, where the `HREF` starts with `javascript:`. Notice how it doesn't have an `ICON` attribute set? Well, let's set that. Extract the `ICON` attribute from the squirt.io bookmark and inject it into the bookmarklet, like so:


    <DT><A HREF="javascript:(function(){if(window.sq){window.sq.closed&&window.document.dispatchEvent(new Event('squirt.again'));}else{window.sq={};window.sq.userId='63c3f43e-7a2e-4652-ae1b-c8b309fbad5f';s=document.createElement('script');s.src='http://www.squirt.io/bm/squirt.js';s.s=window.location.search;s.idx=s.s.indexOf('sq-dev');if(s.idx!=-1){s.ampIdx=s.s.indexOf('&');s.host=s.s.substring(s.idx+7,s.ampIdx==-1?s.s.length:s.ampIdx);s.src='http://'+(s.host?s.host:'localhost')+':4000/bm/squirt.js';}document.body.appendChild(s);}})();" ADD_DATE="1394699165" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABRElEQVQ4jZXSPUtcURAG4MeY+BVi0EJsBD8gRZogsk0Eu8XKRiSQwgj5CbYRLGyTKk0gTZoUsfCjEMFS/4EgRME2WwXUoEHN7qa4czfXu3dZM3A458y8874z5wzF1hH7BzzP+dpaCiyjjvW4P/gfgl4coRokC/clSQErkXiFW5yiX5s20uAozoMgu9ZyuJbqnyOhgi/YilYuMNaKJHU8w298x3gmPhekn3JiTeofA/imQGkT1xjJxtLEGgbwKs4/IjaMoTgf4xFe5wk6w1HOgF8GUR+6I16KpPnA1NLSHsa+KnmsJclP9GTKfxK+97jE43zvIkDy6rN4ireYwSSmsI1f+JPJazzUi6igEv3CLpYxIZmNM3zL5d25fJX8QhU7OMEB9v0bqFJB9Q2SQexpnsJ6lL5YpJ63LrzDIW7wExuYLlL+C3jqSJn7EH8tAAAAAElFTkSuQmCC">Squirt</A>

Now save that file, go back to your Bookmark manager in Chrome, and import the file. Your bookmarklet will now be beautiful and all will be well with the world. Thanks again to [Cameron Boehmer](https://twitter.com/camron) for this amazing bookmarklet, and to [Readability](https://www.readability.com/) and [Spritz Inc](http://www.spritzinc.com/) too for their contributions!