Discovering the Favicon

Today I spent updating my website. I’m sending out a series of postcards to librarians and I wanted my website to be ready for visitors. I added a new page just for libraries and I added more images (some old and some new) and a couple of links to my home page .

As I was messing around somewhere behind the curtain, I came across the Favicon.* It is the little icon that shows up in a browser’s tab on your computer. (My kids tried finding it on their phones but they couldn’t). Previous to today, I had either a square cube or a globe like icon on the tab that showed my website.

I found it first in Square Space. I tried to upload just any image, but it told me it had to be 16 x 16 px up to 512 x 512 px.

I opened up Photoshop and cropped a picture square. I wanted to use my little alien guy who is waving. I didn’t want to use any background. So, I used the selection tool (it looks like a loop a cowboy would use) and selected the background. It can be tricky to do it all in one go, so I relied heavily on the Shift button which will let you add more to your selection. Occasionally, I had to use the Alt button to subtract out places here and there.

Once it was all selected and I was happy with it, I deleted the selected section and then saved it as a PNG.

I had to upload it both to Square Space and Shopify because my website uses both of those platforms right now. I noticed that Shopify said an PNG wasn’t going to be rendered in IE and suggested a format that I couldn’t find in Photshop. And since I don’t use IE, I decided to worry about that on another day.

Of Course I tried it out and was so excited until my son tried it on his chrome book and even I couldn’t see the Alien well because he had teal themed tabs.

So I added a yellow background.

The next time you visit my website, I hope you’ll notice that little waving alien in the tab.

* [In Shopify, it is under theme settings. In Square Space it is under Design]