In addition to our navigation, we also have a logo on the left-hand side. I have provided some assets you can use for this exercise in the Resources folder (Exercise 2 | Assets).

Simply copy and paste the logo.png and logo@2x.png files into your img folder on your Web Project.

logo@2x.png is simply the retina version of the image, which means it has double the pixel density of the normal image. It's a good practice to name your retina image with the suffix @2x.

Now we'll simply add an image before our menu, as follows:

<img src="img/logo.png" alt="">

Perhaps you have noticed that we only put logo.png and there is no use of the logo@2x.png. To be able to use our retina version image only on retina devices, we'll have to use the attribute srcset:

<img src="img/logo.png" srcset="img/logo.png 1x, img/logo@2x.png 2x">

srcset attribute is pretty simple to use. For each asset, add the density at the end to specify which screen density it should be used. In this example, we'll put img/logo@2x.png 2x. You can also specify at which screen width it should appear, but let's keep it simple for this example.

One web design good practice is to make the logo link to the homepage. To do so, we need to put the img tag inside a tag:

<a href="#"><img src="img/logo.png" srcset="img/logo.png 1x, img/logo@2x.png 2x"></a>

To make sure the link is landing on the website's homepage, we need to change the href attribute "#" to "/" so it will go to the root of the folder:

<a href="/"><img src="img/logo.png" srcset="img/logo.png 1x, img/logo@2x.png 2x"></a>

Lastly, let's put a class "logo" so we can target this element later:

<a class="logo" href="/"><img src="img/logo.png" srcset="img/logo.png 1x, img/logo@2x.png 2x"></a>