Suggestions for favicon configuration

[nix6839]

What version of starlight are you using?

0.12.0

What is your idea?

Suggestions for favicon settings

Why is this feature necessary?

Currently, favicon configuration can be done in two ways: using the favicon setting and head setting. It works as follows:

• If the favicon setting is not configured, it defaults to /favicon.svg.
  • If both are not set or only favicon is used, then only the favicon setting is applied.
  • If only head is set or both are used, the favicon setting's <link> tag is inserted below the head setting's <link> tag and applied together.

Current Issues

1. There is no way to disable the default favicon setting.
2. The <link> tag inserted by the favicon setting uses the non-conforming shortcut attribute. This seems to be to differentiate between favicon and head settings.

   Note: The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.
   -- https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel#icon

3. There are cases where query parameters are used for purposes like cache invalidation, but the current favicon setting does not support this.
4. Having two methods for favicon configuration can be confusing.
5. Configuring favicons through the head setting requires more code than using the favicon setting.

Proposed suggestions

I have three suggestions, with the first being highly recommended.

First Suggestion (Strongly Recommended)

Remove the favicon setting and provide a function for favicon configuration. Users would use this function to add favicons to the head setting, for example:

console.log(favicon({ href: './images/favicon.svg' }));
// {
//   tag: 'link',
//   attrs: { rel: 'icon', href: '/images/favicon.svg', type: 'image/svg+xml' }
// }
console.log(favicon({ href: './images/favicon.ico?v2', sizes: '32x32' }));
// {
//   tag: 'link',
//   attrs: { rel: 'icon', href: '/images/favicon.ico?v2', sizes: '32x32' }
// }

This suggestion neatly resolves all the issues and simplifies the codebase:

1. Users can choose not to use the default favicon. (Solves the first issue )
2. There's no need to differentiate between favicon and head settings, so shortcut is unnecessary. (Solves the second issue)
3. The function exposed allows for query parameters. (Solves the third issue)
4. Have a single approach for favicon configuration. (Solves the fourth issue)
5. By providing a function, users can write less code. (Solves the fifth issue)

However, this change could be a 'breaking change' that affects existing users.

Second Suggestion

• Allow the favicon setting's default to be deleted or to accept null.
• Use a data-* attribute instead of shortcut to differentiate between the favicon and head settings.
• Allow query parameters in the favicon setting.

This suggestion is more complex compared to the first suggestion and still does not solve the fourth and fifth issues.
Moreover, to me, shortcut and data-* feel like the same kind of noise.

Third Suggestion

In addition to the second suggestion, the favicon setting accepts an array to allow for different favicon configurations.
This addresses the fifth issue but leaves the other problems unresolved, and it increases complexity even more compared to the second suggestion.

---

I would like to hear your thoughts. If you agree, I will submit a PR for the suggestion.

Do you have examples of this feature in other projects?

No response

Participation

• I am willing to submit a pull request for this feature.