Content
Create and update images & icons as described. Beware that Next.js in local development will not directly exchange images when you have changed them. You might need to restart your development server to see the new images - sometimes even deleting the .next folder and re-running npm run dev.
Logos:
public/logos/logo_for_dark.png(Your logo, displayed when dark mode is active)public/logos/logo_for_light.png(Your logo, displayed when light mode is active)
Icons:
public/icons/icon-512.png(Your icon in 512x512)public/icons/icon-128.png(Your icon in 128x128)app/apple-icon.png(Your icon in 190x190)public/favicon.ico&&app/icon.ico(same file: .ico version of your icon in 48x48)
Recommendation: I am using Adobe Illustrator to design my SVG logos, go to SvgToPng to convert them to a PNG and then use Favicon.io to create the other needed icon files. Just stick to the current naming convention - and not to the one Favicon.io provides.
OpenGraph Images:
public/img/og_1080x1080.png(Image for Social Media in format 1080x1080)public/img/og_1200x630.png(Image for Social Media in format 1200x630)public/img/og_1600x900.png(Image for Social Media in format 1600x900)
Recommendation: I am using Adobe Express or Canva to quickly create secondary images like these.
Other Images:
public/img/placeholder.jpg(Image used for backup when no other image is provided. You can also take the provided one.)
Color Scheme:
To change the main color (red per default), head over to ui.shadcn.com, pick a color, click "copy code" and paste it into the app/globals.css replacing the current @layer base {}