Safari for OS X displaying wrong favicon [duplicate]

I am using Safari 9.0.3 on OS X 10.11.9 and have only recently noticed Safari displaying the wrong favicon for some websites.

In one instance, Safari uses the Facebook icon for Messenger despite the Messenger icon being used in the head section of the page source.

I tried deleting the WebpageIcons.db file from Safari's Library folder, and I have cleared Safari history and website data across all my devices.

The Facebook icon still loads.

Any ideas?

Edit: To clarify, the proper Messenger.com icon appears in the bookmarks menu and the bookmarks editor window. However, the Facebook.com icon is used in the Smart Search Field.

Screenshot of Safari using the wrong favicon:

Facebook's Messenger.com icon:

Solution 1:

You aren't actually looking at the favicon, but rather the Touch Icon. You can find your Touch Icons in ~/Library/Safari/Touch Icons Cache/ and then look in the Images/ folder to find the actual image files.

Your choice here is you can replace the offending image with the one you want and restart Safari to have it load that, or just trash the whole Touch Icons Cache folder entirely.

Solution 2:

There are many complicated rules on what icon file gets displayed in a browser, depending on the combination of "link" HTML tag used and browser/OS version.
The following will help to understand better (in order of preference):
- search for Favicon on Wikipedia
- http://blog.iconfactory.com/2015/11/the-new-favicon/
- http://evotec.pl/mac-os-x-yosemite-missing-favicons-in-safari-8/