Images, Favicons & Polish

Your site works. It looks decent. Now we're going to make it look professional. This is where we add real images, get a favicon, and do the final polish.

Optimizing Images

Don't upload giant images straight from your phone. A 4MB photo makes your site slow. Here's the rule:

• Photos: Use .jpg format. Keep each under 500KB.
• Logos and icons: Use .png or .svg.
• Dimensions: Hero images — 1600px wide. Thumbnails — 400px.

Compress for free at TinyPNG or Squoosh. Compress first, then add to your project.

Where to Get Images

If you have your own photos, use them. Real photos beat stock photos every time.

If you need stock photos: Unsplash and Pexels — free, high quality, no attribution required.

Adding Images with Claude

Once your images are in the images/ folder, tell Claude where to use them:

Add my logo at images/logo.png to the navigation bar, sized about 40px tall.

Use images/hero.jpg as a full-width hero background with a dark overlay so white text is readable.

If an image looks stretched or cropped weirdly:

The bread photos look stretched. Make them maintain their aspect ratio and crop to fill the card area evenly.

Creating a Favicon

A favicon is the tiny icon in the browser tab. Without one, your site looks unfinished.

Create a favicon for the site using the first letter of the business name in a circle with the primary brand color.

Or use favicon.io to generate one, download the files, and tell Claude to add them.

Open Graph Images for Social Sharing

When someone shares your link on social media, the preview card matters:

Add Open Graph meta tags to all pages including og:title, og:description, og:image, and og:url. Also add Twitter card meta tags.

Final Polish Prompts

Add smooth scroll behavior to all anchor links.

Add subtle fade-in animations as sections come into view when scrolling.

Make sure all images have descriptive alt text for accessibility.

Add a loading state for the page so there's no flash of unstyled content.

Checking Your Site on Mobile

Open your site in Chrome. Right-click → Inspect → click the phone/tablet icon. Check different device sizes. If something looks off:

On mobile, the menu items overlap the logo. Fix the mobile navigation so everything fits.

The "Good Enough" Checkpoint

Stop when you hit these marks:

• The site loads fast and looks clean
• It works on mobile
• All the information is correct
• You have a favicon
• Images are optimized

Ship it. A live website that's 90% perfect is infinitely better than a perfect website that's still on your laptop.