Add a `cacheBustingQueryParam` option for a cache busting system

[Rezyan]

Hi,

Introduction

Currently, URLs generated in XML/JSON/HTML contents are static. This implies that if the website caches the files, it is not possible to empty this cache, we have to wait for the expiration. That's why I suggest implementing a cacheBustingQueryParam option: a query paramater added to all URLs that acts as a cache busting system.

The contents that would be affected by this option are the following:

• browserconfig.xml (from response.files)
• manifest.webmanifest (from response.files)
• yandex-browser-manifest.json (from response.files)
• *.html (from response.html)

Current behavior

Input (favicon.js):

favicons(iconFilePath, {
    // Options...
});

Output (metadata.html):

<link rel="icon" type="image/x-icon" href="path/to/favicon/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="path/to/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="path/to/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="path/to/favicon/favicon-48x48.png">
<link rel="manifest" href="path/to/favicon/manifest.webmanifest">
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#1e1e1e">
<meta name="application-name" content="Foo">
<link rel="apple-touch-icon" sizes="57x57" href="path/to/favicon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="path/to/favicon/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="path/to/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="path/to/favicon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="path/to/favicon/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="path/to/favicon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="path/to/favicon/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="path/to/favicon/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="path/to/favicon/apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="path/to/favicon/apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="1024x1024" href="path/to/favicon/apple-touch-icon-1024x1024.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Foo">
<meta name="msapplication-TileColor" content="#1e1e1e">
<meta name="msapplication-TileImage" content="path/to/favicon/mstile-144x144.png">
<meta name="msapplication-config" content="path/to/favicon/browserconfig.xml">
<link rel="yandex-tableau-widget" href="path/to/favicon/yandex-browser-manifest.json">

Requested behavior

Input (favicon.js):

favicons(iconFilePath, {
        // We don't write the question mark at the beginning: it would be better to add it automatically.
    cacheBustingQueryParam: 'v=1',
    // Options...
});

Output (metadata.html):

<link rel="icon" type="image/x-icon" href="path/to/favicon/favicon.ico?v=1">
<link rel="icon" type="image/png" sizes="16x16" href="path/to/favicon/favicon-16x16.png?v=1">
<link rel="icon" type="image/png" sizes="32x32" href="path/to/favicon/favicon-32x32.png?v=1">
<link rel="icon" type="image/png" sizes="48x48" href="path/to/favicon/favicon-48x48.png?v=1">
<link rel="manifest" href="path/to/favicon/manifest.webmanifest?v=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#1e1e1e">
<meta name="application-name" content="Foo">
<link rel="apple-touch-icon" sizes="57x57" href="path/to/favicon/apple-touch-icon-57x57.png?v=1">
<link rel="apple-touch-icon" sizes="60x60" href="path/to/favicon/apple-touch-icon-60x60.png?v=1">
<link rel="apple-touch-icon" sizes="72x72" href="path/to/favicon/apple-touch-icon-72x72.png?v=1">
<link rel="apple-touch-icon" sizes="76x76" href="path/to/favicon/apple-touch-icon-76x76.png?v=1">
<link rel="apple-touch-icon" sizes="114x114" href="path/to/favicon/apple-touch-icon-114x114.png?v=1">
<link rel="apple-touch-icon" sizes="120x120" href="path/to/favicon/apple-touch-icon-120x120.png?v=1">
<link rel="apple-touch-icon" sizes="144x144" href="path/to/favicon/apple-touch-icon-144x144.png?v=1">
<link rel="apple-touch-icon" sizes="152x152" href="path/to/favicon/apple-touch-icon-152x152.png?v=1">
<link rel="apple-touch-icon" sizes="167x167" href="path/to/favicon/apple-touch-icon-167x167.png?v=1">
<link rel="apple-touch-icon" sizes="180x180" href="path/to/favicon/apple-touch-icon-180x180.png?v=1">
<link rel="apple-touch-icon" sizes="1024x1024" href="path/to/favicon/apple-touch-icon-1024x1024.png?v=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Foo">
<meta name="msapplication-TileColor" content="#1e1e1e">
<meta name="msapplication-TileImage" content="path/to/favicon/mstile-144x144.png">
<meta name="msapplication-config" content="path/to/favicon/browserconfig.xml?v=1">
<link rel="yandex-tableau-widget" href="path/to/favicon/yandex-browser-manifest.json?v=1">

Conclusion

I hope this option will suit you, because I think it can be very useful in many cases. Other libraries already use this kind of options, e.g. TinyMCE (see https://www.tiny.cloud/docs/configure/integration-and-setup/#cache_suffix). If ever the Favicons maintainers accept this enhancement, I will offer to develop it myself in a pull request!

[Rezyan]

I've just created a PR: https://github.com/itgalaxy/favicons/pull/420