feat(settings): allow users upload logo and favicon

[seaerchin]

Problem

Site administrators need the ability to customize their site's logo and favicon through the Isomer Studio interface. Previously, these settings were hidden in the site configuration and couldn't be easily updated through the UI.

Solution

Added a new "Logos and favicon" settings page that allows users to:

• Upload and customize their site logo
• Upload and customize their favicon
• Preview how the favicon appears in a browser tab

Breaking Changes

• No - this PR is backwards compatible

Features:

• New settings page at /sites/[siteId]/settings/logo for managing logo and favicon
• Visual preview component showing how the favicon appears in a browser tab (with Chrome-style tab mockup)
• Added "Logos and favicon" option to the settings sidebar navigation
• Extracted LogoSettingsSchema from the main site config for better separation of concerns

Improvements:

• Made resourceId parameter optional in FileAttachment component (instead of forcing string conversion from potentially undefined values)
• Fixed file upload to properly handle UTF-8 filenames using RFC 6266 encoding standard (filename*=UTF-8'')
  • This fixes uploads for files with special characters, emoji, non-ASCII characters, etc.
• Improved type safety in LinkEditorModal and JsonFormsImageControl by conditionally passing resourceId
• Refactored site config schema to use proper Zod validation with TypeBox schema intersection

Bug Fixes:

• Fixed file uploads failing for filenames containing dots, spaces, or special characters by using proper RFC 6266 encoding
• Fixed TypeScript errors in color picker control where data could be undefined

Tests

Testing checklist:

• Navigate to Settings > Logos and favicon
• Upload a logo image and verify it appears in the preview
• Upload a favicon and verify it appears in the browser tab preview mockup
• Test uploading files with special characters in filenames (e.g., logo (1).png, favicon 图标.ico, site-logo–2024.svg)
• Verify unsaved changes warning appears when navigating away
• Test form validation for invalid file types/sizes
• Verify changes persist after save and page refresh

New scripts: None

New dependencies: None

New dev dependencies: None

---

Technical Notes

Schema Changes

• Extracted LogoSettingsSchema from SiteConfigSchema in the components package
• Updated updateSiteConfigSchema to validate the full site config using the TypeBox validator
• Logo and favicon fields now have proper descriptions and format hints for the form builder

File Upload Fix

Changed from:

"Content-Disposition": `inline; filename="${file.name}"`

To:

const encodedFilename = encodeURIComponent(file.name)
"Content-Disposition": `inline; filename*=UTF-8''${encodedFilename}`

This follows RFC 6266 specification for internationalized filenames.

Preview Component

Added a ChromeTab component that renders a browser tab preview showing how the favicon appears alongside the site name. This can be toggled via the showChromeTab prop on EditSettingsPreview.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​opengovsg/​starter-kitty-validators@​1.2.11 ⏵ 1.2.13	+3		+3	+4
	typescript-eslint@​8.46.2 ⏵ 8.46.3				+2
	dd-trace@​5.75.0 ⏵ 5.76.0	+1
	@​eslint/​js@​9.39.0 ⏵ 9.39.1				+1
	eslint@​9.39.0 ⏵ 9.39.1				+1

View full report