Fix Safari FavIcons

safari-favicons.sh

#!/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*

I suppose those are stock icons, use custom icons. 🧑‍💻

Ok I did not explain It properly sorry. All the icons are custom ones. The stock ones (generated by Safari using favicon) are different so I can see it actually "works". I mean the script replaces the cache and it is displayed here (as seen on the screenshot). Though for some reasons, and only for some apps (not always the same btw), the icons do not fit the whole space, showing borders. I tried with different icons sizes, including huge ones. It happened after the last update, Safari was not part of the changelog though

What was wrong with the stock icons then?

For some websites: Not pretty
For some websites: Unknown (no favicon or something, the icon is just not found)
For some websites: Found but not fullscreen or other problems (which is kinda the same issue as "Not pretty")
I'm almost replacing all icons. Most work, some don't (or not as expected)

So what about YouTube and NetFlix?

As I'm replacing most icons so everything looks good, I'm replacing those too. I found images cropped those properly, and ran the script again. Those two fail to show properly which is not the case of every icons. But sometimes I rerun the script and they do show properly, only, other icons don't.. For example today, YouTube fills the whole icon, yeay (but Netflix don't ..)

So it's seemingly random behaviour?

Sometimes the icon will displa with a lower size, leaving borders. I could not understand why . See Netflix on the attached picture. Any one got any chance in solving this ?

Within ~/Library/Safari/Touch Icons Cache/TouchIconCacheSettings.db the column transparency_analysis_result seems to change how the image is displayed.
I've found changing it to 1 can remove the border spacing.
It initially seems to cause an issue where adding/renaming/removing bookmarks in Safari, however this seems to fix itself after a few minutes. It's possibly to do with the hashing changing on file verification.

Thanks for the interesting tidbits.

Funky thread! I landed here while investigating why the SVG favicon I added to a website I'm working on doesn't show on mobile Safari but it shows correctly on Safari Desktop. I still couldn't figure it out but while reading through these posts I gladly concluded I am not the only person completely crazy about how my icons look on the screen. And I'm not just talking about favicons. I have my own app dock icons as well. If a software update changes the icons to a white rectangled version (the current trend) I replace it with my own (a freeform icon) and clear the cache. :)

What site is it?

What site is it?

https://lifeline-qobalt-y5enyaceaq-nw.a.run.app/

It works on Android.

That's good to know, thanks.