Change Default SharePoint Site Logo CSS Trick – Great for Office 365!

I was just thinking about this issue one day and realized that I could just override the default image but if the user decides that they wanted to change it later via site settings they could.

Why do I love this trick?

1. You don’t have to set a Site Logo via Site Settings > Title, description, and logo
   1. For On-Prem solutions I would set this via code
   2. For Office 365 you would typically have to do this manually OR powershell to set it across
2. It’s pure CSS trickery, no change to any markup!
   1. This will work across the board On-Prem/Office 365…. No code….
3. Manually setting the Logo you can override this trick
   1. For those subsites that don’t want to inherit the logo they can manually set the logo via the Site Settings > Title, description, and logo
   2. Once the logo is set in the default it will override this trick

Get to the trick already!!!!

Add the following lines of CSS. Only a couple of notes to make this actually work.

img[src*='siteIcon'] {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(‘/Style Library/mySiteLogo.png’) no-repeat; /* Path to the site logo */
    width: 180px; /* Width of new image */
    height: 64px; /* Height of new image */
    padding-left: 180px; /* Equal to width of new image */
}

.ms-siteicon-img, .ms-siteicon-a {
    max-height: none;
    max-width: none;
}

Only 2 important detail for this trick to work.

1. You must set the actual image size must equal the information above for this trick to work.
2. DON’T use ‘siteIcon’ in the filename.

How does this work?

This trick works because it uses CSS to catch onto the <img/> field where the ‘src’ contains ‘siteIcon’. This case catches both the themed site icon on the publishing site and the site icon on the team site. The CSS that performs the replacement of the image comes from https://css-tricks.com/replace-the-image-in-an-img-with-css/ by Marcel Shields. You can read more about that there.

• Publishing Site Logo

• Team Site Logo

You’ll notice that the site logo will change

You might also noticed that in the settings there is no logo set but yet your custom logo will show. [This will go away if you set the logo here just like an override]

Gear -> Site Settings -> Look and Feel -> Title, description, and logo