SOLVED

Company Logo looks terrible on Modern Site Pages

%3CLINGO-SUB%20id%3D%22lingo-sub-100600%22%20slang%3D%22en-US%22%3ECompany%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-100600%22%20slang%3D%22en-US%22%3E%3CP%3EOur%20company%20logo%20is%20rectangular%20like%20most%20and%20looked%20fine%20on%20standard%20pages%2C%20but%20looks%20very%20odd%20on%20modern%20site%20pages.%20See%20examples.%20Are%20there%20settings%20to%20improve%20the%20rendering%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBelow%20is%20a%20traditional%20page%2C%20followed%20by%20the%20modern%20page.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-left%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F19169i79458FF4447378D8%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22logogood.png%22%20title%3D%22logogood.png%22%20%2F%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-left%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F19170i00AA1356BEE0D31F%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22logobad.png%22%20title%3D%22logobad.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-100600%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EModern%20Experience%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-169990%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-169990%22%20slang%3D%22en-US%22%3E%3CP%3EThis%20probably%20is%20not%20the%20answer%20you%20are%20looking%20for%26nbsp%3Bbecause%20it%20requires%20modification%20of%20the%20logo.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI%20was%20told%20by%20a%20Microsoft%20Certified%20Master%20that%20the%20Classic%20Site%20was%20180%20X%2064%20and%20the%20Modern%20Site%20is%2064%20X%2064%20so%20he%20recommended%20changing%20the%20logo%20for%20Classic%20and%20Modern%20to%20be%20a%2064%20x%2064%20and%20it%20will%20look%20good%20when%20switching%20between%20classic%20and%20modern.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI%20agree%20with%20you%20that%20we%20should%20not%20have%20to%20conform%20to%20MS%20law%20for%20the%20company%20logo%2C%20but%20that%20worked%20for%20us.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-162811%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-162811%22%20slang%3D%22en-US%22%3E%3CP%3EYou%20can%20now%20use%20an%20SPFX%20webpart%20to%20get%20custom%20CSS%20onto%20any%20modern%20page.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI've%20used%20this%20to%20amend%20to%20logo%20div%2C%20and%20surrounding%20elements%2C%20to%20accommodate%20a%20larger%20logo.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThis%20logo%20is%20hidden%20on%20mobile%20btw.%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIt%20is%20mostly%20likely%20unsupported%2C%20given%20they%20might%20change%20the%20layout%2C%20but%20it%20works.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-137254%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-137254%22%20slang%3D%22en-US%22%3EVery%20helpful%20detail.%20We%20did%2C%20based%20on%20an%20earlier%20reply%20implement%20the%20logo%20in%20the%20O365%20header%20area.%20As%20for%20the%20site%20logos%2Ficons%2C%20we%20have%20been%20a%20little%20slow%20at%20that%20one%2C%20but%20your%20info%20is%20helpful%20in%20helping%20me%20decide%20on%20next%20steps%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-137109%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-137109%22%20slang%3D%22en-US%22%3E%3CP%3EThis%20is%20your%20best%20bet%20for%20branding%20SharePoint%20Online%20sites%20in%20O365%20from%20my%20consulting%20experience%20and%20various%20clients.%20And%20this%20is%20coming%20from%20a%20former%20brand%20manager%20myself%20and%20a%20guy%20who's%20had%20to%20have%20the%20predictable%20debate%20with%20marketing%2Fbrand%20teams%20at%20various%26nbsp%3Borganizations%20about%20the%20'limitations'%20of%20what%20SPO%20offers.%20Most%20needs%20of%20brand%20teams%20are%20wants%2C%20not%20needs.%20Unfortunately%2C%20the%20system%20provides%20restrictive%20needs%2C%20so%20sometimes%20you%20have%20to%20stay%20within%20those%20parameters.%20Hard%20to%20say%20%22tough%20cookies%22%2C%20but%20sometimes%20it's%20the%20only%20thing%20to%20say.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EHere%20goes%3A%3C%2FP%3E%0A%3COL%3E%0A%3CLI%3EAlways--%3CEM%3E%3CSTRONG%3Ealways%3C%2FSTRONG%3E%3C%2FEM%3E--%3CA%20href%3D%22http%3A%2F%2Fsympmarc.com%2F2016%2F09%2F16%2Fcustomizing-the-suite-bar-theme-in-your-office-365-tenant%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Eadd%20your%20company's%26nbsp%3Blogo%3C%2FA%3E%20to%20the%20suite%20bar%20and%20link%20it%20to%20whatever%20the%20most%20popular%20destination%20in%20your%20network%20is%20(usually%20your%20intranet%20home%20page).%20Since%20most%20logos%20are%20more%20horizontal%20than%20vertical%2C%20this%20should%20cover%20most%20companies'%20brand%20needs%20without%20sacrifice.%20Do%20it%20in%20PNG%20or%20GIF%2C%20transparent%20background%2C%20I%20generally%20like%20a%20white%20version%20of%20any%20logo%20on%20a%20darker%20background%2C%20but%20that's%20just%20me.%20This%20is%20also%20a%20major%20improvement%20for%20your%20overall%20navigation%20experience.%20Get%20lost%20in%20almost%20any%20O365%20app%3F%20Simply%20go%20home!%3C%2FLI%3E%0A%3CLI%3EChange%20the%20%3CA%20href%3D%22http%3A%2F%2Fsympmarc.com%2F2016%2F09%2F16%2Fcustomizing-the-suite-bar-theme-in-your-office-365-tenant%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Esuite%20bar%20color%3C%2FA%3E%20to%20your%20company's%20primary%20brand%20color.%3C%2FLI%3E%0A%3CLI%3EHave%20a%201%3A1%20default%20branded%20icon%20for%20SPO%20sites.%3C%2FLI%3E%0A%3CLI%3EFor%20the%20bigger%20sites%20in%20the%20network%2C%20provide%201%3A1%20graphics%20that%20are%20specific%20to%20them%2C%20but%20follow%20a%20design%20motif.%20What%20I%20mean%20here%20is%20have%20a%201%3A1%20'logo'%20for%20the%20HR%2C%20IT%2C%20Finance%2C%20Facilities%2C%20Accounting%2C%20Marketing%2C%20Production%2C%20Legal%2C%26nbsp%3Betc.%20sites%20(and%20their%20related%20sub-sites%20if%20you%20have%20those).%20The%20reason%20for%20this%20recommendation%20is%20because%20you're%20not%20going%20to%20be%20able%20to%20quickly%20identify%20where%20you%20are%20from%20a%20generic%20icon%20that%20shows%20up%26nbsp%3B%3CEM%3Eliterally%20everywhere%20%3C%2FEM%3Ein%20SPO.%20Plus%2C%20you%20know%20you're%20in%20your%20company's%20intranet%3B%20you%20don't%20need%20a%20constant%20reminder%20in%20a%20place%20that's%20actually%20customizable%20to%20be%20helpful%20in%20way-finding.%20Let%20%231%20above%20do%20the%20brand%20reminding%20for%20you.%20(Note%3A%20You%20can%20go%20all%20out%20if%20you%20want%20and%20have%20one%20for%20every%20intranet%20and%20team%20site%2C%20but%20I'd%20steer%20clear%20of%20that%20maintenance%20mess%20if%20you're%20a%20big%20org.)%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%3ELooking%20at%20your%20situation%20specifically%3A%3C%2FP%3E%0A%3COL%3E%0A%3CLI%3EDo%20%231%20above.%20No%20question.%3C%2FLI%3E%0A%3CLI%3EConsider%20%232%20above%20if%26nbsp%3Byour%20brand's%20color%20palette%26nbsp%3Bhas%20an%20option%20that%20isn't%20obnoxious.%20Pretty%20sure%20it%20supports%20hex%2C%20so%20you%20can%20get%20exactly%20the%20hue%20your%20brand%20team%20requires.%3C%2FLI%3E%0A%3CLI%3EThe%20flower%20in%20your%20logo%20is%20perfect%20for%20%233%20above.%20Talk%20your%20brand%20people%20into%20it.%20If%20they%20can't%20be%20proud%20of%20using%20their%20logo's%20icon%20to%20meet%20a%201%3A1%20need%20(what%20do%20they%20use%20for%20Twitter%2C%20Facebook%2C%20and%20LinkedIn%2C%20by%20the%20way%3F)%2C%20then%20they%20shouldn't%20be%20proud%20of%20their%20logo.%20(Tough%20love%2C%20sorry!%20This%20seems%20like%20an%20obvious%20win%20to%20me.)%3C%2FLI%3E%0A%3CLI%3EUse%20the%20flower%20icon%20as%20the%20basis%20of%20these%20org%20icons%20mentioned%20in%20%234%20above.%20Have%20the%20flower%20in%20the%20background%20(50%25%20or%20more%20opacity)%20with%20shortened%20names%2Facronyms%20in%20front%20(100%25%20opacity)%20to%20identify%20which%20site%20you're%20in%20at%20a%20glance.%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%3ESome%20gotchas%20to%20keep%20in%20mind%3A%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3EIf%20you%20do%20%231%20or%20%232%20above%2C%20you%20need%20to%20%3CA%20href%3D%22http%3A%2F%2Fsympmarc.com%2F2016%2F09%2F16%2Fcustomizing-the-suite-bar-theme-in-your-office-365-tenant%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Edisable%20the%20ability%20to%20change%20the%20theme%3C%2FA%3E%20of%20individual%20sites%20%5BCtrl%2BF%20'Prevent%20users%20from%20overriding%20custom%20theming'%5D.%20Unfortunately%2C%20when%20someone%20changes%20the%20theme%20(even%20just%20the%20color)%2C%20it%20overwrites%20all%20of%20the%20effects%20of%20%231%20and%20%232%20in%20that%20site.%20Very%20annoying%2C%20but%20something%20you've%20gotta%20deal%20with.%3C%2FLI%3E%0A%3CLI%3EI%20don't%20believe%20there's%20a%20way%20to%20set%20a%20default%20image%2C%20so%20you'll%20have%20to%20add%20the%20image%20with%20every%20created%20site%20(either%20through%20some%20sort%20of%20workflow%2C%20or%20include%20that%20part%20in%20the%20training%20for%20site%20owners).%20The%20default%20for%20new%20sites%20is%20the%20first%20letter%20of%20the%20first%20two%20words%20of%20the%20name%2C%20I%20believe.%20Which%2C%20similar%20to%20my%20comment%20above%20about%20easier%20identification%20of%20a%20site's%20name%2Fpurpose%2C%20was%20Microsoft's%20goal%20here.%3C%2FLI%3E%0A%3CLI%3EThere's%20no%20good%20way%20I%20know%20of%20to%20control%20the%20images%20site%20owners%20upload.%20So%20unless%20it's%20a%20headshot%20of%20Darth%20Vader%2C%20I'd%20say%20don't%20worry%20too%20much%20about%20it%2C%20especially%20on%20a%20team%20site%2C%20which%20should%2C%20in%20theory%2C%20have%20a%20smaller%20population%20to%20offend%20with%20a%20joke%20image%20anyway.%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3EHope%20this%20helps.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-116738%22%20slang%3D%22en-US%22%3ERe%3A%20RE%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-116738%22%20slang%3D%22en-US%22%3EYes%20thanks.%20I%20mentioned%20earlier%20in%20the%20thread%20that%20I%20was%20working%20with%20the%20tenant%20owner%20to%20get%20the%20complany%20logo%20placed%20in%20the%20appropriate%20place.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-116737%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-116737%22%20slang%3D%22en-US%22%3E%3CP%3EYes%20thanks.%20I%20mentioned%20earlier%20in%20the%20thread%20that%20I%20was%20working%20with%20the%20tenant%20owner%20to%20get%20the%20complany%20logo%20placed%20in%20the%20appropriate%20place.%20%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-116721%22%20slang%3D%22en-US%22%3ERE%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-116721%22%20slang%3D%22en-US%22%3EIf%20the%20intention%20is%20to%20have%20the%20company%20logo%20on%20all%20pages%2C%20I%20would%20suggest%20using%20the%20Office%20365%20organisation%20profile%20settings%20to%20place%20it%20in%20the%20centre%20in%20the%20Suite%20bar%20so%20it%20shows%20in%20all%20services.%20Use%20the%20site%20logo%20to%20reflect%20the%20content%20of%20that%20site%20as%20mentioned%20before%20in%20the%20form%20of%20an%20icon%20or%20bug%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-116676%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-116676%22%20slang%3D%22en-US%22%3E%3CP%3ETo%20me%2C%20it%20feels%20like%20the%20term%20%22Logo%22%20is%20misappropriated%20in%20the%20branding%20area%20for%20a%20modern%20site.%26nbsp%3B%20It%20would%20be%20more%20appropriate%20to%20refer%20to%20it%20as%20an%20%22Icon%22%20or%20a%20%22Bug%22.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ELogos%20are%20usually%20official%20company%20identity%20items%20that%20have%20specific%20utilization%20requirements%20around%20them.%26nbsp%3B%20Many%20times%20organizations%20or%20brands%20have%20horizontally-organized%20and%20vertically-organized%20versions.%26nbsp%3B%20They%20often%20contain%20the%20identity%20element%2C%20company%20name%2C%20and%20a%20tag%20line.%26nbsp%3B%20They%20aren't%20useful%20when%20reduced%20down%20to%20a%20small%20size.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20modern%20SharePoint%20environment%20is%20using%20a%20small%20square%20icon%20to%20identify%20a%20specific%20site%20or%20content%20area%20throughout%20the%20Office%20365%20ecosystem.%26nbsp%3B%20As%20a%20result%20the%20traditional%20logo%20does%20not%20render%20well%20for%20this%20use.%26nbsp%3B%20You%20need%20something%20that%20is%20easy%20to%20identify%20that%20defines%20the%20purpose%20of%20the%20site%2C%20so%20when%20it%20is%20used%20in%20the%20new%20SharePoint%20home%2C%20people%20have%20a%20great%20visual%20que%20as%20to%20its%20purpose.%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F22201i859BB384E55085CC%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22large3TOTW1M1.png%22%20title%3D%22large3TOTW1M1.png%22%20%2F%3E%3C%2FSPAN%3E%26nbsp%3B%3C%2FP%3E%3CP%3EUsing%20a%20detailed%20company%20or%20product%20logo%20in%20the%20examples%20shown%20here%2C%20in%20the%20Modern%20SharePoint%20Home%2C%20isn't%20going%20to%20help%20your%20users%20navigate%20quickly%20to%20the%20right%20thing.%26nbsp%3B%20But%20using%20an%20icons%20like%20the%20following%20is%3A%3C%2FP%3E%3CP%3EBook%20%3D%20knowledgebase%20(here's%20an%20example%20I'm%20messing%20around%20with%20for%20this%20purpose)%26nbsp%3B%20%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20200px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F22202i4E82E0E55D3FB7EE%2Fimage-size%2Fsmall%3Fv%3D1.0%26amp%3Bpx%3D200%22%20alt%3D%22Intranet.png%22%20title%3D%22Intranet.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EAirplane%20%3D%20Travel%20and%20expenses%3C%2FP%3E%3CP%3EMegaphone%20%3D%20News%3C%2FP%3E%3CP%3EMoney%20%3D%20Benefits%20%26amp%3B%20Pay%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EPut%20your%20corporate%20logo%20in%20to%20brand%20your%20overall%20tenant%2C%20and%20it%20will%20show-up%20throughout%20the%20ecosystem%20appropriately%20centered%20in%20the%20O365%20primary%20nav%20bar.%26nbsp%3B%20Then%20you%20don't%20have%20to%20reuse%20it%20anywhere%20again.%26nbsp%3B%20Use%20the%20other%20branding%20opportunities%20as%20more%20focused%2C%20to%20brand%20the%20specific%20content%20area.%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F22203iB66057B764E4A025%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22large.png%22%20title%3D%22large.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EThere%20was%20a%20good%20session%20at%20Ignite%20that%20goes%20through%20all%20your%20options.%20%3CA%20title%3D%22Ignite%202017%20BRK2393%22%20href%3D%22https%3A%2F%2Fmedius.studios.ms%2FEmbed%2FVideo%2FIGNT17-BRK2393%3FSFYT%3Dtrue%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3ELINK%20HERE%3C%2FA%3E%20%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-100883%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-100883%22%20slang%3D%22en-US%22%3E%3CP%3EIf%20you%20uploaded%20a%20square%20image%20with%20your%20company%20logo%20(rather%20than%20a%20rectangular%20image)%20I'm%20sure%20it%20would%20look%20better%20(because%20the%20destination%20image%20is%20square%20shaped).%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-100878%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-100878%22%20slang%3D%22en-US%22%3E%3CP%3EFound%20the%20info%20on%20Office%20365%20Themes%3A%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fsupport.office.com%2Fen-us%2Farticle%2FCustomize-the-Office-365-theme-for-your-organization-8275da91-7a48-4591-94ab-3123a3f79530%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fsupport.office.com%2Fen-us%2Farticle%2FCustomize-the-Office-365-theme-for-your-organization-8275da91-7a48-4591-94ab-3123a3f79530%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EUnfortunately%2C%20this%20screen%26nbsp%3Bisn't%20accessible%20to%20me%20in%20the%20Admin%20(I%20have%20just%20the%20SharePoint%20admin%20screens)%26nbsp%3Bso%20I%20will%20now%20begin%20the%20process%20of%20getting%20permissions%20or%20have%20someone%20else%20do%20it%20for%20me.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-100877%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-100877%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%20for%20this%20info.%20I%20will%20research%20it.%20We%20used%20the%20Site%20logo%20slot%20for%20years.%20I%20will%20have%20to%20see%20if%20I%20have%20access%20to%20put%20a%20logo%20in%20the%20proper%20place.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-100858%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-100858%22%20slang%3D%22en-US%22%3E%3CP%3EThat%20slots%20not%20for%20a%20company%20logo%2C%20it's%20the%20icon%20for%20the%20site%2C%20used%20in%20many%20other%20places%20such%20as%20sharepoint%20home%2C%20mobile%20app%20and%20so%20forth.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECompany%20Logo%20should%20be%20in%20your%20overall%20Office%20365%20branding%2C%20so%20appearing%20in%20the%20Green%20Bar%20above%20your%20site.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-100854%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-100854%22%20slang%3D%22en-US%22%3E%3CP%3ENo%20luck%20using%20SharePoint%20Designer.%20Any%20Styles%20added%20to%20the%20modern%20page%20or%20any%20Stylesheets%20linked%20to%20it%20don't%20appear%20to%20come%20through.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-100850%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-100850%22%20slang%3D%22en-US%22%3E%3CP%3EWell%20I%20looked%20at%20styling%20the%20logo%20and%20if%20I%20can%20get%20the%20CSS%20styles%20below%20onto%20a%20Modern%20Site%20Page%20I%20will%20be%20good.%20But%20I%20noticed%20there%20is%20no%20convenient%20webpart%20for%20embedding%20code%20on%20these%20type%20of%20pages%20(the%20Embed%20webpart%20is%20only%20for%20iframes).%20I%20will%20look%20at%20SharePoiint%20Designer%20and%20see%20if%20there%20is%20a%20place%20to%20insert%20the%20styles.%20%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3E.ms-siteLogo-defaultLogo%3Ahover%2C%20.ms-siteLogo-defaultLogo%3Avisited%7B%0A%0A%20width%3A%20200px%3B%0A%20overflow%3A%20visible%3B%0A%7D%0A%0A%0A%0A.ms-siteLogo-actual%20%7B%0A%20width%3A%20200px%3B%0A%0A%7D%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-100842%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-100842%22%20slang%3D%22en-US%22%3E%3CBLOCKQUOTE%3E%3CHR%20%2F%3E%40Deleted%20wrote%3A%3CBR%20%2F%3E%3CP%3EHave%20you%20tried%20changing%26nbsp%3BSiteAssets%2F__siteIcon__.jpg%20directly%3F%3C%2FP%3E%3CHR%20%2F%3E%3C%2FBLOCKQUOTE%3E%3CP%3ENot%20clear%20what%20you%20mean.%20I%20do%20not%20see%20this%20paricular%20JPG%2C%20but%20this%20is%20the%20folder%20where%20I%20have%20placed%20our%20company%20logo.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-100776%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-100776%22%20slang%3D%22en-US%22%3E%3CP%3EHave%20you%20tried%20changing%26nbsp%3BSiteAssets%2F__siteIcon__.jpg%20directly%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-100753%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-100753%22%20slang%3D%22en-US%22%3EThis%20approach%20is%20a%20very%20good%20workaround...but%20again%2C%20It%20really%20depends%20on%20company%20branding%20guidelines%20the%20possibility%20to%20follow%20this%20approach%20or%20a%20similar%20one%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-100752%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-100752%22%20slang%3D%22en-US%22%3EYeap%2C%20that's%20exactly%20what%20I%20mean%20Paul!%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-100751%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-100751%22%20slang%3D%22en-US%22%3ENo%2C%20I'm%20not%20suggesting%20that%20%3A-)...if%20the%20rectangular%20logo%20appearance%20is%20a%20problem%20why%20not%20having%20a%20square%20logo%20that%20follows%20your%20branding%20guidelines%20and%20at%20the%20same%20time%20looks%20good%20in%20SPO...what%20it's%20true%20is%20that%20the%20norm%20in%20many%20places%20in%20Office%20365%20is%20to%20use%20a%20square%20logo%20and%20some%20corporate%20logos%20are%20going%20to%20look%20good%20and%20other%20no...of%20course%2C%20we%20could%20ask%20Microsoft%20to%20have%20the%20flexibility%20of%20being%20able%20to%20use%20square%20or%20rectangular%20logos%2C%20but%20I%20don't%20see%20this%20is%20something%20we%20are%20going%20to%20have%20soon%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-100746%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-100746%22%20slang%3D%22en-US%22%3E%3CP%3EWe%20followed%20similar%20to%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F9835%22%20target%3D%22_blank%22%3E%40Daniel%20Lentz%3C%2FA%3E%26nbsp%3B%26amp%3B%20works%20for%20us%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-100741%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-100741%22%20slang%3D%22en-US%22%3E%3CP%3EPlacing%20the%20logo%20and%20make%20it%20look%20good%20is%20not%20a%20new%20issue%2C%20it%20has%20been%20arround.%20The%20themes%20are%20not%20very%20flexible%20on%20that%20part.%20But%20i%20kind%20of%20embraced%20the%20smaller%20placeholder%20and%20started%20to%20replace%20the%20full%20horizontal%20logo%20with%20only%20a%20part%20of%20it.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E-%20I%20started%20theming%20the%20tenant%20and%20put%20the%20logo%20at%20the%20top%2C%20this%20way%20it%20will%20never%20be%20hidden%3C%2FP%3E%3CP%3E-%20the%20logotype%20can%20be%20clicked%20an%20take%20you%20to%20the%20primary%20page%2C%20ie.%20Intranets%20first%20page%3C%2FP%3E%3CP%3E-%20i%20then%20cut%20out%20the%20E%20in%20the%20original%20logo%20and%20used%20that%20as%20logo%20in%20every%20page.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20know%20that%20not%20everyone%20has%20a%20logo%20they%20can%20do%20that.%20In%20some%20cases%20i%20used%20graphic%20illustrations%20instead.%20Only%20thing%20is%20that%20i%20would%20like%20to%20get%20rid%20of%20those%20pesky%20lines%20around%20the%20picture.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%2Fregards%20Daniel%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F19194i786004F1AD8DE524%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22modern-pages.jpg%22%20title%3D%22modern-pages.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-100725%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-100725%22%20slang%3D%22en-US%22%3E%3CP%3EBut%20what%20Juan%20says%20is%20the%20situation%20at%20this%20moment%20in%20Modern%20Pages.%20And%20i%20guess%20it%20is%20not%20going%20to%20change%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-100675%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-100675%22%20slang%3D%22en-US%22%3EIf%20you're%20suggesting%20we%20change%20our%20company%20branding%20to%20fit%20SharePoint%20branding...no.%20That's%20backwards.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-100647%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-100647%22%20slang%3D%22en-US%22%3Eis%20it%20not%20possible%20to%20have%20a%20logo%20that%20fits%20better%20in%20modern%20team%20sites%3F%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-773696%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-773696%22%20slang%3D%22en-US%22%3E%3CP%3EWe%20were%20able%20to%20upload%20a%20horizontal%20graphic%20and%20it%20displayed%20fine.%26nbsp%3B%26nbsp%3B%20Then%20days%20later%20it%20went%20to%20being%20cutoff.%26nbsp%3B%20Any%20idea%20why%20it%20did%20display%20correctly%20initially%3F%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1032440%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1032440%22%20slang%3D%22en-US%22%3E%3CP%3EYou%20can%20try%20to%20put%20your%20rectangular%20logo%20inside%20a%20white%20square%20box%2Caligned%20to%20the%20bottom%20and%20upload.%20This%20should%20create%20the%20illusion%20of%20a%20rectangular%20logo%20and%20this%20might%20be%20an%20easy%20temporary%20fix.hope%20helps%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1051318%22%20slang%3D%22en-US%22%3ERe%3A%20Company%20Logo%20looks%20terrible%20on%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1051318%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F9835%22%20target%3D%22_blank%22%3E%40Daniel%20Lentz%3C%2FA%3E%26nbsp%3B%20would%20you%20please%20elaborate%20how%20you%20have%20added%20image%20using%20custom%20theme%3F%20Since%20i%20have%20requirement%20to%20implement%20the%20same%20in%20SharePoint%202019%20.%20Thanks%20in%20advance.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Deleted
Not applicable

Our company logo is rectangular like most and looked fine on standard pages, but looks very odd on modern site pages. See examples. Are there settings to improve the rendering?

 

Below is a traditional page, followed by the modern page.

 

logogood.pnglogobad.png

 

27 Replies
Highlighted
Yes thanks. I mentioned earlier in the thread that I was working with the tenant owner to get the complany logo placed in the appropriate place.
Highlighted
Best Response
Solution

This is your best bet for branding SharePoint Online sites in O365 from my consulting experience and various clients. And this is coming from a former brand manager myself and a guy who's had to have the predictable debate with marketing/brand teams at various organizations about the 'limitations' of what SPO offers. Most needs of brand teams are wants, not needs. Unfortunately, the system provides restrictive needs, so sometimes you have to stay within those parameters. Hard to say "tough cookies", but sometimes it's the only thing to say.

 

Here goes:

  1. Always--always--add your company's logo to the suite bar and link it to whatever the most popular destination in your network is (usually your intranet home page). Since most logos are more horizontal than vertical, this should cover most companies' brand needs without sacrifice. Do it in PNG or GIF, transparent background, I generally like a white version of any logo on a darker background, but that's just me. This is also a major improvement for your overall navigation experience. Get lost in almost any O365 app? Simply go home!
  2. Change the suite bar color to your company's primary brand color.
  3. Have a 1:1 default branded icon for SPO sites.
  4. For the bigger sites in the network, provide 1:1 graphics that are specific to them, but follow a design motif. What I mean here is have a 1:1 'logo' for the HR, IT, Finance, Facilities, Accounting, Marketing, Production, Legal, etc. sites (and their related sub-sites if you have those). The reason for this recommendation is because you're not going to be able to quickly identify where you are from a generic icon that shows up literally everywhere in SPO. Plus, you know you're in your company's intranet; you don't need a constant reminder in a place that's actually customizable to be helpful in way-finding. Let #1 above do the brand reminding for you. (Note: You can go all out if you want and have one for every intranet and team site, but I'd steer clear of that maintenance mess if you're a big org.)

Looking at your situation specifically:

  1. Do #1 above. No question.
  2. Consider #2 above if your brand's color palette has an option that isn't obnoxious. Pretty sure it supports hex, so you can get exactly the hue your brand team requires.
  3. The flower in your logo is perfect for #3 above. Talk your brand people into it. If they can't be proud of using their logo's icon to meet a 1:1 need (what do they use for Twitter, Facebook, and LinkedIn, by the way?), then they shouldn't be proud of their logo. (Tough love, sorry! This seems like an obvious win to me.)
  4. Use the flower icon as the basis of these org icons mentioned in #4 above. Have the flower in the background (50% or more opacity) with shortened names/acronyms in front (100% opacity) to identify which site you're in at a glance.

Some gotchas to keep in mind:

  • If you do #1 or #2 above, you need to disable the ability to change the theme of individual sites [Ctrl+F 'Prevent users from overriding custom theming']. Unfortunately, when someone changes the theme (even just the color), it overwrites all of the effects of #1 and #2 in that site. Very annoying, but something you've gotta deal with.
  • I don't believe there's a way to set a default image, so you'll have to add the image with every created site (either through some sort of workflow, or include that part in the training for site owners). The default for new sites is the first letter of the first two words of the name, I believe. Which, similar to my comment above about easier identification of a site's name/purpose, was Microsoft's goal here.
  • There's no good way I know of to control the images site owners upload. So unless it's a headshot of Darth Vader, I'd say don't worry too much about it, especially on a team site, which should, in theory, have a smaller population to offend with a joke image anyway.

Hope this helps. 

Highlighted
Very helpful detail. We did, based on an earlier reply implement the logo in the O365 header area. As for the site logos/icons, we have been a little slow at that one, but your info is helpful in helping me decide on next steps
Highlighted

You can now use an SPFX webpart to get custom CSS onto any modern page.

 

I've used this to amend to logo div, and surrounding elements, to accommodate a larger logo.

 

This logo is hidden on mobile btw. 

 

It is mostly likely unsupported, given they might change the layout, but it works.

Highlighted

This probably is not the answer you are looking for because it requires modification of the logo.

 

I was told by a Microsoft Certified Master that the Classic Site was 180 X 64 and the Modern Site is 64 X 64 so he recommended changing the logo for Classic and Modern to be a 64 x 64 and it will look good when switching between classic and modern.

 

I agree with you that we should not have to conform to MS law for the company logo, but that worked for us.

Highlighted

We were able to upload a horizontal graphic and it displayed fine.   Then days later it went to being cutoff.  Any idea why it did display correctly initially? 

You can try to put your rectangular logo inside a white square box,aligned to the bottom and upload. This should create the illusion of a rectangular logo and this might be an easy temporary fix.hope helps

Highlighted

@Daniel Lentz  would you please elaborate how you have added image using custom theme? Since i have requirement to implement the same in SharePoint 2019 . Thanks in advance.