ABP Ignoring favicon after migration to ABP 10 #10321

4 Answer(s)

• 

  0

  AI-Bot created yesterday

  Support Team ABP Agent

  1. Solution

  In ABP (including v10) with LeptonX, the favicon is still taken from the root of each application. The theme does not require any extra configuration: placing the files in the right place is enough.

  For a Blazor Server + separated AuthServer setup with LeptonX:

  1. Make sure the favicon files are in the correct paths
     For each application (AuthServer and Blazor Server UI):

     • Place your files exactly as:
       • YourApp.AuthServer/wwwroot/favicon.svg
       • YourApp.AuthServer/wwwroot/favicon.ico
       • YourApp.Blazor/wwwroot/favicon.svg
       • YourApp.Blazor/wwwroot/favicon.ico

     There should be no sub-folder (like /images/ or /assets/) in the path – LeptonX looks at the root.

  2. Remove any manual <link rel="icon" ...> overrides
     If you previously followed older instructions and edited layout/profile pages, restore/remove any custom favicon lines, for example:

  <link rel="icon" href="/some/other/path/icon.svg" ... />
  

  or any layout/component that points to a LeptonX favicon.
  With LeptonX, you normally do not need to add a <link rel="icon"...> tag at all; the default layout will use /favicon.svg and /favicon.ico from wwwroot.

  3. Ensure the files are published and served as static content

     For both AuthServer and Blazor projects:

     • Right‑click favicon.svg and favicon.ico in Visual Studio → Properties:
       • Build Action = Content
       • Copy to Output Directory = Do not copy or Copy if newer (both are fine as long as they end up under wwwroot at publish time).
     • Clean + Rebuild the solution.
     • If you publish, check the publish folder to confirm:
       • <publish_root>\wwwroot\favicon.svg
       • <publish_root>\wwwroot\favicon.ico

  4. Verify which favicon URL is actually being requested

     In the browser (for both AuthServer URL and Blazor UI URL):

     • Open DevTools → Network tab → filter by favicon.
     • Reload the page.
     • Confirm the request URL is /favicon.svg or /favicon.ico and not something like /Themes/LeptonX/.../favicon.svg.
     • Click the favicon request and check Response:
       • It should be your custom icon file (not the LeptonX default).

     If you see the favicon being requested from a different URL, that means some layout/component is still pointing to the LeptonX icon. Remove/override that link, so only /favicon.svg (or /favicon.ico) from wwwroot is used.

  5. Clear cache correctly

     Because browsers cache favicons aggressively:

     • Open DevTools → Network → check Disable cache.
     • Hard reload (Ctrl+F5).
     • Optionally, try another browser profile or a different machine.

  6. If AuthServer and Blazor show different icons

     • Check each app separately:
       • Browse directly to https://authserver-host/favicon.svg → you should see your SVG.
       • Browse to https://blazor-host/favicon.svg → you should see the same SVG.
     • If one of them still returns the LeptonX icon, its wwwroot/favicon.* is not updated or not deployed correctly. Fix that project and rebuild.

  If all the above conditions are satisfied (correct paths, no custom <link> overrides, files actually deployed and served) LeptonX in ABP 10 will use your favicon instead of the LeptonX icon.

  2. Sources

  • Favicon override behavior for LeptonX (placing favicon.svg / favicon.ico under ~/wwwroot in each app):
    https://abp.io/support/questions/8906
  • General Blazor UI customization/overriding components:
    https://abp.io/docs/latest/framework/ui/blazor/overall

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  cvarela@ld created yesterday

  I verified all of this and it's still not working.

  1. Make sure the favicon files are in the correct paths For each application (AuthServer and Blazor Server UI): the favicons are in the correct location, they were working fine before the migration and we haven't moved them. I verified and they're still there in wwwroot.
  2. Remove any manual <link rel="icon" ...> overrides: there are no overrides.
  3. Ensure the files are published and served as static content: Verified, attaching image
  4. Verify which favicon URL is actually being requested: I can confirm the URL being used is correct, just "/favicon.svg" but the icon it's retrieving is incorrect, is the LeptonX icon no the one I have in wwwroot.
  5. Clear cache correctly: tried disabling cache, a different browser and incognito. Got the same result.

  As you can see in this image of my wwwroot I have a favicon.svg and favicon.ico in the auth server project and it's not the LeptonX icon . Then when I run the project in my local machine and make a request for favicon I get a different icon: .

  We have not made any changes related to favicon, we just updated to ABP 10.

  Save Cancel
• 

  0

  maliming created 18 hours ago

  Support Team Fullstack Developer

  hi

  Can you share your module code?

  You can try adding your favicon.ico favicon.svg files as embedded resources.

   <ItemGroup>
      <EmbeddedResource Include="wwwroot\**\*.ico" />
      <EmbeddedResource Include="wwwroot\**\*.svg" />
      <Content Remove="wwwroot\**\*.ico" />
      <Content Remove="wwwroot\**\*.svg" />
    </ItemGroup>
  

  Thanks

  Save Cancel
• 

  0

  cvarela@ld created 24 minutes ago

  Hello,

  Thank you for the suggestion. I tried adding favicon.ico and favicon.svg as embedded resources using the configuration you provided, but it did not resolve the issue.

  Since I couldn't share our codebase, I created a fresh ABP v10 solution and confirmed that favicon replacement works correctly in the default template. So I decided to make a diff check for all the differences and I was able to pinpoint the issue.

  Root Cause: I found that the issue was caused by the order of middleware in the application initialization. In our ABP v9 implementation, we had:

  app.UseCorrelationId();
  app.MapAbpStaticAssets();
  app.UseAbpStudioLink();
  app.UseRouting();
  

  In the new version app.UseRouting(); was moved before app.MapAbpStaticAssets();

  Check the diff here:

  Moving app.UseRouting() before app.MapAbpStaticAssets() resolved the issue. The favicons now display correctly.

  Is it possible to get this question ticket refunded?

  Thanks.

  Save Cancel