How to make your website look more 💫expensive💫 - Part 2: Customise your scrollbar & favicon

If you read Part 1 of this series, you already know that expensive-looking websites are rarely about doing more. They’re usually about doing less, but doing it intentionally.

More white space. Bigger margins. Cleaner layouts. Fewer distractions. That same principle applies to the tiny details too.

Because the websites that feel premium are the ones where everything looks considered - even the parts most people forget about entirely.

Today we’re talking about two tiny design details that instantly make your website feel more custom, more branded, and way more polished:

• Your favicon

• Your scrollbar

They’re small changes. Like, genuinely tiny.

But together? They make your site feel like a proper brand instead of a template.

And the best part is neither of them are difficult to do.

First Things First… What Actually Makes a Website Look “Expensive”?

Before we get into the tutorial side of things, let’s talk about why these little details matter so much.

Luxury branding - whether it’s fashion, interiors, packaging, or websites - is usually built on consistency.

Everything feels intentional.
Everything matches.
Everything belongs together.

Cheap-looking websites often feel chaotic because there’s no visual thread connecting everything.

Different button styles.
Random colours.
No spacing.
No personality.
No detail.

Whereas premium websites feel cohesive.

Your favicon matches your branding.
Your scrollbar colours tie into your palette.
Your buttons have the same rounded shape throughout the site.
Even your bullet points look styled.

It creates trust subconsciously.

Your visitor might not consciously notice your custom scrollbar…
…but they will notice how polished your website feels overall.

And in online business, perception matters.

Let’s Start With Your Favicon

A favicon is the tiny icon that appears:

• in browser tabs

• on bookmarks

• in mobile browser windows

• sometimes in search results too

It’s a small thing people massively overlook.

And when you don’t add one, your browser usually replaces it with a blank page icon or a generic symbol - which immediately makes your site feel unfinished.

A custom favicon instantly makes your brand feel more established.

What Makes a Good Favicon?

Your full logo usually won’t work.

Favicons are tiny, so if you try shrinking your entire logo down, nobody can actually see what it says.

Instead, the best favicons are:

• simple

• bold

• high contrast

• recognisable at a tiny size

Think:

• a logo symbol

• an icon from your branding

• a monogram

• a star, flower, shape, or abstract mark from your logo

The goal is recognisability, not detail.

How to Make a Favicon in Canva

This is the easiest way to do it if you’re not a designer.

Open up Canva and create a custom design.

I usually recommend:

• 500 x 500 px

• transparent background

Then:

Pull an Element From Your Logo

This is where your branding becomes cohesive.

Instead of creating a random icon, use:

• a shape from your logo

• an icon you already use

• your initials

• a symbol from your brand identity

For example:

• a photographer might use a small star or camera icon

• a skincare brand might use a minimal flower

• a personal brand might use initials

• a luxury business might use a monogram

This creates visual consistency across your entire brand.

Keep It Simple

This is not the place for tiny text.

If your favicon needs squinting to understand it, it’s too detailed.

Think:

• clean lines

• bold shapes

• strong contrast

• simplicity

Remember: it’ll usually display at around 16 x 16 pixels.

Tiny.

Use Your Brand Colours

This matters more than people think.

Your favicon should instantly feel connected to your website.

Use:

• your main brand colour

• your accent colour

• neutral tones from your palette

If your website is calm and minimal, keep the favicon calm too.

If your branding is bold and vibrant, lean into that.

Consistency = expensive.

Export as PNG

When you’re happy with it:

• click Share

• Download

• PNG

• transparent background ON

Done.

How to Add Your Favicon to Your Website

Adding a favicon in Squarespace is super straightforward.

Inside your Squarespace website:

• go to Settings > Website

• click Favicon

• upload your favicon PNG

• save your changes

That’s literally it.

Squarespace will automatically display it in browser tabs and bookmarks.

A quick tip though: make sure your favicon has a transparent background if you want it to feel clean and premium. White boxes around icons can instantly make a website feel less polished.

Now Let’s Talk About Scrollbars

This is one of my favourite subtle website upgrades because hardly anyone does it.

By default, website scrollbars are usually:

• grey

• clunky

• generic

• completely disconnected from your branding

But customising your scrollbar instantly makes your site feel bespoke.

Again, it’s about intentionality.

A branded scrollbar tells visitors:
“This website was designed properly.”

What Is a Custom Scrollbar?

It’s literally just styling the little bar people drag while scrolling through your website.

You can customise:

• colours

• width

• shape

• rounded edges

And once you start noticing custom scrollbars on premium websites, you’ll see them everywhere.

Why This Makes Your Website Feel More Luxurious

Luxury web design is usually:

• cohesive

• restrained

• intentional

• polished

A branded scrollbar helps tie your whole website together visually.

Especially when:

• your buttons match

• your accent colours repeat

• your rounded corners stay consistent

That consistency is what makes a site feel elevated.

How to Choose Your Scrollbar Colours

The easiest method?

Use your existing brand palette.

Usually:

• the track (background) should be a darker neutral

• the thumb (the draggable part) should be your accent colour

For example:

• olive green + muted gold

• charcoal + warm beige

• cream + black

• dark taupe + mustard

• forest green + champagne gold

You want contrast, but not chaos.

How to Add This Code Into Your CSS on Squarespace

If you’re using Squarespace, adding custom scrollbar styling is actually really easy.

Inside your website dashboard:

• go to Design

• click Custom CSS

• paste the below code into the CSS box

• click Save

And that’s it — your scrollbar styling should update across your website automatically.

/* Scrollbar Track */

::-webkit-scrollbar-track {

background: #303719;

}

/* Location Indicator */

::-webkit-scrollbar-thumb {

background: #BEB950;

}

/* Scrollbar Width */

::-webkit-scrollbar {

width: 15px;

}

How to Change This Code to Match Your Brand Colours

You only need to edit the parts of the code that contain colour hex codes.

For example, in this section:

background: #303719;

the #303719 is the colour.

So to use your own brand colour, replace:

#303719

with your own hex code.

For example:

background: #000000;

would make the scrollbar track black.

What Each Part Controls

This Changes the Scrollbar Background Colour

::-webkit-scrollbar-track { background: #303719; }

Replace:

#303719

with your own darker brand colour.

Examples:

• black → #000000

• dark brown → #3E322C

• charcoal → #2B2B2B

• forest green → #1F3A2E

This Changes the Scrollbar Indicator Colour

::-webkit-scrollbar-thumb { background: #BEB950; }

Replace:

#BEB950

with your accent colour.

Examples:

• gold → #D4AF37

• sage green → #A3B18A

• beige → #D6C2A1

• soft pink → #D8A7B1

This is the part users actually drag while scrolling.

Final Thoughts

If your website feels slightly “off” but you can’t figure out why…
…it’s probably missing intentional details.

Not more design.
Better design.

Small upgrades like:

• a custom favicon

• branded scrollbars

• cohesive accent colours

• rounded UI elements

• consistent spacing

all work together to create that elevated, luxury feel.

Because expensive-looking websites aren’t usually louder.

They’re calmer.
Cleaner.
More considered.

And honestly? That’s the whole secret.