Skip to content

Extras

🧩 Extras

Setup

  • Add your own logo inside the /app folder and name it icon.png.

  • Not using the .png extension? Update any components using icon.png, like the Header component.

🧠 Creating Icons

  • Generate your site favicon using the free Favicon Generator. After downloading the zip file, add the following two files to the /app folder:

  • apple-touch-icon.png → rename to apple-icon.png

  • favicon.ico

🧠 Next.js will automatically include these in the <head /> tag of your HTML page. 📚 Learn more about metadata file conventions.

🖼️ Logo and Name

  • Create a rectangle logo that includes your name, similar to the example image below.
  • Name it logoAndName.png and place it in the /public folder. 🔐 It will be used automatically on login pages by NextAuth (see the /libs/next-auth.js file).

📸 Social Media Sharing Images

  • Create two images sized 1200×660 for social sharing:

  • opengraph-image.png

  • twitter-image.png

  • Add them to the /app folder. 🔁 Next.js will automatically reference them in the <head />.