Why does my favicon appear smaller than other sites in Google search? (Next.js 14 + favicon.ico only)

In Google search results, I noticed that some sites show a full-sized favicon (A), while mine shows a smaller one (B) with padding or shrink.

Here’s what I mean:

A (Other site – full favicon):

B (My site – smaller favicon):

I'm using Next.js 14 (App Router) and here’s all I’ve done:

• Created a favicon.ico file
• Placed it in the /public directory
• Did not add any other icon types or <link> tags

But my favicon appears smaller compared to others in Google search (and possibly in some browsers too).

How can I make my favicon appear like A, with a full-size image?

Thanks!

Browsers and Google look for a 32x32 icon, so if your favicon.ico only has 16×16, they’ll pad it, and thus it looks tiny, so in order to fix it, generate a multi-size favicon (16×16, 32×32, or 48×48) or PNGs, put them in /public, and declare them in your metadata.icons in app/layout.tsx. That way Google will pull the right-sized image and your favicon will show full-size...hope it helps :)