mirror of
https://github.com/alrayyes/wiki.git
synced 2024-11-26 05:19:01 +00:00
docs(config.md): Fixed multi-favicon examples and general favicon explanation throughout
This commit is contained in:
parent
997937af5a
commit
7070a1992a
1 changed files with 30 additions and 8 deletions
|
@ -25,23 +25,29 @@ links: # Links to show in footer
|
||||||
|
|
||||||
### HTML Favicons
|
### HTML Favicons
|
||||||
|
|
||||||
A Favicon is most commonly seen preceding the URL in a browser. Some
|
A Favicon is most commonly seen as the **image preceding the URL in a browser**.
|
||||||
other examples include (but are not limited to) bookmarks, search history, and
|
Some other examples include (but are not limited to) bookmarks, search history,
|
||||||
app icons (i.e. "save page to homescreen" on mobile devices). [File format support](https://en.wikipedia.org/wiki/Favicon#File_format_support)
|
and app icons (i.e. "save page to home screen" on mobile devices).
|
||||||
and the [use of favicons](https://en.wikipedia.org/wiki/Favicon#Use_of_favicon) differ
|
[File format support](https://en.wikipedia.org/wiki/Favicon#File_format_support)
|
||||||
across the combination of platforms and browsers.
|
and the [use of favicons](https://en.wikipedia.org/wiki/Favicon#Use_of_favicon)
|
||||||
|
differ across the combination of platforms and browsers.
|
||||||
|
|
||||||
If you would like to customize the favicons of your website, you can add them to the `data/config.yaml` file. The **default** without any set `favicon` key is:
|
If you would like to customize the favicons of your quartz-based website, you
|
||||||
|
can add them to the `data/config.yaml` file. The **default** without any set
|
||||||
|
`favicon` key is:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<link rel="shortcut icon" href="icon.png" type="image/png">
|
<link rel="shortcut icon" href="icon.png" type="image/png">
|
||||||
```
|
```
|
||||||
|
|
||||||
The default can be overridden by defining a value to the `favicon` key in your `data/config.yaml` file. Here is a `List[Dictionary]` example format, which is equivalent to the default:
|
The default can be overridden by defining a value to the `favicon` key in your
|
||||||
|
`data/config.yaml` file. Here is a `List[Dictionary]` example format, which is
|
||||||
|
equivalent to the default:
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
favicon:
|
favicon:
|
||||||
- { rel: "shortcut icon", href: "icon.png", type: "image/png" }
|
- { rel: "shortcut icon", href: "icon.png", type: "image/png" }
|
||||||
|
# - { ... } # Repeat for each additional favicon you want to add
|
||||||
```
|
```
|
||||||
|
|
||||||
In this format, the following keys are available:
|
In this format, the following keys are available:
|
||||||
|
@ -50,18 +56,34 @@ In this format, the following keys are available:
|
||||||
- `href` (optional): The `href` attribute of the `<link>` tag.
|
- `href` (optional): The `href` attribute of the `<link>` tag.
|
||||||
- `sizes` (optional): The `sizes` attribute of the `<link>` tag.
|
- `sizes` (optional): The `sizes` attribute of the `<link>` tag.
|
||||||
|
|
||||||
If you plan to add multiple favicons generated by a website, it may be easier to define it as HTML:
|
If you plan to add multiple favicons generated by a website (see list below), it
|
||||||
|
may be easier to define it as HTML. Here is an example which appends the
|
||||||
|
**Apple touch icon** to quartz's default favicon:
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
favicon: |
|
favicon: |
|
||||||
<link rel="shortcut icon" href="icon.png" type="image/png">
|
<link rel="shortcut icon" href="icon.png" type="image/png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||||
```
|
```
|
||||||
|
|
||||||
|
This second favicon will now be used as a web page icon when someone adds your
|
||||||
|
webpage to the home screen of their Apple device. If you are interested in more
|
||||||
|
information about the current, and past, standards of favicons, you can read
|
||||||
|
[this article](https://www.emergeinteractive.com/insights/detail/the-essentials-of-favicons/).
|
||||||
|
|
||||||
Some websites that **generate favicons** for you (ordered alphabetically) include:
|
Some websites that **generate favicons** for you (ordered alphabetically) include:
|
||||||
- [`favicon.io`](https://favicon.io/)
|
- [`favicon.io`](https://favicon.io/)
|
||||||
- [`realfavicongenerator.net`](https://realfavicongenerator.net/)
|
- [`realfavicongenerator.net`](https://realfavicongenerator.net/)
|
||||||
- [`www.favicon.cc`](https://www.favicon.cc/)
|
- [`www.favicon.cc`](https://www.favicon.cc/)
|
||||||
|
|
||||||
|
These sites will take a base image and generate a set of favicons for you,
|
||||||
|
one of which will be, for example, the `apple-touch-icon` favicon. These sites
|
||||||
|
will often **also provide the HTML** for the favicon, which can be simply
|
||||||
|
added to the `data/config.yaml` using the HTML format of the `favicon`
|
||||||
|
argument.
|
||||||
|
|
||||||
|
**Note** that all generated favicon paths, defined by the `href`
|
||||||
|
attribute, are relative to the `static/` directory.
|
||||||
|
|
||||||
### Graph View
|
### Graph View
|
||||||
To customize the Interactive Graph view, you can poke around `data/graphConfig.yaml`.
|
To customize the Interactive Graph view, you can poke around `data/graphConfig.yaml`.
|
||||||
|
|
Loading…
Reference in a new issue