Extras

Extras


Setup
  1. Add your own logo in the /app folder and name it icon.png.
💡

Not using .png extension? Update components that use icon.png like the Header

  1. Create your site favicon with this free Favicon Generator. Download the zip file and put this 2 files in the /app folder:
  • apple-touch-icon.png (rename it apple-icon.png)
  • favicon.ico

NextJS will automatically reference them in the <head /> of your HTML page. Read more about metadata file convention.

  1. Create a rectangle logo with your name like the one below. Name it logoAndName.png and add it to the /public folder. Next-Auth will automatically add it to your login pages (see /libs/next-auth.js file).


    Description of image

  2. Create two 1200x660 images for social media sharing. Name the first opengraph-image.png and the second twitter-image.png and add them to the /app folder.

NextJS will automatically reference them in the <head /> of your HTML page. Read more about metadata file convention.

Useful ressources

  • If you need a logo, you can use LogoFast
  • If you need analytics, you can use DataFast
  • If you need SVG illustrations, you can use Undraw
  • If you need SVG background patterns, you can use Hero Patterns
  • If you need icons, you can use Heroicons & Lucide
  • If you need SVG blobs, you can use Haikei
  • If you need Tailwind Snippets , you can use Snippets
  • If you need Notion-like icons, you can use Overflow
  • If you need cute SVG doodles, you can use Figma Doodles
Deployment