Knowledge / Article

Favicon and OG Image: Small Details with a Big Impact on Clicks and Trust

Two tiny image files often help decide whether someone clicks your link or just keeps scrolling: the favicon (the small icon in the browser tab) and the OG image (the preview image that shows up when your link is shared in WhatsApp, LinkedIn, Slack or Facebook). Both are technically trivial to set up - and yet they're surprisingly often forgotten or done half-heartedly. This article explains why they matter, when they really make a difference and how to get them right.

Why these details matter at all

People make click decisions in a fraction of a second. A generic globe symbol in the browser tab or a broken, empty link preview sends an unconscious signal: nobody bothered here. The opposite is also true - a clean icon and a tidy preview convey care and reliability, exactly the qualities a potential customer expects from you.

In practical terms, the two work like this:

To be honest: these elements won't turn a bad page into a good one. But on a good page, they needlessly give away clicks and trust when they're missing. They're part of the basic hygiene of any professional website.

Setting up the favicon properly

A favicon today is more than the old favicon.ico. Different devices and contexts expect different sizes. A small set makes sense:

What matters is that the design is still recognisable at 16 pixels. A full logo with a wordmark never works at that size - use a clear symbol, a single letter or a simplified mark with good contrast instead. Test it against both light and dark tab backgrounds.

The OG image that gets shared

The OG image sits in your page's source code as a meta tag (og:image) and is read by social networks. The proven approach is:

One common pitfall: platforms cache the preview. When you change the image, you often still see the old version. Tools like the Facebook Sharing Debugger or the LinkedIn Post Inspector let you refresh the cache on demand and check at the same time that all tags are being read correctly.

A quick practical check

Here's how to tell in a few minutes whether your site is set up cleanly:

When the effort is worth it - and when it isn't

For any public website meant to win customers, the effort almost always pays off, because it's small and one-off. It's a different story for a purely internal application or a tool behind a login that will never be shared - there, an elaborate OG image is simply unnecessary. A simple favicon never hurts, though.

For us, both elements are part of the standard delivery on every project. We run seven of our own brands in production - from an accessibility scanner to a product portal with over 177,000 entries to a marine SaaS. From running these day to day, we know how differently platforms render previews and where the typical cache and format traps lie. It's exactly these small details that ultimately make the difference between a site that looks professional and one that looks almost professional.

Need a website, a tool or a SaaS of your own?

We build it at a fixed price — by the team that runs seven of its own brands live. Clear scope, clear price, clear timeline.

Start a projectServices & pricing

Keep reading

Fixed Price or Hourly Rate in Web Development: Which Fits Your Project?Optimising Forms: More Submissions, Fewer Drop-OffsGoogle Analytics vs. Privacy-Friendly Alternatives - What Suits Small Sites?