How to add logo in flexdashboard?

Question

I am trying to add company logo in flexdashboard. As mentioned in official page , we need to give a path of image and i am doing the same as given below , but not able to bring logo in dashboard. Want to know , how to bring logo in flexdashboard and additionally how to add custom color in top bar of dashboard.

---
title: "Dashboard"
output: 
  flexdashboard::flex_dashboard:
    logo: C:/Users/Gaurav/Desktop/Test/www/BoA1.png
    vertical_layout: scroll
    orientation: rows
    theme: cosmo
    runtime: shiny
---

flexdashboard Given is the screenshot of dashboard and highlighted is the logo which is not working properly.

Answer 1

For the logo, you may need to resize the image (magick package can help) so that it is the correct dimention:

No scaling is performed on the logo image, so it should fit exactly within the dimensions of the navigation bar (48 pixels high for the default “cosmo” theme, other themes may have slightly different navigation bar heights)

https://rmarkdown.rstudio.com/flexdashboard/using.html#logo__favicon

For the navbar color, you need to customize appearance using a css file. See https://rmarkdown.rstudio.com/flexdashboard/using.html#css_styles

If you want to customize these colors you should create a CSS stylesheet with the requisite navbar-inverse entries and include it using the css option of the flex_dashboard format.

• add a custom css custom.css with

.navbar-inverse {
   background-color: <your color>;
}

• include this css file in the yaml header

title: "Custom CSS"
output: 
  flexdashboard::flex_dashboard:
    css: custom.css

Answer 2

Seems to me you need to include a relative path and not an absolute path. Out of some reason R doesn't go well with absolute paths.

On my setup:

this will result in broken image

---
title: "Dashboard"
output: 
  flexdashboard::flex_dashboard:
    logo: C:/Users/thatsme/MYPROJECT/www/myimage.png
---

this image will show properly

---
title: "Dashboard"
output: 
  flexdashboard::flex_dashboard:
    logo: www/myimage.png
---

The path needs to be relative to the working directory of the project (normally where the .proj-file is). If you don't know, what the working directory is, put getwd() into the console.