# Overview
Favicons improve user experience and enforce brand consistency.[1] They are typically applied via the link element within the head element. [2] [3]
```
<head>
<link rel="icon" href="/favicon.ico">
</head>
```
**Goal**: Replace the existing Wikimedia logo favicon [4] [5] on the [[ https://doc.wikimedia.org/codex/latest/ | Codex docs site ]] with the Codex logo.
References:
1. https://developer.mozilla.org/en-US/docs/Glossary/Favicon
2. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/link#providing_icons_for_different_usage_contexts
3. https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#adding_custom_icons_to_your_site
4. https://gerrit.wikimedia.org/r/plugins/gitiles/integration/docroot/+/refs/heads/master/shared/favicon.ico
5. https://gerrit.wikimedia.org/r/plugins/gitiles/integration/docroot/+/refs/heads/master/shared/WikimediaUiThemePageBase.php#30
## Acceptance criteria
[] Determine what favicon types (`.svg`, `.ico`, `.png`) and sizes are needed.
- This [[ https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs | article ]] covers the different format types and tools used to create favicons.
- Optional: consider using a web application manifest: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest
[] Add the favicon file(s) to the `/codex-docs/doc/public` folder.
[] Add favicon to the Codex docs site via `head` VitePress configuration: https://vitepress.dev/reference/site-config#example-adding-a-favicon
[] Ensure the favicon is visible on major browsers, light/dark appearance