Insert a logo in upper right corner of R markdown html document

The accepted answer works if you are using classical html output. If like me, you also work with bookdown, the logo need to appear on every pages. So, in case somebody find this answer but want to add a logo with bookdown, I give my proposition:

• We need to create an external file with a script to be called in header, thankfully we can create it directly in the rmarkdown script.
• We also use htmltools::img to allow including the image without external image file.

Here is my rmarkdown script to be used as an example:

---
title: "Logo with Bookdown"
author: "Author"
date: '`r format(Sys.time(), "%d %B, %Y")`'
output:
  bookdown::gitbook:
    includes:
      in_header: header.html
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{r htmlTemplate, echo=FALSE}
# Create the external file
img <- htmltools::img(src = knitr::image_uri(file.path(R.home("doc"), "html", "logo.jpg")), 
               alt = 'logo', 
               style = 'position:absolute; top:50px; right:1%; padding:10px;z-index:200;')

htmlhead <- paste0('
<script>
document.write(\'<div class="logos">',img,'</div>\')
</script>
')

readr::write_lines(htmlhead, path = "header.html")

```

# Page 1

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:

```{r cars}
summary(cars)
```

# Page 2

You can also embed plots, for example:

```{r pressure, echo=FALSE}
plot(pressure)
```

Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.

You can use htmltools::img with a little inline CSS for positioning. src can take a path directly, but when images aren't just handled like plots, sometimes knitting fails to convert images to a URI properly, which in turn causes them to fail to render. Using self_contained: false in the YAML is a quick solution, but it's not much harder to use knitr::image_uri to manually convert the image:

---
title: "Title"
author: "Author"
output: html_document
---


```{r, echo=FALSE}
htmltools::img(src = knitr::image_uri(file.path(R.home("doc"), "html", "logo.jpg")), 
               alt = 'logo', 
               style = 'position:absolute; top:0; right:0; padding:10px;')
```

---

# 1. Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

I took a quite different approach to the answers above, using only CSS and without absolute positioning. I added the following CSS code chunk to my document, but you can also create a standalone CSS file and include that in the Rmd YAML header.

```{css, echo=FALSE}
#header {
  background-image: url("data: BASE64 encoded string for image");
  background-repeat: no-repeat;
  background-position: 95%;
  padding: 5px;
}
#header > * {
  max-width: calc(100% - 225px);
}
@media only screen and (max-width:600px){
#header > .title { 
  margin-top: 105px;
}
#header > *
  max-width: 100%;
}
#header {
  background-position: 10px 10px;
}
}
```

There's a few things going on here. To address the original question about the image, you need to base64 encode the image yourself and put the string into the background-image URL.

It also handles the issue of overlap of logo and header content in a reactive way, setting max-width on all header elements, and placing the logo above the title on narrow windows (less than 600px).

If you don't care about overlap at all, then you only really need the first #header selector code. If you don't care about the narrow device reactive layout then you can keep the first two selectors and drop the @media block.

The two pixel values 225px and 105px are based on my logo, and will need to be changed to fit your image plus some padding.