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
  })

[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.