How to use custom/emoji favicon
Unanswered
Chausie posted this in #help-forum
ChausieOP
I'm trying to use a custom favicon; I've done this before by changing _app.tsx, but this isn't working in the most recent version of next.
So, I tried to create a dynamic icon file (icon.tsx):
This doesn't work either.
Is there no way for me to declare my own icon?
So, I tried to create a dynamic icon file (icon.tsx):
export default function Icon() {
return (
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎤</text></svg>"
/>
);
}This doesn't work either.
Is there no way for me to declare my own icon?
5 Replies
@Chausie I'm trying to use a custom favicon; I've done this before by changing _app.tsx, but this isn't working in the most recent version of next.
So, I tried to create a dynamic icon file (icon.tsx):
tsx
export default function Icon() {
return (
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎤</text></svg>"
/>
);
}
This doesn't work either.
Is there no way for me to declare my own icon?
try this
https://nextjs.org/docs/app/api-reference/functions/generate-metadata#icons
export const metadata: Metadata = {
icons: {
icon: "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎤</text></svg>",
},
}https://nextjs.org/docs/app/api-reference/functions/generate-metadata#icons
ChausieOP
It's still complaining:
Module not found: Can't resolve '/src/app/icon.tsx?next_metadata'
Module not found: Can't resolve '/src/app/icon.tsx?next_metadata'
removing
(of course this icon.tsx is no longer necessary, delete it)
.next should resolve the issue(of course this icon.tsx is no longer necessary, delete it)
remove
.next and start the dev server againChausieOP
that works! Thanks!