[Bug]: Favicon instructions lead to TypeScript errors

[mauriciabad]

Link to the documentation page or resource

https://docs.strapi.io/dev-docs/admin-panel-customization#favicon

Describe the bug

The instructions about adding a favicon have errors, and it doesn't work when you copy and paste it in a new project.

This is the error that appears:

Cannot find module './extensions/favicon.png' or its corresponding type declarations.ts(2307)

Additional context

This is the code:

import favicon from './extensions/favicon.png';

export default {
  config: {
    // replace favicon with a custom icon
    head: {
      favicon: favicon,
    },
  }
}

Suggested improvements or fixes

Although it is a typical TS problem solvable by the developer, but documentation code shouldn't have errors. Nowhere in strapi's documentation, it is explained how to deal with this.

Related issue(s)/PR(s)

#1000

[mauriciabad]

Moreover, I'd like to add that the favicon should be added from the UI as well as the other icons...

[pwizla]

Hi! I will slightly update the code example, but I'm not sure what went wrong in your use case, because I've just tested it and it works 🤷

I'll close this issue for now, but feel free to reopen it if you have any question.

[101sam]

Sam issue clean strapi (JS)

yarn create strapi-app my-project --quickstart

Follow the steps in the documentation https://docs.strapi.io/dev-docs/admin-panel-customization#favicon:

import favicon from "./extensions/favicon_2023.png";


const config = {
  head: {
    favicon: favicon,
  },

};

const bootstrap = (app) => {
  console.log(app);
};

export default {
  config,
  bootstrap,
};

[ntuong196]

I had a similar issue. But it was solved here.
Also, add the extension folder in webpack config:

// path: ./src/admin/webpack.config.js

'use strict';

const _ = require('lodash');
const path = require('path');

/* eslint-disable no-unused-vars */
module.exports = (config, webpack) => {
  // this includes the folder ./src/admin/extensions with the alias assets
  _.set(config, 'resolve.alias.assets', path.resolve(__dirname, './extensions'));
  return config;
};

strapi/strapi#11912

[pwizla]

Thanks for reporting, we'll reference this in docs soon. Re-opening the issue to ensure it's not missed.