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
.
- Dark Mode Logo:
public/assets/logos/logo_for_dark.png
- Light Mode Logo:
public/assets/logos/logo_for_light.png
- 512x512 Icon:
public/assets/icons/icon-512.png
- 128x128 Icon:
public/assets/icons/icon-128.png
- Apple Icon (190x190):
app/apple-icon.png
- Favicon (48x48):
public/favicon.ico
andapp/icon.ico
Recommendation:
Use tools like SvgToPng to convert SVGs to PNGs and Favicon.io to generate other icon sizes. Keep the provided naming conventions.
- 1080x1080:
public/assets/img/og_1080x1080.png
- 1200x630:
public/assets/img/og_1200x630.png
- 1600x900:
public/assets/img/og_1600x900.png
- Placeholder:
public/assets/img/placeholder.jpg
(This image is used as a fallback when no other image is provided.)
To update the primary color (default is red):
- Visit ui.shadcn.com and select a new color.
- Copy the generated code.
- Replace the corresponding keys in
app/globals.css
within the@layer base {}
block. - Note: Only replace the keys provided by shadcn; the default configuration may include additional colors.