How can i add the logo in search engines results?

Question

I created previously a website using html, css, js, and PHP and i want to when someone search for the website to show the logo beside the link that engines shows as shown on the image i provided above.

Google search engine result

Answer 1

Google started to display the favorite icon next to search results.

A favicon (favorite icon) is a tiny icon included along with a website, which is displayed in places like the browser's address bar, page tabs and bookmarks menu. – MDN

Historically, as the name suggests, this icon was meant to help recognise sites in a large list of bookmarks.

Nowadays, it’s used in several places, like Google or in Chats, but also when you bookmark a website on your desktop or the phone home screen. They can be displayed rather big.

So the historically used bitmap formats are unfit for today’s Responsive Web and 4K-Displays.

I highly recommend to follow the tips on How to Favicon in 2023: Six files that fit most needs

You’ll need to create the logo in different formats for the different platforms and screen resolutions. This will give best results.

Logos are created with vectors, so you can export the different formats from the source file. Sometimes adjustments are appropriate to adapt the logo to the square format or the tiny size, for example for 16 px versions you might remove some details. There also are services that simply create these formats from a source vector file.

Finally, you’d reference these files as follows:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">

// manifest.webmanifest
{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}