How to get icons in Safari favorites (aka favicons) to display correctly?

I am using Safari on macOS Sierra. I have added several commonly-used sites to my favorites section, like so:

(there are 10 icons, and all but 2 of them are displayed as the proper, correct icon from the site. For example, the Wikipedia icon has the large W icon. However, for Google Drive and Gmail, the icons are just big, ugly, generic G's)

I would like for the two Google sites to correctly display their icons as well. At first, I thought it was because all 8 of the "correctly displayed" sites had successfully configured their "Safari settings" or something like that, while Google failed to do this (although this doesn't sound too plausible).

However, if I instead go to the top menu in Safari, click Bookmarks > Show Bookmarks, I get the following:

Strangely, this time, the two Google sites do have correctly displayed icons, while it is instead three other sites (out of the 10) that aren't displayed: namely Wikipedia, Amazon, and New York Times.

So it seems that there are two sets of icons, "big" and "small", and for big icons, Google Drive and Gmail are not displayed correctly, while the other 8 are, and on the other hand, for small icons, Google Drive and Gmail are displayed correctly, while Wikipedia, Amazon, and NYTimes are not.

I actually don't care too much about the small icons, but I would really like for all the big icons to display correctly. How can I do that?

#!/bin/zsh
# Fix Safari Favorites Icons

CS="cache_settings"; TIC="Touch Icons Cache"; DIR="$HOME/Library/Safari/$TIC/Images"
DB="$DIR/../${${TIC// }%%s*}${${(C)CS}//_}.db"; SQL=$(sqlite3 "$DB" "SELECT host FROM $CS")
sqlite3 "$DB" "UPDATE $CS SET ${${${(L)TIC// /_}#*_}//s/_is_in}=1, download_status_flags=1"
for png in "$1"/*.png; do URL="$(plutil -convert xml1 -o - "$DIR/../../Bookmarks.plist" | \
awk -F '[</>]' -v name="${${png##*/}%%.*}" '$3~name{getline;getline;getline;print $5}')"; \
cp -f -v "$png" "$DIR/${(U)$(md5 -q -s $URL)}.png"; done; chflags -v uappnd $DIR $DB

From here: https://gist.github.com/dardo82/f7cc7c5c864fb5afa04bb12ecbcf3a9f

The script takes a folder with the missing touch icons as its only argument.

Each favicon needs to have the same name as the bookmark associated with it.

The newly updated gist works with Safari 13 but now if you clear the browser cache the added favicons disappear in the new tab and reappear upon restart!

Here's a hack that works very nicely (it takes a moderate amount of simple image manipulation though. Also, see a note at the very bottom of this answer in order not to completely lose this fix and have to redo it). it seems that the issue is that the the icons given by the websites were designed for the bookmark bar, which has smaller icons, and not the safari favorites screen, which has larger icons (at least 144 x 144).

The icons themselves are stored in ~/Library/Safari/Touch Icons Cache/Images/, with very long names (something like "908F6BBF6DA814ABAF917C4E7BB9E36F.png"). When a new Favorite is added (say New York Times, in the case of the original question), and the icon correctly displays in the Favorites screen, then a 144 x 144 png file appears in the aforementioned Cache folder, and everything's good and spiffy. However, if, say Gmail is added, and a big ugly, non-descript G appears instead of the nice Gmail icon, then that means a tiny png (designed for a bookmark bar instead of favorite screen) appeared in the Cache folder. (alternatively, if not even an incorrect tiny png appears in that folder, simply favorite another "decoy" site that does make a png file appear, perform the following, and then modify the Name and URL of the favorite later).

So in order to correct the icon, simply create another png that has the correct 144 x 144 resolution (see note below), then use that created png to replace the tiny "incorrect" file in the Touch Icons Cache folder, making sure to keep the long filename constant. Exit out of Safari (Command-Q) and restart, and the icon appears perfectly, as so:

Note that Gmail and Google Drive now have the correct icons. I had to do the same thing for The Economist as well, since that site also did not provide a proper 144 x 144 favicon.

For a very simple way of creating a 144 x 144 icon using just Preview, simply download a high-res image of the icon (Gmail, Google Drive), or whatever, open in preview, then tools->adjust size to 144 width. Now put this image aside and call it "image A". Note that transparency sometimes causes trouble for safari favicons (e.g. if a region of a picture is colorless, the color actually displayed in those regions might be inconsistent). If this happens, we can make a white background. To do this, simply do command-shift-4 and drag a rectangular portion of any white portion of the screen, then take the resulting screenshot and resize to 144 x 144. Finally, take "image A" from before, and copy and paste onto this white space. This usually creates a very nice icon.

Important note: If you happen to have the "Developer" menu item (e.g. at the very top of the screen, near "Bookmarks" and "Window") enabled in Safari preferences, make sure not to select "Clear Caches", or else this will delete all the icons you made too. Also, simply Clearing History does the same thing. Alternatively, if you really want to clear history or clear cache for more disk space, save the custom icons you created before you clear; that way you can put them back afterwards without having to create them again.

Caches can also be automatically cleared at times, so it is a good practice to create backups of icons.