Safari iOS 12 Favicon Rendering in Browser Tabs

With the release of iOS 12, Apple introduced native favicon support in Safari tabs, addressing a long-standing request from users transitioning between desktop and mobile browsing. This article outlines how iOS 12 manages favicon rendering, how the feature is enabled, device-specific display behaviors, and how Safari parses site assets to present clear, recognizable icons in browser tabs.

Default State and Activation

In iOS 12, favicon rendering is turned off by default. To render icons inside tabs, users must manually toggle the setting within the operating system preferences:

  1. Open the Settings app on the iOS device.
  2. Scroll down and select Safari.
  3. Under the General section, toggle on Show Icons in Tabs.

Once enabled, Safari immediately begins fetching, caching, and displaying favicons across all open sessions.

Device-Specific Rendering Behavior

The visual implementation of favicons in iOS 12 depends on the device form factor and screen orientation:

  • iPad: Favicons appear directly on the persistent tab bar above the address field, positioned immediately to the left of the website’s page title. This layout mirrors desktop Safari on macOS Mojave, allowing quick identification of multiple open tabs.
  • iPhone (Portrait): Because vertical space is limited and individual tabs do not fit into a standard top tab bar, favicons are rendered within the tab switcher interface. When a user taps the tab overview button, the favicon appears alongside the page title in the title bar of each floating tab card.
  • iPhone (Landscape): On larger iPhone models (such as Plus and Max models) that support a desktop-style tab bar in landscape orientation, favicons appear inline next to tab titles, just as they do on the iPad.

How Safari Resolves and Renders Favicon Assets

Safari in iOS 12 adheres to standard web specifications to locate and draw icons, parsing the HTML <head> markup in a specific order of preference:

  1. Standard Link Tags: Safari scans for <link rel="icon"> and <link rel="shortcut icon"> elements specifying modern formats such as PNG or SVG.
  2. Apple Touch Icons: If high-resolution touch icons are declared (e.g., <link rel="apple-touch-icon">), Safari may utilize them to render sharp, high-density assets suitable for Retina displays.
  3. Root Fallback: If no icon tags are declared in the markup, Safari attempts to fetch the traditional /favicon.ico file from the website's root directory.
  4. Generic Fallback: When a site provides no valid icon or the resource fails to load, Safari renders a neutral placeholder graphic (typically a minimalist globe icon or an initial) to maintain layout consistency.

Caching and Performance

To avoid slowing down browsing sessions, Safari downloads and stores favicons in a local cache. Tab icons render asynchronously, meaning the browser displays the page title first and fills in the favicon once the asset has loaded and decoded. This prevents network latency associated with icon retrieval from blocking page rendering.