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.


 

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

clip_image002

  • Team Site Logo

clip_image004

You’ll notice that the site logo will change

site-logo-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

site-logo-settings

Comments
  • Jess W
    Posted at 4:36 am February 2, 2017
    Jess W
    Reply
    Author

    Awesome, would love to try this, but I am no coder… Where exactly do I place this CSS code? 🙂

    • Tom Daly
      Posted at 4:27 pm February 3, 2017
      Tom Daly
      Reply
      Author

      You can create a .css file and upload this to a folder or your style library. You can do this in designer or through the UI. in the CSS file paste in the example code as is.

      If you have publishing enabled you will be able to apply an “Alternate Stylesheet”.
      Go to Site Settings > Master page > (at bottom) Alternate CSS URL > (check) Specify a CSS file to be used by this site and all sites that inherit from it: > (browse) to your file > Click OK to SAVE

      Video
      https://www.screencast.com/t/wjuyo07xB

  • Veronique Palmer
    Posted at 4:28 pm November 2, 2016
    Veronique Palmer
    Reply
    Author

    It would be so great if you could include before and after pics with each of your tips so power users that can’t read code can see how it’s supposed to look.

    • Tom Daly
      Posted at 9:20 pm November 28, 2016
      Tom Daly
      Reply
      Author

      excellent suggestion, just updated.

  • Leave a Reply to Tom Daly
    Cancel Reply