# Logos and Images

> Add and customize logos, icons, and images in your project.

---

## Add your logo

By default, Docsy shows a site logo at the start of the navbar, that is, at the
extreme left. Place your project's SVG logo in `assets/icons/logo.svg`. This
overrides the default Docsy logo in the theme.

If you don't want a logo to appear in the navbar, then set site parameter
`navbar_logo` to `false` in your project's config:

<!-- prettier-ignore-start -->





<ul class="nav nav-tabs" id="tabs-0" role="tablist">
  <li class="nav-item">
      <button class="nav-link disabled"
          id="tabs-00-00-tab" data-bs-toggle="tab" data-bs-target="#tabs-00-00" role="tab"
          aria-controls="tabs-00-00" aria-selected="false">
        Configuration file:
      </button>
    </li><li class="nav-item">
      <button class="nav-link active"
          id="tabs-00-01-tab" data-bs-toggle="tab" data-bs-target="#tabs-00-01" role="tab"
          data-td-tp-persist="toml" aria-controls="tabs-00-01" aria-selected="true">
        hugo.toml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-00-02-tab" data-bs-toggle="tab" data-bs-target="#tabs-00-02" role="tab"
          data-td-tp-persist="yaml" aria-controls="tabs-00-02" aria-selected="false">
        hugo.yaml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-00-03-tab" data-bs-toggle="tab" data-bs-target="#tabs-00-03" role="tab"
          data-td-tp-persist="json" aria-controls="tabs-00-03" aria-selected="false">
        hugo.json
      </button>
    </li>
</ul>

<div class="tab-content" id="tabs-0-content">
    <div class="tab-pane fade"
        id="tabs-00-00" role="tabpanel" aria-labelled-by="tabs-00-00-tab" tabindex="0">
        <pre tabindex="0"><code></code></pre>
    </div>
    <div class="tab-pane fade show active"
        id="tabs-00-01" role="tabpanel" aria-labelled-by="tabs-00-01-tab" tabindex="0">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">ui</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="nx">navbar_logo</span> <span class="p">=</span> <span class="kc">false</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-00-02" role="tabpanel" aria-labelled-by="tabs-00-02-tab" tabindex="0">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">ui</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">navbar_logo</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-00-03" role="tabpanel" aria-labelled-by="tabs-00-03-tab" tabindex="0">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;params&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;ui&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="nt">&#34;navbar_logo&#34;</span><span class="p">:</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
    </div>
</div>

<!-- prettier-ignore-end -->

For information about styling your logo, see [Styling your project logo and
name][].

[Styling your project logo and name]:
  /docs/content/lookandfeel/#styling-your-project-logo-and-name

## Use icons

Docsy includes the free FontAwesome icons by default, including logos for sites
like GitHub and Stack Overflow. You can view all available icons in the
[FontAwesome documentation](https://fontawesome.com/icons/), including the
FontAwesome version when the icon was added and whether it is available for free
tier users. Check Docsy's
[`package.json`](https://github.com/google/docsy/blob/main/package.json) and
release notes for Docsy's currently included version of FontAwesome.

You can add FontAwesome icons to your
[navbar](/docs/content/navigation/#adding-icons-to-the-navbar),
[side nav](/docs/content/navigation/#adding-icons-to-the-side-nav), or anywhere
in your text.

## Add your favicons

The easiest way to do this is to create a set of favicons via
[cthedot.de/icongen](https://cthedot.de/icongen) (which lets you create a huge
range of icon sizes and options from a single image) and/or
[https://favicon.io](https://favicon.io), and put them in your site project's
`static/favicons` directory. This will override the default favicons from the
theme.

Note that [favicon.io](https://favicon.io) doesn't create as wide a range of
sizes as Icongen but _does_ let you quickly create favicons from text: if you
want to create text favicons you can use this site to generate them, then use
Icongen to create more sizes (if necessary) from your generated `.png` file.

If you have special favicon requirements, you can create your own
`layouts/_partials/favicons.html` with your links.

## Add images

### Landing pages

Docsy's [`blocks/cover` shortcode](/docs/content/shortcodes/#blocks-cover) makes
it easy to add cover images (also known as hero images) to landing pages. The
shortcode looks for an image with the word "background" in the name within the
landing page's [page bundle](adding-content/#page-bundles).

For example, the example site's landing page `content/en/_index.md` uses the
image `content/en/featured-background.jpg`, which is in the same directory --
see the [content/en][] folder on GitHub.

[content/en]: https://github.com/google/docsy-example/tree/main/content/en

Use the block's [`height` parameter][] to set the preferred display height of
the cover container (and therefore its image). For a full viewport height, use
`full`, along with the `td-below-navbar` helper class to position the cover
below the navbar:

[`height` parameter]: shortcodes/#blocks

```go-html-template
{{% blocks/cover
  title="Welcome to Docsy!"
  image_anchor="top"
  height="full td-below-navbar"
%}}
...
{{% /blocks/cover %}}
```

For a shorter image, as in the [example site's About][] page, use one of `min`,
`med`, `max`, or `auto` (the image's natural height):

```go-html-template
{{% blocks/cover
  title="About the Docsy Example"
  image_anchor="bottom"
  height="min td-below-navbar"
%}}
...
{{% /blocks/cover %}}
```

[example site's About]: <https://example.docsy.dev/about/>

### Other pages

To add inline images to other pages, use the
[`imgproc` shortcode](/docs/content/shortcodes/#imgproc). Alternatively, if you
prefer, just use regular Markdown or HTML images and add your image files to
your project's `static` directory. You can find out more about using this
directory in
[Adding static content](/docs/content/adding-content/#adding-static-content).
