Module 2 · Your brand

Logo and favicon

Have Claude draw a simple SVG wordmark and icon, know when to hire a designer instead, and export the sizes you need.

7 min

You need two marks. A wordmark is your name set in a font, maybe with a small detail. An icon is a square mark that still reads at 16 pixels wide, used for the browser tab (the favicon) and profile pictures. A text based logo is completely fine. Most small businesses never need more.

Every template has two places for these. src/app/icon.svg is the favicon. src/components/Logo.js is the mark in the header and footer, and it uses color token classes like fill-accent so it follows light and dark mode on its own.

This lesson is part of the course

Get every lesson, every screen and every prompt, plus the Build Kit.

Already bought it? Sign in with the email you paid with.