80

I've been working on a shiny app and would like to include a logo in the upper right corner of the app. How can I easily embed an image using shiny and r?

Thanks! K

kay
  • 2,110
  • 3
  • 14
  • 14

2 Answers2

113

I found another option that looks good for this app, so I'm sharing for others who want the image in the mainPanel.

mainPanel(
   img(src='myImage.png', align = "right"),
  ### the rest of your code
  )

Save the file in a www directory in the shinyApp directory:

 | shinyApp/
    | ui.R
    | server.R
    | www/
       | myImage.png
kay
  • 2,110
  • 3
  • 14
  • 14
  • 1
    Just a small update, If you want to resize the image cause it seems to be bigger than you expect, add : height="50%", width="50%" . So `img(src='myImage.png', height="50%", width="50%, align = "right")` – Corina Roca Jun 06 '23 at 19:11
23

Use a custom header function in ui.R to reference an app.css file in your www/ directory:

customHeaderPanel <- function(title,windowTitle=title){
  tagList(
    tags$head(
      tags$title(windowTitle),
      tags$link(rel="stylesheet", type="text/css",
                href="app.css"),
      tags$h1(a(href="www.someURLlogoLinksto.com"))
 )
 )
}

In app.css reference the logo file also located in your www/ folder:

h1 {
    text-decoration:none;
    border:0;
    width : 550px;
    height : 50px;
    margin : 0;
    padding : 0;
    left: 25px;
    top: 5px;
    position: relative;
    background : url(logo.png) no-repeat 0 0;
}
tcash21
  • 4,880
  • 4
  • 32
  • 39