How to Add an App Icon to Your Next.js 13 Project

In this video we are going to be learning how to add favicon, icon, and apple-icon to our Next.js 13 project. This is great when trying to save your web app as a bookmark onto your home screen of your mobile device.
📚 Resources
- GitHub Repo: github.com/hqasmei/site-muse
- Next.js Doc (Metadata Files:favicon, icon, and apple-icon): nextjs.org/docs/app/api-refer...
👩‍💻 Let's Connect
- Discord: / discord
- Github: github.com/hqasmei
- Twitter: / hqasmei
- LinkedIn: / hosnaqasmei
⌛ Timestamps
00:00 Intro
00:22 Tutorial
02:42 End

[@maskman4821]

very useful and practical, thank you ❤

[@codernerd7076]

This is great Next.js does it all even icons!

[@MORED3]

thanks for the tutorial

[@mehdijafarzade2381]

💯💯💯💯

[@garamsong8837]

Thank you for the video! I'm wondering what was your icon.png and apple-icon.png sizes?

[@hqasmei]

I used 512px by 512px

[@xiaoyy6084]

Do you really need to copy the link tag to layout? Copying the ico to /app should be enough.

[@hqasmei]

yeah you can do that too

[@nicolasbrandaor]

@@hqasmei Hi! I think you made a mistake, there's no need to include the output code to a head tag in your layout. That's just an example of the generated code Next inserts into your code when the application is built. If you're not generating icons with icon.tsx, all you gotta do is place the images in the root folder. Next will take care of generating the link tags inside the head tag of your build.

[@hqasmei]

@@nicolasbrandaor you are 100% correct Nicolas, thank you!

[@boyywnkobe]

how to add startup image when app is opening