Change the brand and the logo
Put your name, logo and colours on a ready project in a few minutes.
- What this is
- How to change the name, logo and colours of a ready-made website project so it looks like yours.
- Who it is for
- Anyone using a ready project or a template.
- What you will get
- A project that shows your name, your logo and your colours.
- Time
- 4 min read
The short answer
If you are new, ask your AI tool to do it with one PromptA prompt is the message you give an AI tool to tell it what you want.. It searches every file for the old name, and by hand it is easy to miss one. Do it by hand only if you want to learn where things live.
Two ways to do it
Way 1: your AI tool does it
You collect four things and give one prompt. The tool changes the name, logo and colours.
- Good for
- Beginners, and projects with many files.
- Not good for
- When you have no AI tool that works on project files yet.
- Collect your new name, your logo file saved as public/logo.svg, your colours (like #B4521C) and your font.
- Copy the prompt below, replace [NAME], [Hex codeA hex code is a short code, like #8a5a2b, that names one exact colour for a screen.] and [FONT], and send it to your AI tool.
- Read the list of files it changed.
Show the prompt
If you cannot see my project files, stop and ask me to open the project, or to paste the files you need. Do not guess what is in them. Replace every [BRACKET] below before you paste (for a colour, a name like dark blue is fine if you do not know the hex code). Rebrand this project. Old name: [OLD NAME]. New name: [NAME]. Logo file is at public/logo.svg. Primary colour [HEX], accent [HEX], font [FONT]. If any value is missing, ask me before you change any file. Update the config, the header, the footer, the page titles, the favicon and the share image. Tell me which images I must make myself (the favicon and the share image) and their sizes. Search for any leftover old name. Do not change layout or features. List every file you changed.
Way 2: you do it by hand
Five small jobs, each in one place in your project.
- Good for
- Learning where the logo, colours and name live.
- Not good for
- Big projects. It is easy to miss a place where the old name hides.
- Logo: put your logo in the folder called public, named logo.svg (best) or logo.png.
- Icon: make a square picture of 512 by 512 RasterA raster picture is made of tiny coloured dots, called pixels, so it blurs if you enlarge it too much. and save it in public. It is the small icon in the browser tab.
- Colours: find the colours file (tailwind.config, globals.css or brand.ts) and replace the values with yours.
- Name: change the brand name in the config file, then search the whole project for the old name.
- Check: open the site at phone width. You should see your name, logo and colours everywhere.
Was this clear?
Still not clear?