NestJs Swagger how to add custom favicon

Question

I am trying to add a custom favicon to my NestJs documentation. However, I am a bit lost on how the path file gets resolved and not sure how to achieve this.

I am using nestjs/swagger module version 3.1.0 and trying to pass the path file like so when initializing the Swagger Module.

My main.ts file

SwaggerModule.setup('/v1/docs', app, document, {
    customCss: CUSTOM_STYLE,
    customSiteTitle: 'My API Documentation',
    customfavIcon: './public/favicon.jpg'
});

Searched on the github issues and didn't find anything useful. And as you can see from the code I was able to modify the CSS styles, but I cannot figure out how to make the favicon custom.

Appreciate any help

Answer 1

I have added the custom favicon to my swagger docs using following:

The first thing you make sure is, in your main.ts, the app is initialized with the following:

const app: NestExpressApplication = await NestFactory.create(...)

To serve static content you must initialize your app with NestExpressApplication.

The next thing is to allow the Nest application to look for public content using the following in your main.ts after initialization:

app.useStaticAssets(join(__dirname, '..', 'public'));

Also, create a public directory in your root of the application and paste your favicon.jpg file in it.

Now its time to initialize the Swagger in main.ts

SwaggerModule.setup('/v1/docs', app, document, {
    customCss: CUSTOM_STYLE,
    customSiteTitle: 'My API Documentation',
    customfavIcon: '../favicon.jpg'
});

You must give a relative path to the root of the application like ../favicon.jpg in case our main.ts is in src folder in root of the application.