How to change logo of strapi on admin panel left menu?

Question

I am running the strapi project and need to change strapi login screen logo. I have replaced logo in plugins > user-permissions > admin > src > assets > images > logo_strapi.png and running the command npm run setup --plugins but after that it's not loading content-type data it's just giving me loader only

Answer 1

Since this question is a bit older... In the current version of Strapi (V4) changing the icon of the left menu works a bit differently (the presented solution is tested with 4.0.6). This solution also works for changing the Logo at the Login Screen and the favicon...

In your project create an extension folder under ./yourProjectName/src/admin/ Within it you can place a new image that should be your new Menu Logo i.e. 'new-menu-logo.png'

Furthermore create an app.js file under ./yourProjectName/src/admin/ where you then import the image of the extension folder. Example:

// path: ./yourProjectName/src/admin/app.js

import AuthLogo from './extensions/my-new-logo.png';
import MenuLogo from './extensions/new-menu-logo.png';
// import favicon from './extensions/favicon.ico';

export default {
  config: {
    // Replace the Strapi logo in auth (login) views
    auth: {
      logo: AuthLogo,
    },
   // Replace the favicon
    // head: {
    //   favicon: favicon,
    // },
    // Add a new locale, other than 'en'
    locales: ['fr', 'de'],
    // Replace the Strapi logo in the main navigation
    menu: {
      logo: MenuLogo,
    },
    // Override or extend the theme
    theme: {
      colors: {
        alternative100: '#f6ecfc',
        alternative200: '#e0c1f4',
        alternative500: '#ac73e6',
        alternative600: '#9736e8',
        alternative700: '#8312d1',
        danger700: '#b72b1a'
      },
    },
    // Extend the translations
    translations: {
      fr: {
        'Auth.form.email.label': 'test',
        Users: 'Utilisateurs',
        City: 'CITY (FRENCH)',
        // Customize the label of the Content Manager table.
        Id: 'ID french',
      },
    },
   // Disable video tutorials
    tutorials: false,
   // Disable notifications about new Strapi releases
    notifications: { release: false },
  },

  bootstrap() {},
};

Finally rebuild the AdminUI with i.e. yarn build

Also described at the official docs: https://docs.strapi.io/developer-docs/latest/development/admin-customization.html#configuration-options

Answer 2

Logo you can overvrite in path -> ./admin/admin/src/assets/images/logo-strapi.png

rember to rebuild project by npm run build command

The AdminUI package source can be easily found in ./node_modules/strapi-admin/src/.

For example, to change the top-left displayed admin panel's color, ./node_modules/strapi-admin/admin/src/components/LeftMenuHeader/styles.scss should be overriden by ./admin/src/components/LeftMenuHeader/styles.scss with your own styles.

Thus, you are replacing the files that would normally be in node_modules/strapi-admin/admin/src and directing them to admin/src/some/file/path.

To apply your changes you need to rebuild your admin panel

npm run build

Source

https://github.com/strapi/strapi/issues/3604

https://github.com/strapi/strapi/pull/3609/files

Answer 3

Per Strapi's documentation, to change the top-left displayed admin panel's logo, add your custom image at ../admin/src/assets/images/logo-strapi.png.

You have to create these folders if they don't exist ../admin/src/assets/images/ to override the admin's existing styling.