How to get custom icons in Safari’s favorites when on the Start Page

a.k.a. “fixing that non-existing Gmail icon that is keeping you awake”

Hat tip to David Lanham’s for his amazing wallpapers

I just got a new Mac and I’ve been spending a ridiculous amount of hours setting everything up just in the way I think things should look and be. To my surprise, some of Google’s sites (Gmail in particular) don’t have any touch icons so they will appear as gray boxes in Safari’s Start Page.

Searching around I found this post explaining the issue and how to fix it. The post also contains a script that you can download and run to automatically fix all the icons but, for some reason it wasn’t working for me. So, taking that script as a guide, here is how I managed to do it.

First, identity the Favorites item that doesn’t have an icon (or the one you want to customize). I changed my “Gmail” favorite address to this:

Now, here’s the technical part. Use your terminal and go to the ~/Library/Safari/Touch Icons Cache/ folder then open the icons cache database by running this command:

Now, let’s look at all the entries in that database by running:

You will see a lot of entries that look similar to these lines:

The one entry we are interested is “mail.google.com” (in my case). Now, next to the decimal number there are columns with numbers. The 3rd number is “0” in this example, we need to change it to “1” so Safari thinks the file was downloaded (if you are trying to replace an existing icon then it should be set to 1 already). To change that number from 0 to 1 run this:

Make sure to change the string next to “host” for the one entry that you are trying to update. To exit the SQLite prompt write .exit then press Enter. Now let’s take care of the actual icon. The downloaded icons are stored in the ~/Library/Safari/Touch Icons Cache/Images/ folder. The name of the file is an MD5 hash of the host part of the favorite’s address (only the host part, without “https” and the rest of the URL) plus the “.png” extension. To calculate the MD5 of the host (or any string) use this command:

The PNG file needs to have at least 144×144 pixels (don’t forget to include the “.png” extension in the icon filename). I used Photoshop to make one then stored it with the filename BE5CAB0695415D9363D18AD1345C73EB.png (which is the corresponding MD5 hash for my Gmail bookmark).

To wrap up, just restart Safari and your custom icon should show up and then you can finally go to bed in peace.

Mexican engineer, technologist, and artist currently living and working in NYC. Principal Architect at Lifion, by ADP, and member of the Torolab collective.