CODEWITHSUNDEEP
swaggerswagger-uiasp.net-core-webapiswagger-2.0asp.net-core-2.1
Rich Blumer
Rich Blumer

Reputation: 998

How do you change the Swagger favicon?

I am building a ASP.NET CORE Web API and using Swagger for the documentation. I have not been able to change the favicon. I have a swagger-ui directory under wwwroot where I have placed my favicon but the favicon is never there. Also, I am changing the favicon using favascript in a custom js file.

So, how does one change the favicon for Swagger?

Upvotes: 20

Views: 15525

Answers (5)

bzlm
bzlm

Reputation: 9727

For ASP.NET Core (Web API and MVC), if you use Swashbuckle.AspNetCore to generate Swagger (the question doesn't specify), you don't need to have a wwwroot at all to achieve this. You can inject custom html into the document <head> by using Swashbuckle HeadContent and provide your own icon.

Swashbuckle will provide its own default icon, but when enabling Swashbuckle, configure HeadContent like this:

app.UseSwaggerUI(options => {
    options.HeadContent = "<link rel=\"icon\" type=\"image/png\" href=\"https://site/favicon.ico\" sizes=\"16x16\"

If you want to inject a local icon, you need a wwwroot.

If not using Swashbuckle, the method may be different.

Upvotes: 0

EspressoBeans
EspressoBeans

Reputation: 2015

This can also be achieved if you simply place your favicon.ico at the root within wwwroot folder: wwwroot/favicon.ico. Being placed at the root, the favicon.ico will be used as the default browser tab icon.

Of course as previously stated, you need to make sure you have app.UseStaticFiles(); in your Configure() method in order to serve the files within wwwroot.

Lastly also make sure you have the following in your .csproj file:

  <ItemGroup>
    <None Include="wwwroot\*" />
  </ItemGroup>

Upvotes: 5

Antonio Rodr&#237;guez
Antonio Rodr&#237;guez

Reputation: 1146

This is what worked for me:

First, you have to create the wwwroot folder, and place there a folder called swagger. Edit your csproj to include this line:

<ItemGroup>
    <None Include="wwwroot\*" />
</ItemGroup>

Files under this directory must be Content, Do not copy. That's default option anyway.

Then, you have to place two png files called favicon-16x16.png and favicon-32x32.png in swagger folder.

Last thig to do, add app.UseStaticFiles(); before app.UseSwaggerUI(); to get it to work.

You can also add a favicon.ico under wwwroot folder.

** NOTE: In case you had modified endpoint url, using app.UseSwaggerUI(config => config.SwaggerEndpoint("my/swagger/doc/file.json", "Rest API"));, directory tree under wwwroot must match the url. i.e., wwwroot/my/swagger/doc/favicon-16x16.png and wwwroot/my/swagger/doc/favicon-32x32.png.

Upvotes: 7

Barsham
Barsham

Reputation: 769

You need to inject jscript as below:

1- Create /assets/js/docs.js as below:

(function() {
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');;
    document.head.removeChild(link);
    link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    document.head.removeChild(link);
    link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = '../assets/images/logo_icon.png';
    document.getElementsByTagName('head')[0].appendChild(link);
})();

2- Load the script in your startup.cs

public void Configure(IApplicationBuilder app, IHostingEnvironment env, IApiVersionDescriptionProvider provider)
        {
            app.UseSwaggerUI(
                options =>
                {                    
                    options.InjectJavascript("../assets/js/docs.js");  
                });

        }

Note: Make sure you enable static files in your .NET Core Configure method.

public void Configure(IApplicationBuilder app, IHostingEnvironment env, IApiVersionDescriptionProvider provider)
{

    app.UseStaticFiles(); // For the wwwroot folder

    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "assets/images")),
        RequestPath = "/assets/images"
    });        

    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "assets/js")),
        RequestPath = "/assets/js"
    });

}

Upvotes: 14

Chris Pratt
Chris Pratt

Reputation: 239420

You have to essentially override it. By default, Swagger UI sets the icon to pull from your Swagger UI root. For example, if you load the docs at /swagger-ui, then the favicon is being pulled from /swagger-ui/favicon-32x32.png and /swagger-ui/favicon-16x16.png. Therefore, you can add this directory to your wwwroot and add your own favicon images there.

Upvotes: 3

Related Questions