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

LarsFlieger commented 1 month ago

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.

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 commented 1 month ago

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 commented 1 month ago

@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 commented 1 month ago

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

LarsFlieger commented 4 weeks ago

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.

RealFaviconGenerator / realfavicongenerator