Downloading and Caching Favicons and Hero Images

Favicons and Hero Images

Favicons and hero images are downloaded and displayed in many places throughout the app, for example:

• homepage top sites tiles
• homepage bookmarks and thought-provoking stories
• each inactive tab row in the tab tray
• each website row on the bookmarks and history screens

Also refer to How do Top Sites (Shortcuts) Work? for a rundown of the logic governing the top site tiles on the homepage.

General Logic Flow

Terms

• siteURL: The website assigned to a tile, bookmark, or history item
• faviconURL: The URL of the website's favicon (preferably high quality, such as an apple-touch-icon, since the default /favicon.ico on websites is low quality). This is also sometimes called the resourceURL in the code, referring to a generalized image path for both favicons and hero images associated with a siteURL
• URL Cache: The cache which stores a faviconURL for a website.
• Image Cache: The cache which stores downloaded favicon UIImages. We are using a library called Kingfisher to cache our images.

Cache Keys

The URL Cache and Image Cache both generally use keys prefixed by the short domain of the siteURL (e.g. "google" for any https://google.com/.../.../... links). This prevents duplicated requests to scrape the same favicon URL and download the same image when a user visits multiple pages of the same website.

More rarely, favicon URLs and images are keyed by the full faviconURL path. For example, with DefaultSuggestedSites, the pinned Google tile, and sponsored top sites. This can only happen when a SiteImageModel is passed a faviconURL at initialization time, which then bypasses the requirement to obtain a faviconURL either from the URL Cache or scraping the associated siteURL.

Process of obtaining and caching a favicon URL and image

This is the general process for obtaining a favicon image for the FaviconImageView once it is assigned a website URL (siteURL). Note that obtaining a hero image is very similar.

• Check the URL Cache to see if a faviconURL exists for this siteURL
  • If no faviconURL exists in the cache, attempt to scrape the siteURL webpage for a high-quality faviconURL
    • Fallback: If no faviconURL is found, return siteURL with /favicon.ico appended (the default path to a low-quality favicon .ico)
  • Save the new faviconURL in the URL Cache
• Check the Image Cache to see if a favicon image exists for the associated siteURL
  • If no image exists in the cache, attempt to download the image from the network
    • Fallback: If no image is obtained, generate a letter favicon based on the siteURL's root domain (e.g. "G" for "https://www.google.com")
  • Save the new image (or letter favicon) in the Image Cache

Process Visualization

Obtaining faviconURLs from webpages the user has loaded

In progress.

Architectural Breakdown

This diagram visualizes the classes, protocols, and methods currently involved in a favicon image request (as of August 2024).