Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Ginu Jose 6 posts 87 karma points
    Dec 07, 2023 @ 11:06
    Ginu Jose
    0

    How to set favicon for Backoffice based on domain

    Hi,

    I have multiple websites within a single Umbraco installation. How can I set distinct favicons for each website Backoffice?

    I need to load different favicons for media files (pdf/images) opened in a new tab for each domain.

    Thanks

  • Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib
    Dec 07, 2023 @ 11:36
    Lee Kelleher
    0

    Hi Ginu,

    If you are meaning to show a favicon for the CMS backoffice itself, then I have an old package called CMS Environment Indicator for Umbraco v7, that injects a JavaScript file into the backoffice on initial page load, that will set the favicon colour based on the current domain/hostname for different environments (dev, staging, production).

    The JavaScript is here... https://github.com/leekelleher/umbraco-environment-indicator/blob/develop/src/App_Plugins/CmsEnvironmentIndicator/js/cms-environment-indicator.js

    You could adapt this JavaScript to fit your own needs.


    Alternatively, if you are meaning for the frontend, e.g. non-backoffice requests, then there could be a way to hook into ASP.NET Core middleware to intercept any requests to the /favicon.ico URL, and serve up the website's corresponding favicon. (I don't currently have a code example for this, sorry).

    Cheers,
    - Lee

  • Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib
    Dec 07, 2023 @ 12:26
    Lee Kelleher
    2

    Following up on this, it turns out that you may not need the Middleware to route the request to a controller, you could use the [Route] attribute. No need for registration in the Startup class.

    Something like this...

    using Microsoft.AspNetCore.Mvc;
    
    namespace Our.Umbraco.Web.Controllers;
    
    public class FaviconIcoController : Controller
    {
        private readonly IWebHostEnvironment _webHostEnvironment;
    
        public FaviconIcoController(IWebHostEnvironment webHostEnvironment)
        {
            _webHostEnvironment = webHostEnvironment;
        }
    
        [Route("/favicon.ico")]
        public IActionResult Index()
        {
            var hostname = Request.Host.Host;
            var path = Path.Combine(_webHostEnvironment.WebRootPath, $"{hostname}.ico");
    
            if (System.IO.File.Exists(path) == true)
            {
                var bytes = System.IO.File.ReadAllBytes(path);
                return File(bytes, "image/x-icon");
            }
    
            return NotFound("favicon.ico not found");
        }
    }
    

    Please note that the [Route] attribute only works if the physical file for "favicon.ico" does NOT exist, otherwise the static file provider will kick in and serve that before it hits the controller.

    Hack the code as you'd need.

    Hope this helps.

    Cheers,
    - Lee

  • Brendan Rice 538 posts 1102 karma points
    Dec 08, 2023 @ 02:53
    Brendan Rice
    0

    Interesting response Lee. Can you wildcard the Route? So say if you wanted to catch all requests for a certain file type e.g. stp?

  • Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib
    Dec 08, 2023 @ 12:04
    Lee Kelleher
    0

    Hi Brendan,

    I'd assume it'd work - as it's pretty much routing a request, but the same logic applies that if a physical file with the same name exists, then then static file provider would pick it up first.

    My only caveat would be that I'm not familiar with the *.stp file extension, so don't know if a MIME type would need to be configured beforehand.

    Cheers,
    - Lee

  • nehakakar 15 posts 85 karma points
    Dec 08, 2023 @ 07:19
    nehakakar
    1

    Prepare individual favicon.ico files for each website. Check they are appropriately named like faviconsite1.ico, faviconsite2.ico, etc. after that upload each favicon file to the respective media section in Umbraco and then edit the Backoffice view for each website to include a link to the corresponding favicon. Onpen the view file.

    /Views/Partials/BackOffice/Partials/TagsForPages/Head.cshtml
    

    Update the link tag for the favicon based on the domain.

    @if (HttpContext.Current.Request.Url.Host == "site1.com")
    {
        <link rel="icon" type="image/x-icon" href="~/media/1234/favicon_site1.ico">
    }
    else if (HttpContext.Current.Request.Url.Host == "site2.com")
    {
        <link rel="icon" type="image/x-icon" href="~/media/5678/favicon_site2.ico">
    }
    

    Save the changes and test by accessing the Backoffice for each website.

Please Sign in or register to post replies

Write your reply to:

Draft