Extras
Setup
- Add your own logo in the
/appfolder and name iticon.png.Not using .png extension? Update components that use icon.png like theHeader - Create your site favicon with this free Favicon Generator. Download the zip file and put this 2 files in the
/appfolder:apple-touch-icon.png(rename itapple-icon.png)favicon.ico
NextJS will automatically reference them in the<head />of your HTML page. Read more about metadata file convention. - Create a rectangle logo with your name like the one below. Name it
logoAndName.pngand add it to the/publicfolder. Next-Auth will automatically add it to your login pages (see/libs/next-auth.jsfile).
- Create two 1200x660 images for social media sharing. Name the first
opengraph-image.pngand the secondtwitter-image.pngand add them to the/appfolder.
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 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