Closed Neel-07 closed 1 year ago
We prefer just one commit if you wanted to squash all those :)
also if you click "deploy preview" in the build section you will be able to see you live changes and I don't actually see the favicon there...
Also we use image kit to how our images so you should just be able to link to it and not download it
The link for the favicon is in the ticket :)
@MandyMeindersma I didn't know where things went wrong, but I'm determined to figure it out. I'll do my best to solve this, and I appreciate your patience and support along the way. Thank you for being understanding!" Once i figure out i will squash all the commits made into one.
No worries! If you have any questions, let me know :) or if you need a push in a right direction :)
@MandyMeindersma , I think i am making changes to the wrong files can you guide me in this. I’ve been working on adding a favicon to our Vue.js application and I’ve run into some confusion. I understand that in a typical Vue.js project created with Vue CLI, the favicon should be specified in the public/index.html file. However, I couldn’t find an index.html file in our public directory.
I’m wondering if we’re using a setup where the HTML file is generated dynamically, possibly with a tool like vue-router. Could you please confirm if this is the case? And if so, could you provide some guidance on how we’re handling the generation of the main HTML file?
Any help would be greatly appreciated. Thank you!
@MandyMeindersma , I think i am making changes to the wrong files can you guide me in this. I’ve been working on adding a favicon to our Vue.js application and I’ve run into some confusion. I understand that in a typical Vue.js project created with Vue CLI, the favicon should be specified in the public/index.html file. However, I couldn’t find an index.html file in our public directory.
I’m wondering if we’re using a setup where the HTML file is generated dynamically, possibly with a tool like vue-router. Could you please confirm if this is the case? And if so, could you provide some guidance on how we’re handling the generation of the main HTML file?
Any help would be greatly appreciated. Thank you!
@Neel-07 you probably want to look into adding this in the nuxt.config.js
file rather than adding a link to every page. Add a link to the head.link
array for it to show on every page.
On a general note, favicons can be tricky. Browsers can be picky about the format and sizes, if we want consistent results we would need to serve several sizes
@DerrykBoyd made the changes in the nuxt.config.js file then also the favicon is not shown int the deploy preview. Can you help me out.
@Neel-07 I pushed some changes to this to your branch. The favicon should be working now. I noticed in the nuxt.config
you were doing something like this
link: [{ rel: "icon", type: "image/x-icon", href: "http://...imagekit..." }]
That didn't work for a few reasons:
type
of "image/x-icon" will only work for a .ico
file, when linking to images you want to use the type "image/png" You can review my changes, but here are the steps I took
public
foldernuxt.config.js
fileThe deploy preview now correctly shows the favicon. So I will go ahead and merge this in.
Thank you so much for taking this on!
@DerrykBoyd yes you were right i overlooked the the type of "image/x-icon" while adding the imagekit link that's my mistake, but can you explain me like before that i was adding the favicon present in the repo from the static folder, then also the favicon was not visible when checking the deploy preview. If you can explain a bit further it will be helpful for me to understand were was the issue.
@DerrykBoyd yes you were right i overlooked the the type of "image/x-icon" while adding the imagekit link that's my mistake, but can you explain me like before that i was adding the favicon present in the repo from the static folder, then also the favicon was not visible when checking the deploy preview. If you can explain a bit further it will be helpful for me to understand were was the issue.
Right, so files served at the server root need to go in the public
directory, not in the static
directory. See https://nuxt.com/docs/guide/directory-structure/public
That changed when we upgraded to Nuxt3, and I guess that was missed as part of the upgrade. That's probably when we lost our favicon. I will probably open an issue to remove the static
directory since I don't think it's needed anymore
oh okay, thanks @DerrykBoyd for explaining me and making me understand.
What issue is this referencing?
fixers issue #260
Does the following command run without warnings or errors?
npm run pr-checks
Have you taken a look at our contributing guidelines?
My node version matches the one suggested when running
nvm use
?