54 lines
2.1 KiB
Markdown
54 lines
2.1 KiB
Markdown
|
---
|
||
|
|
title: Theming
|
||
|
|
date: 2021-05-23T20:00:00+01:00
|
||
|
|
authors:
|
||
|
|
- john-doe
|
||
|
|
tags:
|
||
|
|
- Documentation
|
||
|
|
- Features
|
||
|
|
---
|
||
|
|
|
||
|
|
Personalize the look of your site.
|
||
|
|
|
||
|
|
<!--more-->
|
||
|
|
|
||
|
|
{{< toc >}}
|
||
|
|
|
||
|
|
## Favicons
|
||
|
|
|
||
|
|
The Theme is shipped with a set of default Favicons in various formats generated by a [Favicon Generator](https://realfavicongenerator.net/). All files can be found in the `static/favicon` folder of the release tarball. To make the replacement of the default Favicons as simple as possible, the theme loads only a very small subset of the Favicon formats.
|
||
|
|
|
||
|
|
<!-- prettier-ignore -->
|
||
|
|
```tpl
|
||
|
|
<link rel="icon" type="image/svg+xml" href="{{ "favicon/favicon.svg" | relURL }}">
|
||
|
|
<link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon/favicon-32x32.png" | relURL }}">
|
||
|
|
<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon/favicon-16x16.png" | relURL }}">
|
||
|
|
```
|
||
|
|
|
||
|
|
### Simple replacement
|
||
|
|
|
||
|
|
The minimal steps to load a custom Favicon is to overwrite tree default Favicon files. Therefor place these files into your projects root folder:
|
||
|
|
|
||
|
|
- `static/favicon/favicon.svg`
|
||
|
|
- `static/favicon/favicon-32x32.png`
|
||
|
|
- `static/favicon/favicon-16x16.png`
|
||
|
|
|
||
|
|
### Full replacement
|
||
|
|
|
||
|
|
If you want to add more Favicon formats you have to [overwrite](https://gohugo.io/templates/partials/#partial-template-lookup-order) the default partial that is used to load the files. In the next step you have to place the required files in the `static` folder of your project as well.
|
||
|
|
|
||
|
|
**Example:**
|
||
|
|
|
||
|
|
<!-- prettier-ignore -->
|
||
|
|
```tpl
|
||
|
|
<!-- layouts/partials/head/favicons.html -->
|
||
|
|
<link rel="icon" type="image/svg+xml" href="{{ "favicon/favicon.svg" | relURL }}">
|
||
|
|
<link rel="apple-touch-icon" sizes="180x180" href="{{ "favicon/apple-touch-icon.png" | relURL }}">
|
||
|
|
<link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon/favicon-32x32.png" | relURL }}">
|
||
|
|
<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon/favicon-16x16.png" | relURL }}">
|
||
|
|
<link rel="manifest" href="{{ "favicon/site.webmanifest" | relURL }}">
|
||
|
|
<link rel="mask-icon" href="{{ "favicon/safari-pinned-tab.svg" | relURL }}" color="#2f333e">
|
||
|
|
<meta name="msapplication-TileColor" content="#2f333e">
|
||
|
|
<meta name="theme-color" content="#2f333e">
|
||
|
|
```
|