Custom admin interface title and favicon

[ali-d-coded]

How can I remove keystone's default title and favicon and replace it with my own? is it possible?

[raveling]

Great idea @ali-d-coded

This isn't currently possible. I'm making this a feature request 🙇

[matchboxhero]

Did this get implemented?

[DiesIrae]

For title, I found a simple hack:

• Implement custom navigation
• Add this hook to it, with the new title base you want:

import { useEffect } from "react"

export const useCustomTitle = (cmsTitleBase: string) =>
  useEffect(() => {
    const currentTitle = document.title
    const newTitle = currentTitle.replace("Keystone", cmsTitleBase)
    if (newTitle !== currentTitle) document.title = newTitle
  })

[jj-matos]

Couldn't make this work. Where was it implemented? The custom navigation is not loaded at sign in page. Tried in layout component, but also only loads after sign in.

[saleehk]

You can replace existing favicon with the following method

getAdditionalFiles: [
        async (config: KeystoneConfig) => [
          {
            mode: 'copy',
            inputPath: Path.join(pkgDir, 'public', 'favicon.ico'),
            outputPath: 'public/favicon.ico',
          },
        ],
      ],

[oldo]

Thanks for this solution, but where do I set getAdditionalFiles?

[MohammadKurjieh]

@oldo this is added to the ui field of the keystone config.
Docs: Github or Keystone website

[oldo]

Haha, fancy seeing you here @MohammadKurjieh
Thanks!

[jmchor]

For the full picture here:

import path from 'path'; 
const pkgDir = path.resolve(__dirname, '..');

an in the ui field of keystone.ts:

getAdditionalFiles: [
        async (config: KeystoneConfig) => [ //it seemed as though you could omit the config here though
          {
            mode: 'copy',
            inputPath: Path.join(pkgDir, 'public', 'favicon.ico'),
            outputPath: 'public/favicon.ico',
          },
        ],
      ],

You need to make sure that you have a "favicon.ico" file in your public folder.

[molotow11]

useCustomTitle method for change <title> seems not completely works for me. Only on page reload and not on the login page.

[DiesIrae]

yeah in practise it seems not to work on all cases. I found that it doesn't always work after logging. Maybe by adding a setTimeout or useLayoutEffect?

[molotow11]

No, this works the same for me with useLayoutEffect or setTimeout, I need reload a page after login for see title change.

[jj-matos]

I managed to do it by putting the new favicon.ico in the public folder, and then adding the public folder as a storage space in keystone.ts. In the end it worked just like the logo, which also only works per documentation if we put the file in a storage space existent in keystone.ts:

Apart from the Logo settings in config.tsx per documentation:

• The files need to be copied to public folder;
• Local sotrage needs to be created in keystone.ts:

      app_logos: {
        kind: 'local',
        type: 'image',
        generateUrl: path => `${baseurl}/${path}`,
        serverRoute: {
          path: '/',
        },
        storagePath: 'public',
      },