Use a different favicon for the web IDE and workspace
MR:
- Update favicon for Web IDE routes (!201282 - merged) • Sahil Sharma • 18.4
- Add patch to update workspaces vscode server fa... (gitlab-web-ide-vscode-fork!130 - merged) • Chad Woolley • 18.4
- Add blue & green favicons for Web IDE in local ... (!203442 - merged) • Sahil Sharma • 18.4
Problem to solve
The GitLab Web IDE uses the same favicon as GitLab, making it hard to find my IDE tab when I have other GitLab pages open.
Suggested solution
Use a different favicon for the Web IDE & Workspaces so it can be easily distinguished from other GitLab tabs.
Proposed design
Based on team feedback, the selected favicon designs use GitLab's brand colors and maintain visual consistency between Web IDE and Workspaces while ensuring clear differentiation from the main GitLab favicon.
| Feature | Favicon |
|---|---|
| Web IDE |  |
| Workspaces |  |
Initially proposed design
Proposed implementation
Web IDE
Repository: gitlab-org/gitlab
Approach: Modify the existing favicon helper to detect Web IDE context and serve a custom favicon.
Key Changes:
- Update the
faviconmethod in page_layout_helper.rb to check if user is in Web IDE - Add new method in
Gitlab::Faviconclass for the new Web IDE favicon
Workspaces
Repository: gitlab-org/gitlab-web-ide-vscode-fork
Challenge: Workspaces inject the GitLab VS Code fork into containers on startup. This fork serves its own assets, so the favicon comes from the VS Code assets rather than from the main GitLab repository.
Approach: Create a patch in the VS Code fork to modify favicon during build process.
Key Changes:
- Add a patch file to
vscode-patches/directory which adds the custom favicon file - Modify VS Code HTML templates to use workspace favicon