Adding a company Logo to ShinyDashboard header

Question

So just curious, is there any way to add a company logo to the header of a ShinyDashboard? As I am looking at the documentation, it describes changing the "logo" in the CSS, this is just configuring what goes in the upper left hand corner though as far as I can tell and I would like to keep my title there.

I am not using the drop down menus and so I would like to add my company logo on the top right where the red box is.

enter image description here

Does anyone have any idea how this can be done with Shinydashboard? Thanks.

Update 2020-10-27

For users that are comfortable with HTML or want more flexibility around their user interface and have access to a front end developer, I recently discovered you can use HTML to build the entire user interface. There is a Shiny article about it here. This would allow the entire branding and layout to be done in a way that could comply with your company standards if desired. Hope this helps.

This might help. http://stackoverflow.com/questions/21996887/embedding-image-in-shiny-app — Shiva, Jul 15 '15 at 20:50
For future readers: [Here](https://stackoverflow.com/a/70687027/9841389) is another approach for centered images using `htmltools::tagQuery`. — ismirsehregal, Jan 25 '22 at 15:15

Shape · Accepted Answer · 2016-05-31T23:36:57.587

I've been working with a bit of a hack for this, (and I know you didn't ask for it, but here's a clickable logo while we're at it):

library(shiny)
library(shinydashboard)

dbHeader <- dashboardHeader()
dbHeader$children[[2]]$children <-  tags$a(href='http://mycompanyishere.com',
                                           tags$img(src='logo.png',height='60',width='200'))

dashboardPage(
       dbHeader,
       dashboardSidebar(),
       dashboardBody()
)

So this nests a shiny.tag inside the header. The second slot in this particular shiny object is the logo slot (You'll need a 'logo.png' in your /www/ folder in the app directory)

EDIT:

I just checked, and as of right now, this hack should no longer be necessary, you can insert the html directly from the dashboardHeader function via the title= parameter, (Before, that parameter was enforcing text only),

I think the answer might still be useful as a method to modify existing shiny functions where things ARE hardcoded in though.

Here's the method now:

dashboardPage(
    dashboardHeader(title = tags$a(href='http://mycompanyishere.com',
                                    tags$img(src='logo.png')))

or, adding a little more magic to the logo (I also use my logo as a loading bar):

# Takes a location 'href', an image location 'src', a loading gif 'loadingsrc'
# height, width and alt text, and produces a loading logo that activates while
# Shiny is busy
loadingLogo <- function(href, src, loadingsrc, height = NULL, width = NULL, alt = NULL) {
  tagList(
    tags$head(
      tags$script(
        "setInterval(function(){
                     if ($('html').attr('class')=='shiny-busy') {
                     $('div.busy').show();
                     $('div.notbusy').hide();
                     } else {
                     $('div.busy').hide();
                     $('div.notbusy').show();
           }
         },100)")
  ),
  tags$a(href=href,
         div(class = "busy",  
             img(src=loadingsrc,height = height, width = width, alt = alt)),
         div(class = 'notbusy',
             img(src = src, height = height, width = width, alt = alt))
   )
  )
}

dashboardBody(
  dashboardHeader(title = loadingLogo('http://mycompanyishere.com',
                                      'logo.png',
                                      'loader.gif'),
  dashboardSidebar(),
  dashboardBody()
)

That's all going to be css styling. There are two ways to do that, one is to wrap the children in tags$style(..). The other (And probably preferred method), would be to create a custom.css file and put it in your /www/ folder. Then call it with `tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")` . Inside the stylesheet just add `.logo {ALIGNMENTPARAMS: VALUE;}` where you can find the names of the parameters and values via google. — Shape, Oct 29 '15 at 15:00
@Shape with shiny 0.13.2 and shinydashboard 0.5.1 the solution doesn't seem to work: I get `the server responded with a status of 404 (Not Found)` — Enzo, Apr 17 '16 at 18:32
@Enzo those are the versions I have, and it still works for me, make sure the link is right and the logo.png is in your www folder — Shape, Apr 19 '16 at 13:43
404 sounds like something different though, that sounds like there's an issue with your hosting — Shape, Apr 19 '16 at 14:23
I discovered the issue: you need to have separate ui.R and server.R files, otherwise if you are using all in a single app.R file with shinyApp(ui, server), it does not "find" the logo.png file in the www folder (but it does find my favicon.ico - boh?). — Enzo, Apr 20 '16 at 12:17

score 43 · Answer 2 · answered Dec 14 '16 at 14:55

Here's my hack (put your logo, as has been mentioned before, into a www subdirectory of your app directory).
Because dashboardHeader() expects a tag element of type li and class dropdown, we can pass such elements instead of dropdownMenus:

library(shiny)
library(shinydashboard)

dbHeader <- dashboardHeader(title = "My Dashboard",
                            tags$li(a(href = 'http://shinyapps.company.com',
                                      icon("power-off"),
                                      title = "Back to Apps Home"),
                                    class = "dropdown"),
                            tags$li(a(href = 'http://www.company.com',
                                      img(src = 'company_logo.png',
                                          title = "Company Home", height = "30px"),
                                      style = "padding-top:10px; padding-bottom:10px;"),
                                    class = "dropdown"))

server <- function(input, output) {}

shinyApp(
    ui = dashboardPage(
        dbHeader,
        dashboardSidebar(),
        dashboardBody()
    ),
    server = server
)

If someone doesn't need it to be clickable - I suggest changing `a()` for `div()` and adding `margin-right:10px;` to the style parameter. — vladli, Nov 27 '18 at 09:56
Due to recent rule change in browser processing, minor change is required to the img. Change `img(src=...)` to `tags$img(src=...)`. — YBS, Oct 16 '20 at 17:34

Adding a company Logo to ShinyDashboard header

2 Answers2

Linked