Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature Request: Support Next.js App Router File Conventions for Favicons #509

Open
LarsFlieger opened this issue Oct 29, 2024 · 7 comments
Open

Feature Request: Support Next.js App Router File Conventions for Favicons #509

LarsFlieger opened this issue Oct 29, 2024 · 7 comments

Comments

@LarsFlieger
Copy link

Description

With the introduction of the new App Router in Next.js (since version 13), Next.js has adopted a convention where placing files with specific names directly into the app directory allows the framework to automatically include the correct HTML code for favicons and metadata. This simplifies the process by eliminating the need to manually insert HTML tags for favicons.

Currently, RealFaviconGenerator does not support this convention.

image

It generates favicon files and accompanying HTML code that don't align with Next.js's new file naming requirements, making it less seamless for developers using the latest Next.js versions.

Problem

  • Incompatibility with Next.js App Router: The tool generates files and HTML snippets that require manual insertion into the <head> tag, which is not necessary with Next.js's new approach.
  • File Naming Mismatch: The generated favicon files do not match the specific file names that Next.js expects for automatic inclusion.

Expected Behavior

  • The tool should provide an option to generate favicon files with the exact names required by Next.js's App Router.
  • It should eliminate the need for manual HTML code insertion by adhering to Next.js's file conventions.
  • Developers should be able to directly place these files into their app directory and have Next.js automatically handle them.

Actual Behavior

  • RealFaviconGenerator generates files with default names and provides HTML code that users are instructed to insert manually.
  • This process does not align with Next.js's automated approach, leading to extra steps for developers to rename files and adjust their setup.

Proposed Solution

  • Add Next.js Support: Introduce an option or preset in RealFaviconGenerator specifically for Next.js App Router projects.
  • Correct File Naming: Adjust the generated file names to match those expected by Next.js (e.g., favicon.ico, icon.png, apple-touch-icon.png).
  • Update Instructions: Provide guidance on where to place these files within the Next.js app directory to leverage automatic inclusion.

References

Additional Context

Supporting Next.js's new conventions would greatly enhance the developer experience for those using RealFaviconGenerator in conjunction with Next.js. It would streamline the favicon setup process and ensure compatibility with modern web development practices.

Thank you for considering this feature request!
@phbernard
Copy link
Contributor

Thank you Lars for the detailed request! I'm a Next.js dev myself, and the new version of RealFavicon is a Next.js app btw.

Why it is done this way

Currently RealFavicon doesn't follow Next favicon conventions for two reasons:

Partial favicon file support

Although Next supports many favicon-related conventions, it doesn't support all files created by RealFavicon: icons referenced by the web manifest are not covered. Therefore, they cannot be placed into the app dir. They must be somewhere in public.

If RealFavicon was to use Next conventions, the instructions would tell to put "most" files in app and "those other files" in public. This is not convenient.

Control over HTML markups

Markups created by RealFavicon are tested and the results are published. What about the markups generated by Next? Do they work? Are they similar to the ones generated by RealFavicon? Are they consistent from Next 14 to 15? What'll happen in Next 16? What is their order? (the order used to matter years ago when Firefox didn't take the size attribute of PNG favicon into account)

The promise of RealFavicon is to give you icons and code that work. Relying on Next conventions would make you walk the last few steps alone, without this guarantee.

Other considerations

Conventions are useful... when you don't use RealFavicon

Next conventions are helpful when you craft your icons manually: at least, you don't have to type those boring markups thanks to Next. But with RealFavicon, the HTML is not an issue either because it is computed for you.

Conventions matter

I don't want to dismiss Next conventions too quickly. When a new dev works on an existing app, he may wonder where the favicon assets are ("why are they not in the app dir?"), etc.

And, again, as a Next dev myself, I would like to follow these conventions just for the sake of sticking to the rules.

Conclusion

RealFavicon instructions for Next.js are what they are because they are pragmatic. They are easy to follow, and your favicon will work as expected.

Yet, I would be glad to reconsider if there was a way to work around the issues above.

@LarsFlieger
Copy link
Author

@phbernard Thanks for your comments! I totally understand your perspective.

However, since many developers use these file conventions, could we consider adding this feature as an optional extension? It wouldn’t alter the core tool but would provide an “include app directory files” option, supporting those following Next.js file structures. This way, the tool stays consistent but also supports Next.js users. Right now, many end up renaming files manually, which could be simplified with this extra feature.

@phbernard
Copy link
Contributor

Support both ways? Yep, that could work! Thank you @LarsFlieger for the proposal.

@LarsFlieger
Copy link
Author

Support both ways? Yep, that could work! Thank you @LarsFlieger for the proposal.

Yes, exactly. We could also integrate a link to RealFaviconGenerator in the Next.js docs to help others create favicons more efficiently.

@phbernard
Copy link
Contributor

image

😁

Several people asked me for this feature. Sometimes you just need to listen to your users 😅

In your last comment you mentioned that "we could also integrate a link to RealFaviconGenerator in the Next.js docs". Any idea of how it could happen? Do you know someone at Vercel?

@LarsFlieger
Copy link
Author

image

😁

Several people asked me for this feature. Sometimes you just need to listen to your users 😅

In your last comment you mentioned that "we could also integrate a link to RealFaviconGenerator in the Next.js docs". Any idea of how it could happen? Do you know someone at Vercel?

Nice work!

Unfortunately, I don't, but I can create a suggestion in the form of an issue in their repo or even submit a PR with that change. I think this is super useful and would help many Next.js apps create good favicons/SEO files for their projects.

@LarsFlieger
Copy link
Author

@phbernard One thing, there is a bug:

Unfortunately, it's not possible to differentiate files by their format. If you do it this way, only one of them gets inserted into the HTML.

  • icon.svg
  • icon.png

Result:

<link rel="icon" href="/icon.png?fbdb9a3e2885e9bf" type="image/png" sizes="96x96">
<!-- svg is missing :/ -->

It has to be:

  • icon.svg
  • icon1.png

or as the docs suggested:

  • icon1.svg
  • icon2.png

Result:

<link rel="icon" href="/icon1.svg?95677549cd7c5972" type="image/svg+xml" sizes="any">
<link rel="icon" href="/icon2.png?fbdb9a3e2885e9bf" type="image/png" sizes="96x96">

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@phbernard @LarsFlieger