Different logos

I am trying to leave the normal text site title on the home page, but change the logo image on that home page.

The site logo works fine on every other page, but is overkill with the home page site title. Would be nice to have just a symbol in the upper left hand corner (or wherever Supreme and GeoDirectory want to put it!)

Trying to use CSS to change the Home title page and cover the logo image — and came up with the below.
div.site-logo img {
background:none!important;
background: url(http://feptc.org/wp-content/uploads/2018/02/bubble-surrounded-white-circle.png)!important;background-repeat: no-repeat!important;
background-size:contain!important;
z-index:50000!important;}

What it does is go in BACK of the site logo, leaving both the normal site logo and my SYMBOL logo attempt on the screen.

Is there a way to block out that normal home logo?

Also, I saw a code chunk here, but not sure how to use to achieve my goal.
From <https://wpgeodirectory.com/support/topic/move-logo-to-middle-of-the-featured-image-supreme-theme/&gt;

I would LIKE the same placement (upper left or moved to middle when Supreme’s fancy strikes) as the original logo…I just want to put my SYMBOL logo (not full name) over it.

Any ideas?

(This is test Symbol…ultimately will be same one as on OTHER pages.)

Any ideas would be appreciated!