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

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.