how to change the icon image in the of my website in the top of the browser
Unanswered
Z3FRAN posted this in #help-forum
Z3FRANOP
im using nextjs app routing
can you please help me ?
can you please help me ?
15 Replies
Pharaoh Hound
look for wherever the favicon is being rendered. In pages directory it'll be in _document.tsx:
<link
rel="shortcut icon"
href="/favicon.ico" />
<link
rel="shortcut icon"
href="/favicon.ico" />
There is also a chance that he once used T3 and with browser caching favicons heavily...
for metadata/image in appdir, you can use one of the many ways listed here: https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons
@Z3FRAN did you end up getting something to work?
Cape lion
hello @Z3FRAN, if you are using the app routing what you have to do it is just to transform you the image you want to put in the top of the browser to a favicon.ico and replace the one that is there by the one you just created!
@Cape lion hello <@413036837993578506>, if you are using the app routing what you have to do it is just to transform you the image you want to put in the top of the browser to a ***favicon.ico*** and replace the one that is there by the one you just created!
Cape lion
that is to say that if what you want to put is just png, jpg etc...! just rename it to favicon.ico!
NB: don't forget to rename the extension
NB: don't forget to rename the extension
pls don't recommend changing a file's extension without actually converting it just to make it show up as that path
also, if you do make it a favicon.ico, the link i provided will show that you can put it in the
app folder and it will auto add it as that path and will add it to the head for all pages@riský pls don't recommend changing a file's extension without actually converting it just to make it show up as that path
Cape lion
ok if you say so you might have your raison!
it is just a easy way to break things that are expecting it to be an actual ico but it isn't (just because most browsers don't care about extensions and use the file metadata, doesn't mean you should rely on it)
@riský also, if you do make it a favicon.ico, the link i provided will show that you can put it in the `app` folder and it will auto add it as that path and will add it to the head for all pages
Cape lion
yeah actually but I thought that is what he ask!
@riský it is just a easy way to break things that are expecting it to be an actual ico but it isn't (just because most browsers don't care about extensions and use the file metadata, doesn't mean you should rely on it)
Cape lion
but with the app directory it is automatically recognized
doesn't mean you should scam the file extension (you can just do icon.png) - it won't make it a ico, but it would set it in the head to use