Fix: Trim WSO2-logo-orange.svg viewBox to fix small favicon

[OshadhaPalliyaguru]

Purpose

The favicon shown in the browser tab on the WSO2 Integrator: MI 4.6 documentation site renders visibly smaller than in 4.5. This is a regression introduced when theme.favicon was switched to use WSO2-logo-orange.svg — an SVG asset that contains ~50% of transparent padding inside its viewBox, causing the logo to occupy only the central half of the favicon slot when browsers render it at 16×16 / 32×32.

Goals

Restore the favicon to its intended visual size (filling the browser tab icon space) while preserving the new orange WSO2 "W-in-circle" branding introduced in 4.6.

Approach

Trimmed the viewBox of en/docs/assets/img/WSO2-logo-orange.svg so it tightly fits the actual logo paths instead of including the original ~50% padding on every axis.

• Before: viewBox="0 0 525.38 525.38" (logo content occupies only the central ~263×263 region)
• After: viewBox="131.09 131.22 262.94 262.94" (logo content fills the viewBox)

The SVG <path> data is not modified — only the viewport over the artwork is cropped. The visual design, colors, and proportions of the logo are unchanged.

This same SVG is also reused in en/theme/material/partials/footer.html as a 32×32 "Need support?" icon, where the padding caused the same visual shrinkage. The fix improves that icon too.

No changes were required in en/mkdocs.yml — theme.favicon continues to point at assets/img/WSO2-logo-orange.svg.

Before / After (browser tab)

User stories

As a user visiting the WSO2 Integrator: MI 4.6 documentation, I want the WSO2 favicon to be clearly visible in my browser tab so I can quickly identify the docs site among multiple open tabs.

Release note

Fixed an issue where the favicon on the WSO2 Integrator: MI 4.6 documentation site appeared significantly smaller than expected in browser tabs.

Documentation

N/A

Training

N/A

Certification

N/A

Marketing

N/A

Automation tests

Unit tests

N/A

Code coverage information

N/A

Integration tests

N/A

Security checks

• Followed secure coding standards in https://wso2.com/technical-reports/wso2-secure-engineering-guidelines: yes (no executable code introduced; only an SVG viewBox attribute was modified).
• Ran FindSecurityBugs plugin and verified report: N/A (no Java/JVM code changed; FindSecurityBugs is not applicable to static SVG assets).
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets: yes (verified via git diff — only one line in one SVG file is changed; no credentials, tokens, or secrets are introduced).

Samples

N/A

Related PRs

This PR addresses the regression introduced by PR #2168 (commit fd832817, "Update favicon to WSO2 orange logo in mkdocs configuration"), which switched the favicon to the padded SVG asset.

Migrations (if applicable)

N/A

Test environment

• OS: Windows 11
• Python: 3.11.8
• MkDocs: 1.4.2
• mkdocs-material: 9.1.2
• Browsers verified: Chrome , Edge , Firefox
• Verification: ran mkdocs serve from the en/ directory, opened http://localhost:8000/en/latest/, hard-refreshed (Ctrl+F5), and confirmed the favicon now fills the browser tab icon space matching the 4.5 visual size, while preserving the orange WSO2 logo design introduced in 4.6.
• The en/theme/material/partials/footer.html "Need support?" icon (which reuses the same SVG at 32×32) was also visually verified to render correctly post-fix.

Learning

Investigated the cause by:

1. Diffing en/mkdocs.yml against the previous version to confirm theme.favicon had been switched from a tightly-cropped PNG to the orange SVG.
2. Inspecting the SVG source to compute the bounding box of the logo paths (the outer circle at cx=262.56, cy=262.69, r=131.47 confirmed content extents of approximately 131.09, 131.22 to 394.03, 394.16 inside a 525.38 × 525.38 viewBox — i.e., ~50% transparent padding on each axis).
3. Confirming the standard SVG-favicon scaling behavior in browsers: the entire viewBox is mapped to the favicon slot, so any internal padding directly shrinks the visible logo.

No external libraries, plugins, or third-party patterns were introduced.

[Copilot]

Copilot wasn't able to review any files in this pull request.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (1)

• en/docs/assets/img/WSO2-logo-orange.svg is excluded by !**/*.svg and included by **/**

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 7013e511-7067-4857-b6f5-db674a780aed

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}