fix: Updating the logo in the app editor to use favicon instead (#41147)

## Description

Updating the logo in the app editor to use favicon instead

Fixes [#41134](https://github.com/appsmithorg/appsmith/issues/41134)

## Automation

/ok-to-test tags="@tag.Sanity"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!IMPORTANT]
> 🟣 🟣 🟣 Your tests are running.
> Tests running at:
<https://github.com/appsmithorg/appsmith/actions/runs/16591754385>
> Commit: 29ca67869963e9dbb9d684eeeb6713d865c6dd7f
> Workflow: `PR Automation test suite`
> Tags: `@tag.Sanity`
> Spec: ``
> <hr>Tue, 29 Jul 2025 09:11:02 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Updated the logo in the Appsmith link to display the organization's
favicon if available and different from the default, otherwise defaults
to the standard logo.
* **Bug Fixes**
* Increased the maximum allowed favicon size in branding settings from
32x32 to 48x48 pixels, with updated validation and messaging.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Ankita Kinger 2025-07-29 15:26:31 +05:30 committed by GitHub
parent 38ae03bf17
commit 621b979524
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 8 additions and 7 deletions

View File

@ -1698,13 +1698,13 @@ export const ADMIN_BRANDING_LOGO_FORMAT_ERROR = () =>
export const ADMIN_BRANDING_LOGO_REQUIREMENT = () => export const ADMIN_BRANDING_LOGO_REQUIREMENT = () =>
`.SVG, .PNG, or .JPG only • Max 2MB`; `.SVG, .PNG, or .JPG only • Max 2MB`;
export const ADMIN_BRANDING_FAVICON_DIMENSION_ERROR = () => export const ADMIN_BRANDING_FAVICON_DIMENSION_ERROR = () =>
`Uploaded file must have a max size of 32X32 pixels`; `Uploaded file must have a max size of 48X48 pixels`;
export const ADMIN_BRANDING_FAVICON_SIZE_ERROR = () => export const ADMIN_BRANDING_FAVICON_SIZE_ERROR = () =>
`Uploaded file must be less than 2MB`; `Uploaded file must be less than 2MB`;
export const ADMIN_BRANDING_FAVICON_FORMAT_ERROR = () => export const ADMIN_BRANDING_FAVICON_FORMAT_ERROR = () =>
`Uploaded file must be in .ICO, .PNG, and .JPG formats`; `Uploaded file must be in .ICO, .PNG, and .JPG formats`;
export const ADMIN_BRANDING_FAVICON_REQUIREMENT = () => export const ADMIN_BRANDING_FAVICON_REQUIREMENT = () =>
`.ICO, .PNG, or .JPG only • Max 32X32`; `.ICO, .PNG, or .JPG only • Max 48X48`;
export const PROFILE_DISPLAY_PICTURE_REQUIREMENT = () => export const PROFILE_DISPLAY_PICTURE_REQUIREMENT = () =>
`.ICO, .PNG, or .JPG only • Max 32X32`; `.ICO, .PNG, or .JPG only • Max 32X32`;
export const ADMIN_BRANDING_COLOR_TOOLTIP_PRIMARY = () => export const ADMIN_BRANDING_COLOR_TOOLTIP_PRIMARY = () =>

View File

@ -22,7 +22,6 @@ export const StyledLink = styled((props) => {
min-width: 24px; min-width: 24px;
width: 24px; width: 24px;
height: 24px; height: 24px;
object-fit: contain;
} }
`; `;
@ -49,8 +48,10 @@ export const AppsmithLink = () => {
alt="Appsmith logo" alt="Appsmith logo"
className="t--appsmith-logo" className="t--appsmith-logo"
src={ src={
organizationConfig.brandLogoUrl organizationConfig.brandFaviconUrl &&
? organizationConfig.brandLogoUrl organizationConfig.brandFaviconUrl !==
"https://assets.appsmith.com/appsmith-favicon-orange.ico"
? organizationConfig.brandFaviconUrl
: AppsmithLogo : AppsmithLogo
} }
/> />

View File

@ -13,8 +13,8 @@ import { ASSETS_CDN_URL } from "constants/ThirdPartyConstants";
import { getAssetUrl } from "ee/utils/airgapHelpers"; import { getAssetUrl } from "ee/utils/airgapHelpers";
import { LightModeTheme } from "@appsmith/wds-theming"; import { LightModeTheme } from "@appsmith/wds-theming";
const FAVICON_MAX_WIDTH = 32; const FAVICON_MAX_WIDTH = 48;
const FAVICON_MAX_HEIGHT = 32; const FAVICON_MAX_HEIGHT = 48;
const DEFAULT_BRANDING_PRIMARY_COLOR = "#E15615"; const DEFAULT_BRANDING_PRIMARY_COLOR = "#E15615";
export const APPSMITH_BRAND_PRIMARY_COLOR = export const APPSMITH_BRAND_PRIMARY_COLOR =