Practical Guide to Website Favicon Deployment: Files, Declarations and Cache Refreshing

A standard favicon package contains 5 types of files, which adapt to different devices and browsers. The ICO format favicon.ico is a traditional format, mostly in sizes 16×16, 32×32, and 48×48. Placing it in the website root directory allows automatic recognition by older versions of IE.

Multi-size icons in PNG format are used for modern browsers and mobile devices, with common sizes including 16×16, 32×32, and 180×180. The apple-touch-icon is designed specifically for iOS Safari, to display a clear icon when users add the website to their home screen. The Web manifest file provides icon configuration for PWA applications, adapting to the scenario of adding to the home screen on Android systems.

The declaration order follows the backward compatibility rule: declare high-priority modern formats first, then fall back to traditional formats. The specific order is: declare the 32×32 PNG format icon first, then the apple-touch-icon, and finally the ICO format favicon.

All link tags need to have the correct rel attribute and size attribute. PNG icons require the sizes attribute to mark the corresponding size. The apple-touch-icon defaults to 180×180, so extra size marking can be omitted. The manifest file needs the rel="manifest" attribute pointing to the corresponding file path.

When using App Router in Next.js 13+, you need to place favicon.ico at the root level of the app directory, and Next.js will automatically handle route output. Multi-size PNGs, apple-touch-icon, and the manifest file can be placed in the app/public directory, and referenced with an absolute root path. If using Pages Router, you can place all files in the public root directory directly.

When deploying a favicon for a custom WordPress theme, you can place all favicon files in the assets subfolder of the theme directory, or upload them directly to the website root directory, then add the corresponding link tag declarations through the theme's functions.php file. Some WordPress versions support uploading favicons through the Appearance → Customize menu in the admin backend, and the system will automatically generate the declarations and paths.

Browsers implement long-term strong caching for website favicons, with most desktop browsers having a cache period of more than 7 days. After modifying the favicon, simply refreshing the page will not trigger the browser to re-request the new file, which causes the old icon to continue displaying.

The most reliable update method is to add a version query parameter to the favicon resource URL. For example, change href="/favicon.ico" to href="/favicon.ico?v=2". After the parameter changes, the browser treats it as a new resource and directly requests the latest file, bypassing the original cache. You can also clear the browser cache and revisit the page, but this method is only suitable for local debugging by developers, and cannot affect the cache of end users.

After deployment, you need to verify the icon display status in multiple scenarios to confirm the adaptation effect one by one. First verify the icon display in the desktop browser tab, and check whether the 16×16 and 32×32 sizes are clear. Second verify the icon display in the browser bookmark bar, and confirm that the size adaptation is correct.

Mobile devices require verification of two scenarios: icon display after adding the website to the home screen in iOS Safari, and icon display after adding an Android PWA to the home screen. Finally, check the website source code to confirm that all link tag paths are correct, and that there are no 404 errors caused by incorrect relative paths. You can use the network panel in the browser developer tools to confirm that all icon files return a 200 status code.