Logos

The Strapi admin panel displays a logo in 2 different locations, represented by 2 different keys in the admin panel configuration:

Location in the UI	Configuration key to update
On the login page	`config.auth.logo`
In the main navigation	`config.menu.logo`

Note

Both logos can also be customized directly via the admin panel (see Customizing the logo). Logos uploaded via the admin panel supersede any logo set through the configuration files.

Logos location in the admin panel

The logo handled by config.auth.logo logo is only shown on the login screen:

The logo handled by config.menu.logo logo is located in the main navigation at the top left corner of the admin panel:

Updating logos

To update the logos, put image files in the /src/admin/extensions folder, import these files in src/admin/app.[tsx|js] and update the corresponding keys as in the following example:

JavaScript
TypeScript

/src/admin/app.js
import AuthLogo from "./extensions/my-auth-logo.png";
import MenuLogo from "./extensions/my-menu-logo.png";

export default {
  config: {
    // … other configuration properties 
    auth: { // Replace the Strapi logo in auth (login) views
      logo: AuthLogo,
    },
    menu: { // Replace the Strapi logo in the main navigation
      logo: MenuLogo,
    },
    // … other configuration properties 

  bootstrap() {},
};

/src/admin/app.ts
import AuthLogo from "./extensions/my-auth-logo.png";
import MenuLogo from "./extensions/my-menu-logo.png";

export default {
  config: {
    // … other configuration properties 
    auth: { // Replace the Strapi logo in auth (login) views
      logo: AuthLogo,
    },
    menu: { // Replace the Strapi logo in the main navigation
      logo: MenuLogo,
    },
    // … other configuration properties 

  bootstrap() {},
};

Note

There is no size limit for image files set through the configuration files.

Logos location in the admin panel​

Updating logos​

Logos location in the admin panel

Updating logos