If you hava a Shiny app with a sidebar layout there is no easy way to add one or more company logos to the top of the page. You can add a title with the function titlePanel(), that accepts only strings as argument. This function places a h2 tag on the top of the page.

The idea is to replace this tag with appropriate HTML code. To replace the h2 tag I use the jQuery function replaceWith(). Because the needed code can be very long, I created a separate JavaScript file. The file is added to the shiny app with the function includeScript().

Make sure to define max-width for the sidebar in ui.R file:

## shiny app to demonstrate placing multiple company logos in the top of the page
library(shiny)

shinyUI(fluidPage(

  titlePanel("Company Logos"), # outputs h2 tag

  sidebarLayout(
    sidebarPanel(
      tags$head(
        ## define max-width of sidebar panel
        tags$style(type='text/css', ".col-sm-4 { max-width: 270px; margin-top: 41px;}"),
        includeScript("www/script.js")
      ),
      uiOutput("sidebar")
    ),

    mainPanel(
      tabsetPanel(
        tabPanel("tab1", htmlOutput("tab1")),
        tabPanel("tab2", htmlOutput("tab2")),
        tabPanel("tab3", htmlOutput("tab3"))
      )
  ))
))

The server.R file

library(shiny)

shinyServer(function(input, output) {

   output$sidebar <- renderUI({
     HTML('Sidebar')
   })
   output$tab1 <- renderUI({
    HTML('<h4>Source Code and Explanation:</h4>
         <a href="https://candrea.ch/blog/adding-multiple-company-logos-to-shiny-app/">
         candrea.ch/blog/adding-multiple-company-logos-to-shiny-app/</a>
         ')
  })
})

And finaly the script.js file. Please note the css rules for each div tag.

$( document ).ready(function() {

    var divstart = '<div style="width: 100%; display: table;">' +
	                 '<div style="display: table-row">';
    
    // same with as sidebar, ie. 270px
    var logoLeft = '<div style="width: 270px; display: table-cell;position:relative;float:left">'+
	                 '<a href="https://5c.careers/" target="_blank">' +
	                 '<img src="logoleft.jpg" height="75" align="left"></a></div>';

    var logoRight = '<div style="display: table-cell;position:relative;float:left;width:66\%">' +
	                  '<a href="https://www.phsz.ch/" target="_blank">' +
	                  '<img src="logoright.jpg" height="60" align="right" style="margin-top:10px"></a></div>';

    var divend = '</div></div>';

    $( "h2" ).replaceWith( divstart + logoLeft + logoRight + divend );
});

You can find the shiny app here: https://phsz.shinyapps.io/Shiny_Company_Logo/

Happy Logoing!