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

I've never used srapi but there something on their docs : https://strapi.io/documentation/advanced/customize-admin.html. Did you have a look there? — Cristiano, Oct 04 '18 at 08:07
yaa but its only for admin panel and login screen logo does not belong to admin folder. it belongs to users and permission plugin and I can not find the method for setting up the plugins after changing logo — Varis Bhalala, Oct 05 '18 at 04:28

score 19 · Answer 1 · edited Jun 20 '20 at 09:12

19

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 16 '19 at 06:18

Daniel Karski

346
3
13

to clarify the path is `./my-project/admin/src/assets/images/logo-strapi.png` – maksion Jul 23 '20 at 19:15
changing a node_module would just be overwritten after the next install. Which would happen everytime you deploy on a server, for example – SeanMC Apr 16 '21 at 18:43
On modern Strapi installations this solution won't work, as pointed out by @SeanMC. The answer by benchvorndaranch is the proper, officially documented solution. – berkes Jun 07 '22 at 12:52

score 13 · Answer 2 · answered Feb 02 '22 at 16:16

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

@benchvondaranach Did you manage to remove/customize Brand name in `Welcome to Strapi!` and `Log in to your Strapi account` ? — pjoshi, Nov 14 '22 at 06:36
This is by the official documentation, but does not work. I can change the theme colors, so the app.js is parsed, but logo's remain the default strapi ones. — Jos, Feb 02 '23 at 12:57

score 3 · Answer 3 · edited May 20 '21 at 14:29

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.

edited May 20 '21 at 14:29

Oris Sin

1,023
1
13
33

answered May 20 '21 at 07:52

Nilebac

191
1
10

score 2 · Answer 4 · answered Oct 06 '21 at 10:26

According to the doc https://strapi.io/documentation/developer-docs/latest/development/admin-customization.html#customization-options, you can modify the (logo and css). This is done by writing folders and files in your project folder. These files will overwrite the node module ones.

So, for the logo, in yourProjectName you can create a file at this path -> ./yourProjectName/admin/src/assets/images/logo-strapi.png

This file should overwrite the initial strapi logo.

rember to rebuild project by npm run build command

score 1 · Answer 5 · answered May 21 '22 at 04:10

I FIGURED IT OUT!

1.) Go Here https://github.com/strapi/strapi/blob/master/packages/core/admin/admin/src/translations/en.json

This shows all the spot where text is and what is currently is.

Here is a picture of the en.json file on the original github. https://i.stack.imgur.com/Lbef9.jpg

2.) To change text

Go to your own Strapi backend. Then go to config > src > admin > app.js

If you don't have an app.js use my code as template to start.

export default {
  config: {
    // Override or extend the theme
    theme: {
      colors: {
        alternative100: "#f6ecfc",
        alternative200: "#e0c1f4",
        alternative500: "#ac73e6",
        alternative600: "#9736e8",
        alternative700: "#8312d1",
        danger700: "#b72b1a",
      },
    },
    // // Extend the translations
    translations: {
      en: {
        "app.components.LeftMenu.navbrand.title": "Publishpen",
        "app.components.LeftMenu.navbrand.workplace": "Dashboard",
        "Auth.form.welcome.title": "Frick ya! White label branding!!!:)",
      },
      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() {},
};

Here is my folder structure https://i.stack.imgur.com/JQA2v.png

If you change the text in the translations you will change the text in the Strapi admin portal! Just look in the en.json (in the original github) for the text you see on the admin page and then update the app.js

translations: {
  en: {
    "app.components.LeftMenu.navbrand.title": "Publishpen",
    "app.components.LeftMenu.navbrand.workplace": "Dashboard",
    "Auth.form.welcome.title": "Frick ya! White label branding!!!:)",
  }
}

3.) You MUST re-build npm run build or yarn build If your project doesn't rebuild then it will not show on the admin portal.

The images help people see where things are located in my folder structure. I’m not taking them out. — Matt Kastner, May 26 '22 at 15:08

score 0 · Answer 6 · answered Aug 09 '22 at 07:26

To customize the logo Strapi. Please follow the document bellow: Step 1: Create file app.js in path : ./src/admin. If it's exited please ignore this step. Step 2: Create a folder to store new logo and then copy new logo to here: ./src/admin/extensions

You can follow structure above Step 3: Replace by new logo by edit the file app.js look like bellow:

// path: src/admin/app.js

import Favicon from './extensions/new-favicon.ico';
import MenuLogo from './extensions/new-logo.png'

export default {
  config: {
    // replace favicon with a custom icon
    head: {
      favicon: Favicon,
    },
    // replace logo
    menu: {
      logo: MenuLogo,
    },
  }
}

That's all. hope it can help you!

score 0 · Answer 7 · answered May 26 '23 at 13:44

0

Also watch the filename as well, I edited app.example.tsx to no effect for hours and didn't notice the file should be named app.tsx.

answered May 26 '23 at 13:44

brjakab

1

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/34452716) – Ferris May 28 '23 at 10:39

score -1 · Answer 8 · edited Feb 10 '20 at 15:12

-1

I'm very new to Strapi and I was searching exactly how to achieve this. As per the documentation you need to change the image on ./node_modules/strapi-admin/admin/src/assets/images/logo-strapi.png and run build the administration panel with npm run setup

edited Feb 10 '20 at 15:12

Phil

383
1
4
18

answered Mar 23 '19 at 18:59

Freddy Polania

43
8

This is a hack, please see answer above for a proper solution – maksion Jul 23 '20 at 19:16

score -1 · Answer 9 · answered Jul 14 '19 at 10:54

-1

You need to change the image at ./plugins/users-permissions/admin/src/assets/images/logo_strapi.png.

HTH

answered Jul 14 '19 at 10:54

user1769918

1

score -2 · Answer 10 · answered Jun 19 '20 at 05:48

Since this question is over a year old now, and might be confusing for some beginners, i think i will answer how i went upon to change it. This answer uses yarn (Do note that the core of the above answers remains same)

Say your project name is my-project, Navigate to my-project/node_modules/strapi-admin/admin/src/assets/images

You will find a file called logo-strapi.png (there will be another file with almost similar file name, make sure its a - and not _ ) and replace it with your desired logo. The approx dimens of the old logo as 1100px x 300px , so make sure your new logo also is of similar dimens.

Once you are done, navigate back to my-project directory and terminate any running instance of strapi. If you are on windows, make sure you close all the file explorer windows which might have any of the subfolders of your project open and preferable close any open browser tabs of your admin panel (if there are any open instances, it might give an error while re building) .

Now run yarn build and after it finishes building, start your strapi instance in production or development mode as required with yarn start or yarn develop

I don't think changing the contents of a node_module's folder is ever a long-term or recommended solution. Another way? — SeanMC, Apr 16 '21 at 18:41

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

10 Answers10

Source