Skip to content

Add App-Specific Favicon & PWA Install Icon Support #1957

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: dev
Choose a base branch
from

Conversation

ElierHG
Copy link

@ElierHG ElierHG commented Aug 11, 2025

Proposed changes

This PR implements app-specific favicon and PWA icon functionality, allowing each Lowcoder application to have its own visual identity in browser tabs and when installed as a Progressive Web App (PWA).

Types of changes

What types of changes does your code introduce to Lowcoder?
Put an x in the boxes that apply.

  • Bugfix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation Update (if none of the other choices apply)

Checklist

You can also fill these out after creating the PR. If you're unsure about any of them, don't hesitate to ask. We're here to help!
This is simply a reminder of what we are going to look for before merging your code.
Put an x in the boxes that apply.

  • Lint and unit tests pass locally with my changes
  • I have added tests that prove my fix is effective or that my feature works
  • I have added necessary documentation (if appropriate)
  • Any dependent changes have been merged and published in downstream modules

✨ Features

Frontend Changes

  • Per-App Favicon Injection: Each app route now injects app-specific favicon, apple-touch-icon, and PWA manifest links
  • Smart Icon Handling: Uses app settings icon with fallback to branding logo or default assets
  • PWA Meta Tags: Adds Open Graph, Twitter Card, and theme-color meta tags for each app
  • Dynamic Icon Conversion: New utility functions for converting various icon formats to favicon-compatible formats
  • Enhanced Icon Display: Improved MultiIconDisplay component with better error handling and icon parsing

Backend Changes

  • App Icon Controller: New REST endpoint for serving app-specific icons with proper caching headers
  • Security Updates: Enhanced security configuration to allow icon serving from authenticated routes
  • Icon Processing: Server-side icon conversion and optimization for various formats

Documentation

  • PWA Icons Guide: documentation for implementing app-specific icons and favicons
  • Best Practices: Guidelines for icon formats, sizes, and PWA requirements

🔧 Console Error Fixes

During development, several console errors were identified and resolved:

  • Icon Parsing Issues: Fixed icon identifier parsing in MultiIconDisplay component
  • Missing Icon Definitions: Added proper error handling for missing FontAwesome and Ant Design icons
  • Type Safety: Improved TypeScript types and error handling throughout icon-related components
  • Performance: Optimized icon loading and caching mechanisms

📁 Files Modified

Core Feature Files

  • client/packages/lowcoder/src/app.tsx - Removed global favicon, added per-route handling
  • client/packages/lowcoder/src/pages/editor/editorView.tsx - Added app-specific favicon injection
  • client/packages/lowcoder/src/pages/ApplicationV2/index.tsx - Added favicon handling for admin view
  • client/packages/lowcoder/src/comps/comps/multiIconDisplay.tsx - Enhanced icon display and error handling
  • client/packages/lowcoder/src/util/iconConversionUtils.ts - New utility for icon format conversion
  • server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationController.java - Added icon serving endpoint
  • server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/framework/security/SecurityConfig.java - Updated security for icon access
  • server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/AppIconController.java - New icon controller
  • docs/build-applications/app-editor/pwa-icons-and-favicons.md - New documentation

🚀 Benefits

  1. Brand Consistency: Each app can maintain its unique visual identity
  2. PWA Support: Proper icon handling for Progressive Web App installation
  3. User Experience: Clear visual distinction between different applications
  4. Developer Experience: Comprehensive documentation and utility functions
  5. Error Resilience: Robust error handling prevents console errors

🧪 Testing

  • Tested with various icon formats (PNG, SVG, FontAwesome, Ant Design)
  • Verified PWA installation with app-specific icons
  • Confirmed favicon changes across different browser tabs
  • Tested fallback mechanisms for missing icons

…ackend endpoints for icon retrieval and manifest generation.
Copy link

netlify bot commented Aug 11, 2025

👷 Deploy request for lowcoder-test pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit b95ef20

@ElierHG ElierHG marked this pull request as ready for review August 11, 2025 12:16
@ElierHG
Copy link
Author

ElierHG commented Aug 11, 2025

Hello, here is my third PR attempt to this feature. Please let me know if this can safely be merged or if I have to modify anything else. Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant