docs: add favicon
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	lwatson
	Jul 1 2025, 9:44 PM

Project Tags

Referenced Files

	F63844181: Screenshot 2025-07-10 at 9.57.30 PM.png
	Jul 11 2025, 2:19 AM

	F63844182: Screenshot 2025-07-10 at 9.57.49 PM.png
	Jul 11 2025, 2:19 AM

	F63833065: Codex.svg
	Jul 11 2025, 12:27 AM

Subscribers

Description

Overview

Favicons improve user experience and enforce brand consistency.[1] They are typically applied via the link element within the head element. [2]

<head>
<link rel="icon" href="/favicon.ico">
</head>

Goal: Replace the existing Wikimedia logo favicon [3] [4] on the Codex docs site with the Codex logo.

References:

Acceptance criteria

Determine what favicon types (.svg, .ico, .png) and sizes are needed.
- This 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

Details

Related Changes in Gerrit:

Subject	Author	Repo	Branch	Lines +/-
Update Codex from v2.2.0 to v2.2.1	Catrope	mediawiki/core	master	+175 -111
docs: add favicon types	LWatson	design/codex	main	+8 -3
docs: add favicon	LWatson	design/codex	main	+11 -0

Customize query in gerrit

Event Timeline

lwatson created this task.Jul 1 2025, 9:44 PM

Restricted Application added a project: Design-System-Team. · View Herald TranscriptJul 1 2025, 9:44 PM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Change #1165610 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] [PoC] docs: add favicon

https://gerrit.wikimedia.org/r/1165610

gerritbot added a project: Patch-For-Review.Jul 1 2025, 9:58 PM

Volker_E awarded a token.Jul 3 2025, 6:44 AM

Volker_E subscribed.

@lwatson is this something you are working on? Can we mark it In Progress or Code Review on the board and assign yourself?

@DTorsani-WMF I can continue working on this. I initially wrote up a ticket and submitted a proof-of-concept patch because I don't have the proper favicon size and formats. Favicons are typically 16-pixel square icons (eg. 32x32, 16x16). Volker provided feedback, and the patch is no longer a proof-of-concept. This demo includes a 20x20 SVG icon (a blue version of cdxIconLogoCodex). The SVG favicon is supported in FireFox and Chrome.

What's next?

Update the favicon.svg from 20x20 to 32x32 SVG
Add a 16x16 or 32x32 favicon.ico to support most browsers. If a 32x32 size is used, then ensure that it can scale down well enough to 16x16.

Okay great, sounds good. Do you need anything from design or anyone else to continue this work?

DTorsani-WMF assigned this task to lwatson.Jul 10 2025, 2:50 PM

DTorsani-WMF triaged this task as Low priority.

DTorsani-WMF moved this task from Backlog to In Progress on the Codex board.

@DTorsani-WMF I assume the favicon asset should live in Figma, so I'll need help creating the 32x32 SVG and adding it to Figma. I haven't looked into this yet to do it myself

I'm not sure an entire set needs to live in Figma. Since it is just the Codex logo in blue, that can be easily created and exported any time we need a new one. For now, here is the 32x32 SVG file. Let me know if you need anything else.

Codex.svg1 KBDownload

Change #1165610 merged by jenkins-bot:

[design/codex@main] docs: add favicon

https://gerrit.wikimedia.org/r/1165610

Maintenance_bot removed a project: Patch-For-Review.Jul 11 2025, 1:31 AM

Thanks @DTorsani-WMF - I'll open a follow-up patch using the image you provided. I tried resizing the Codex logo icon in Figma by adjusting the SVG's height and width and then adding padding with auto-layout to prevent excessive cropping of the image. Is that how it's created?

Change #1167994 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] docs: add favicon types

https://gerrit.wikimedia.org/r/1167994

gerritbot added a project: Patch-For-Review.Jul 11 2025, 2:05 AM

Patch 1165610 was merged, and that favicon isn't loading on the main branch https://doc.wikimedia.org/codex/main/

Patch 1167994 includes the 32x32 SVG that Derek provided. I converted the 32x32 SVG to 16x16 ICO using https://www.favicon-generator.org/, which didn't turn out well. The quality is poor, and it's causing an "Unclosed bracket CssSyntaxError" in the favicon.ico file.

SVG
ICO

lwatson changed the task status from Open to In Progress.Jul 11 2025, 2:22 AM

lwatson updated the task description. (Show Details)

@Volker_E I think we should revert this patch https://gerrit.wikimedia.org/r/c/design/codex/+/1165610 because the favicons are not displaying on the main branch. I'm guessing they won't load on the latest branch either. What do you think?

I just resized the Codex logo icon in Figma and made it blue. Can we not just use a larger PNG for the favicon? That seems pretty common these days.

Cool! I used a different converter tool (favicon.io), which provides a set of favicons and a better quality favicon.ico. I updated the SVG (32x32) and ICO, and introduced a PNG (32x32) in patch 1167994. Here's the demo preview link.

That looks good to me! Let me know when you would a review from me on the patch.

@DTorsani-WMF ready for review

Done! Design approved.

DTorsani-WMF moved this task from Design Review to Code Review on the Codex board.Jul 11 2025, 8:30 PM

Change #1167994 merged by jenkins-bot:

[design/codex@main] docs: add favicon types

https://gerrit.wikimedia.org/r/1167994

Maintenance_bot removed a project: Patch-For-Review.Jul 11 2025, 10:31 PM

Volker_E added a project: Wikimedia-Design.Jul 15 2025, 9:54 PM

In T398375#10993953, @lwatson wrote:

@Volker_E I think we should revert this patch https://gerrit.wikimedia.org/r/c/design/codex/+/1165610 because the favicons are not displaying on the main branch. I'm guessing they won't load on the latest branch either. What do you think?

Saw this comment just right now. I guess the refinements and addition of fallback ICO (and SVG) have provided the necessary compatibility.

Volker_E updated the task description. (Show Details)Jul 15 2025, 10:07 PM

Volker_E moved this task from Code Review to Pending Release on the Codex board.

Maintenance_bot added a project: Design.Jul 15 2025, 10:29 PM

Change #1171718 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v2.2.0 to v2.2.1

https://gerrit.wikimedia.org/r/1171718

gerritbot added a project: Patch-For-Review.Jul 22 2025, 10:05 PM

Change #1171718 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v2.2.0 to v2.2.1

https://gerrit.wikimedia.org/r/1171718

Maintenance_bot removed a project: Patch-For-Review.Jul 23 2025, 12:32 AM