Show logo before Site Title in Genesis Sample

There are different ways to add content before Title area which can be used to add different contents includes images/logo/icon.

Here is the simplest way to add a SVG logo. Add this to your CSS file.

.title-area {
    width: 150px;
    padding-left: 10px;
}

.title-area:before {
    background: url(/logo.svg) no-repeat !important;
    width: 50px;
    display: inline-flex;
    float: left;
    min-height: 50px;
    margin-top: -15px;
    margin-bottom: -15px;
    margin-left: -20px;
    content: " ";
}

How about showing description and site title both in Genesis with the SVG logo?

Not have SVG logo?

Here is the CSS for .png file

.title-area {
    width: 250px;
    padding-left: 10px;
}
.title-area:before {
    background-image: url(/logo.png);  no-repeat !important;
    width: 50px;
    background-size: contain;
    display: inline-flex;
    float: left;
    height: 50px;
    margin-top: -15px;
    margin-bottom: -15px;
    margin-left: -20px;
    content: " ";
}

Enjoy!