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
2. Create your site favicon with this free
Favicon Generator . Download the zip file and put this 2 files in the
/app folder
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.png and add it to the /public folder.
ShipFastCheap
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
1.If you need a logo, you can use
LogoFast2.If you need SVG illustrations, you can use
Undraw3.If you need SVG background patterns, you can use
HeroPatterns4.f you need icons, you can use
Heroicons5.If you need SVG blobs, you can use
Haikei6.If you need Tailwind Snippets , you can use
7.If you need Notion-like icons, you can use
Snippets1.If you need cute SVG doodles, you can use
Figma Doodles