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
is it not possible to have a logo that fits better in modern team sites?
Highlighted
If you're suggesting we change our company branding to fit SharePoint branding...no. That's backwards.
Highlighted

But what Juan says is the situation at this moment in Modern Pages. And i guess it is not going to change

Highlighted

Placing the logo and make it look good is not a new issue, it has been arround. The themes are not very flexible on that part. But i kind of embraced the smaller placeholder and started to replace the full horizontal logo with only a part of it. 

 

- I started theming the tenant and put the logo at the top, this way it will never be hidden

- the logotype can be clicked an take you to the primary page, ie. Intranets first page

- i then cut out the E in the original logo and used that as logo in every page.

 

I know that not everyone has a logo they can do that. In some cases i used graphic illustrations instead. Only thing is that i would like to get rid of those pesky lines around the picture.

 

/regards Daniel

 

modern-pages.jpg

Highlighted

We followed similar to @Daniel Lentz & works for us

Highlighted
No, I'm not suggesting that :-)...if the rectangular logo appearance is a problem why not having a square logo that follows your branding guidelines and at the same time looks good in SPO...what it's true is that the norm in many places in Office 365 is to use a square logo and some corporate logos are going to look good and other no...of course, we could ask Microsoft to have the flexibility of being able to use square or rectangular logos, but I don't see this is something we are going to have soon
Highlighted
Yeap, that's exactly what I mean Paul!
Highlighted
This approach is a very good workaround...but again, It really depends on company branding guidelines the possibility to follow this approach or a similar one
Highlighted

Have you tried changing SiteAssets/__siteIcon__.jpg directly?

Highlighted

@Deleted wrote:

Have you tried changing SiteAssets/__siteIcon__.jpg directly?


Not clear what you mean. I do not see this paricular JPG, but this is the folder where I have placed our company logo.

 

Highlighted

Well I looked at styling the logo and if I can get the CSS styles below onto a Modern Site Page I will be good. But I noticed there is no convenient webpart for embedding code on these type of pages (the Embed webpart is only for iframes). I will look at SharePoiint Designer and see if there is a place to insert the styles.  

 

 

.ms-siteLogo-defaultLogo:hover, .ms-siteLogo-defaultLogo:visited{

	width: 200px;
	overflow: visible;
}



.ms-siteLogo-actual {
	width: 200px;

}

 

 

Highlighted

No luck using SharePoint Designer. Any Styles added to the modern page or any Stylesheets linked to it don't appear to come through.

Highlighted

That slots not for a company logo, it's the icon for the site, used in many other places such as sharepoint home, mobile app and so forth.

 

Company Logo should be in your overall Office 365 branding, so appearing in the Green Bar above your site.

Highlighted

Thanks for this info. I will research it. We used the Site logo slot for years. I will have to see if I have access to put a logo in the proper place.

 

Highlighted

Found the info on Office 365 Themes:

https://support.office.com/en-us/article/Customize-the-Office-365-theme-for-your-organization-8275da...

 

Unfortunately, this screen isn't accessible to me in the Admin (I have just the SharePoint admin screens) so I will now begin the process of getting permissions or have someone else do it for me.

 

Highlighted

If you uploaded a square image with your company logo (rather than a rectangular image) I'm sure it would look better (because the destination image is square shaped).

Highlighted

To me, it feels like the term "Logo" is misappropriated in the branding area for a modern site.  It would be more appropriate to refer to it as an "Icon" or a "Bug".

 

Logos are usually official company identity items that have specific utilization requirements around them.  Many times organizations or brands have horizontally-organized and vertically-organized versions.  They often contain the identity element, company name, and a tag line.  They aren't useful when reduced down to a small size.

 

The modern SharePoint environment is using a small square icon to identify a specific site or content area throughout the Office 365 ecosystem.  As a result the traditional logo does not render well for this use.  You need something that is easy to identify that defines the purpose of the site, so when it is used in the new SharePoint home, people have a great visual que as to its purpose.large3TOTW1M1.png 

Using a detailed company or product logo in the examples shown here, in the Modern SharePoint Home, isn't going to help your users navigate quickly to the right thing.  But using an icons like the following is:

Book = knowledgebase (here's an example I'm messing around with for this purpose)  Intranet.png

Airplane = Travel and expenses

Megaphone = News

Money = Benefits & Pay

 

Put your corporate logo in to brand your overall tenant, and it will show-up throughout the ecosystem appropriately centered in the O365 primary nav bar.  Then you don't have to reuse it anywhere again.  Use the other branding opportunities as more focused, to brand the specific content area.

large.png

There was a good session at Ignite that goes through all your options. LINK HERE  

 

 

Highlighted
If the intention is to have the company logo on all pages, I would suggest using the Office 365 organisation profile settings to place it in the centre in the Suite bar so it shows in all services. Use the site logo to reflect the content of that site as mentioned before in the form of an icon or bug

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.