How to replace Swagger UI header logo in Swashbuckle

Question

I am using the Swashbuckle package for WebAPI and am attempting to customize the look and feel of the swagger ui default page. I would like to customize the default swagger

Answer 1

Here are the steps instead of using the index.html

Step 1: Create your logo en put it into a folder, in my case I created a separate folder(I am not using the wwwroot) and I named Content. Use StaticFiles for stream content from this folder access via /Content

app.UseStaticFiles(); // For the wwwroot folder if you need it
app.UseStaticFiles(new StaticFileOptions()
{
    FileProvider = new PhysicalFileProvider(
    Path.Combine(Directory.GetCurrentDirectory(), "Content")),
    RequestPath = "/Content"
});

Stem #2: Create an image folder inside Content and place your logo.jpg file. Right-click over the file and change the Build Action to Embedded resource

Step #3: Create a css folder inside Content and place a new file swagger-mycustom.css and change the Build Action to Content

On your Startup Configure method add this code

app.UseSwaggerUI(setupAction =>
{
    ....
    setupAction.InjectStylesheet("/Content/css/swagger-mycustom.css");
    ...
}

Step #4: Add this to your css:

img[alt="Swagger UI"] {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    content: url('/Content/images/logo.jpg');
    max-width: 100%;
    max-height: 100%;
}

The output looks like this: