How do you change the Swagger favicon?

Question

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?

Barsham · Answer 1 · 2019-03-21T14:19:12.270

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

}

The above JS worked for me. Only thing is there is a short period where it still shows the default until the JS is run. — peterc, Aug 27 '19 at 23:13

EspressoBeans · Answer 2 · 2023-06-15T15:32:59.660

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>

score 4 · Answer 3 · answered Aug 21 '20 at 12:04

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.

This ended up being my issue.. `add app.UseStaticFiles(); before app.UseSwaggerUI(); to get it to work`. Thanks for the help! — SM3RKY, Jan 26 '23 at 19:45

score 2 · Answer 4 · answered Jul 30 '18 at 14:27

2

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.

answered Jul 30 '18 at 14:27

Chris Pratt

232,153
36
385
444

Thanks for the quick response! In my project, I have the png files uner the swagger-ui directory. However, when I run my project under localhost the png files are not under my swagger-ui directory. Any thoughts on why they are missing? – Rich Blumer Jul 30 '18 at 14:42
Change the directory name from `swagger-ui` to `swagger` and put the two png files by the same name stated above. – Yared Aug 08 '18 at 15:12
The above did not work for me. In fact I could see it getting the above image images from `/swagger/ui/images` so I put them there, but I still get the default swagger icon in the browser tab. I am not using asp.core though (it is just asp.net), so not sure if that changes things.. – peterc Jan 28 '19 at 08:21

How do you change the Swagger favicon?

4 Answers4