Since macOS BigSur, Apple gave users a certian degree of customisation on Safari's homescreen. However, it is not unusual to see Safari not rendering favicon correctly, leaving ugly grey squares. This issue is well known, and related with the fact that sites have to provide special "Apple Touch Icon" images (which is the equivalent of a generic favicon), compliant to some Apple guidelines. Favtool allows you to quickly and easily customize favicons, by just dropping in your custom icons.
☕️ Take in mind that Favtool is a free-to-use software, developed by a single person, who spent month trobleshooting lines of code, trying to provide regular updates and listening to user hints. So, enjoy Favtool, leave a nice comment and if you can, contribute with a small donation!
You can contribute by clicking the "donate" button on the app 🙏🏻
Get the source, and double clik on the .dmg file. Here you will find the application itself or the pre compiled (raccomanded) last release. Please, if a pre-release is available, download it only if you are committed to contribute, those are not stable and for beta testing only.
Whenever Favtool is run for the first time, the message "Apple can’t check app for malicious software" might be shown. In order to run favtool ctrl-click the app and select "Open".
Of course Favtool does not contain any malicious software, this is just a very bad way for Apple to commit developer into buying a 99$/y developer subscription, no words.
Favtool needs to access the foldeer containing the icons and a database containg your favourite list. Therefore, during the first run Favtool will ask you to access the folder located in ~/Library/Safari/Touch Icons Cache. Select "Grant Access" a finder panel will show up, select "Authorize".: this will allow favtool to read/write the folder in which the icons are located. Once the access in granted the list on the sidebar will be populated by your favourite sites.
💡If you get the message "table not ready" close safari, and reopen it whit no tab open other than the "home page" ( topsites:// ), then click on "try again"
~/Library/Safari/Touch Icons Cache. This prevents Safari from automatically restoring the default icons. If you want to unlock this folder click on "File" in the menu bar and then "Unlock Images Folder" (or use the ⌘U shortcut. However, make sure to keep Safari closed as long as the folder is unlocked, otherwise icons may be restored).
Congratulations! You are now ready to customize your Icons.
💡 Your site list might contain many sites, even sites you don't have in your home page. Safari saves data even for sites you've visited once, to clean it up chech the Manage site list below this will make your life easier. However, before doing it, close safari and reopen it with no tabs open other than the "home page" ( topsites:// )
💡For suggestions about where to find custom icons or how to create icons check the section icon suggestion below.
It is as simple as selecting the corrisponding site and dropping the icon you prefear. You can now customize another icon or restart Safari to apply changes. Icons have to be .png files, about 180x180px (icons under this size may not work), they can be transparent.
The site list might be very long and you might see sites twice or sites you don't even know. This is because Safari saves datas and touch icons even of sites you've visited once. To clean Safari's database and the list you can click on the round arrow above the sidebar. Wait a few seconds and restart Favtool. The list will clean the site list on the sidebar.
If you want to delete a single site, you can select it and click the "trash" button above.
Other than the icon itself you can choose the stile used by safari to render the icon itself. the choices are "Big, transparent", "Small, glass". "big glass"
- "Big, transparent" indicated for solid or gradient background icons
- "Small, glass" applyes for transparent background icons, if applied on a solid background image, a padding around the immagine will appear.
- "Big, glass" usually applyes for transparent background icons, but the icon will result bigger it is less common than the small variant, but still is provided by safari an therefor is in this list.
Other stile are apparently used by safari, but strangely they seem to have no effect on the icon, the site using those stile will display the generic "select" prompt.
This option allows you to delete any change you've done on icons. To do this, go to Edit > Reset default icons or use the keyboard shortcut ⌘⌥D . The whole Touch Icons Cache folder will be deleted, and recreated as soon as Safari is opened. Safari will reload all the icons from scratch. This option might fix missing icons. The Touch Icons folder wil be automatically unlocked.
You can download icons for free in many sites, these are the one I often use:
- https://icons8.com - A very big library with many styles
- https://macosicons.com - Many styles with more of an app /program focus
- https://www.macosicongallery.com - Original Mac icons
Icons have to be .png files, about 144x144p (Safari seems to be quite flexible, however, make sure to not overshoot 256x256p), they can be transparent.
You can even make them by yourself! Get started by taking a look at the Apple User Interface Guidelines.