这里有几个选项，我将概述其中两个

1.使用CSS伪元素before

以下代码段将在第一个TOC元素的正上方和TOC框内添加stackoverflow徽标：

<style>
#TOC {
  background: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a");
  background-size: contain;
  padding-top: 80px !important;
  background-repeat: no-repeat;
}
</style>

在这里，您必须根据您的徽标调整padding-top的定义。结果大致如下：

2.在TOC列中添加新的DOM元素

另一种方法是首先使用jQuery添加一个包含图像的新DOM元素：

<script>
  $(document).ready(function() {
    $('#TOC').parent().prepend('<div id=\"nav_logo\"><img src=\"https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a\"></div>');
  });
</script>

在这里，当文档完成加载后，我们选择id为TOC的元素，然后向上移动到其父元素（列div），然后在前面添加一个新的id为nav_logo的div，其中包含图像。听起来比实际要复杂得多。现在我们只需要再用一些CSS编辑这个新div的样式：

<style>
#nav_logo {
  width: 100%;
  margin-top: 20px;
}
</style>

生成的文档如下所示：

有关CSS的详细信息，我会让你参考大型搜索引擎，而这些搜索引擎很可能会让你参考https://www.w3schools.com。
如果我不得不选择，我会选择第二次尝试。伪元素在浏览器中并不总是可靠的。而且它看起来也更好：）

要在解决方案（#2）中启用滚动时随TOC浮动的徽标，请使用jQuery将包含图像的nav_logo DOM元素从@Martin Schmelzer前置到TOC：

<script>
  $(document).ready(function() {
    $('#TOC').parent().prepend('<div id=\"nav_logo\"><img src=\"https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a\"></div>');
  });
</script>

然后在CSS中将position: fixed添加到nav_logo，将margin-top: 100px添加到TOC：

<style>
#TOC {
  margin-top: 100px;
}
#nav_logo {
  position: fixed;
  width: 20%;
  margin-top: 20px;
}
</style>

必要时调整nav_logowidth。