Adding the website’s logo, people usually adds a <img> tag and sometimes a <a><img> tag. This looks like this:

<a href="/">
  <img src="/img/logo.png" alt="Our logo" />

But CSS gives us a more professional way to insert a logo. Using this way, we won’t insert a <img> tag or a <a><img> tag. We only will insert a <a> tag, which contains image and link, using CSS. This may look like this:

<a href="/" title="Visit our front page" id="logo"></a>

And everything is done! After giving our link an id, the CSS code is written.

#logo {
  background: url('/img/logo.png'); /* Replace this with your image */
  width: 300px; /* Replace this with image width */
  height: 100px; /* Replace this with image height */
  display: block;

Try yourself! Everything will be the same, but this code is more efficient.