The custom icon feature is lacking

[frakman1]

I noticed there is a feature for a custom logo in the Settings:

Apart from being restrictively small and rectangular (155px x 55px), it only shows up on the left frame of the WebUI (and is tiny).

I was expecting it to be the new favicon and to see it on the login page too.

Discourse does a good job of this and asks for two images, one square and one more banner like to use across the WebUI.

The login screen still looks like this:

The favicon is still the default:

[tfenster]

One addition to that: We have either a very light or very dark logo. On the very light login page, I would like to use the dark logo because the background is very light gray, while after the login, the background for the logo becomes dark blue, so I would like to use the light logo. Would it be possible to have an additional option for that?

[LostOnTheLine]

I'm needing to do this as well. I found a way... But it's not very pleasant.

To Customize your Portainer Favicon

1. The 1st thing you need to do is find where the icon in Portainer is stored. Since I'm unable to CLI into the container I used the Tar Extract method
   1. On your host use a Command Line Interface to access the host
   2. Create a new empty folder & cd into it
   3. With elevated permissions extract the container contents of your container
      1. For me using Portainer-ee sudo docker save portainer/portainer-ee | tar -xvf -
      2. This should give you a bunch of folders with random names like 9d30d364ab61fb49d02623d0485dbc1b1035d49b268723f4293cc3af1bfbf8ca
   4. Use the following command to extract the folder structure from all the pieces into your directory
      1. find . -name "layer.tar" -exec tar -xvf {} \;
      2. This should extract all the folders into your directory alongside all the random-named ones. These folders are the folders in the Portainer container
2. go into the public folder cd public
3. Find the 25x32 png file. Mine was named 2dcfc527d067d4ae3424.png
4. In your Portainer Docker-Compose add a volume mount from the image you want to use to /public/<YOURIMAGE>.png
   1. For me it was - /volume1/docker/portainer/portainer-dsm-pink.png:/public/2dcfc527d067d4ae3424.png
   2. I replaced all of the Portainer images with different color ones to identify which was used, the pink happened to be the correct one.
5. Note that the image is so small that there's not much you can do to add a lot of detail. I personally change all my Proxmox nodes to use different colors on the side ><s my initial attempt to add a DSM box to the Portainer Docker boxes didn't work out as they were not noticeable at the resolution

In case anyone is interested these were my attempts, but they were too detailed & didn't work

Unfortunately for me DSM's color is so close to Portainer's that using the DSM color (That first one is using it rather than the Portainer color) made it unnoticable from the original one running on my Proxmox cluster so I'm still looking for an alternative.

I also tried this replacing the logo in the login & dashboard, but it didn't work. I can change the logo in the dash & it does also show the logo on the Login Page, but it can't call for a local file unfortunately. BUT if I map the edited file to the /public location it won't load the new one, but it WILL let me map it to https://<PortainerIP:Port>/63c1259abd88a9d2cebc.svg the file I replaced. If I try to not replace a file but add one it doesn't work though.

      - /volume1/docker/portainer/63c1259abd88a9d2cebc-dsm.svg:/public/63c1259abd88a9d2cebc.svg  # Business
     # - /volume1/docker/portainer/7e697c5bab4f819328df.svg:/public/7e697c5bab4f819328df.svg  # Community

works with https://<PortainerIP:Port>/63c1259abd88a9d2cebc.svg

      - /volume1/docker/portainer/63c1259abd88a9d2cebc-dsm.svg:/public/63c1259abd88a9d2cebc-dsm.svg  # Business
     # - /volume1/docker/portainer/7e697c5bab4f819328df.svg:/public/7e697c5bab4f819328df.svg  # Community

Doesn't work with https://<PortainerIP:Port>/63c1259abd88a9d2cebc-dsm.svg

Here's a sample of my SVG so you can use it how you like

[LostOnTheLine]

I realized I made this much more complicated than it needs to be. Here's an updated version that is much easier.
The Page Source HTML will tell you what filenames to map to in the /public folder of the container. I wish I thought of that earlier. & it even tells you the icon sizes for each filename.

1. View Page Source on any Portainer page & look for the line that starts with this (For me it was near the beginning of Line 3)

![endif]--><link rel="apple-touch-icon" sizes="180x180" href="[63a301f0574f1a696ce6.png](view-source:https://192.168.0.101:9443/63a301f0574f1a696ce6.png)"/><link rel="icon" type="image/png" sizes="32x32" href="[2dcfc527d067d4ae3424.png](view-source:https://192.168.0.101:9443/2dcfc527d067d4ae3424.png)"/><link rel="icon" type="image/png" sizes="16x16" href="[112a479c093f4729251d.png](view-source:https://192.168.0.101:9443/112a479c093f4729251d.png)"/>

2. Find the one you need, it will be after the size like this sizes="180x180" href="[63a301f0574f1a696ce6.png](view-source:https://192.168.0.101:9443/63a301f0574f1a696ce6.png)" It lists the Size, sizes="180x180" followed by href="[<ImageName>.png] being the size of that particular file. I initially used a 180 image for all 3 files & it worked without issue, but I'd recommend doing at least a 32x32 one, if for nothing else to see how clearly the image is at size.
3. Add the mapping for your replacement PNG in the Docker-Compose to /public/<ImageName>.png e.g. - /path/on/local/storage/<YourFileName>.png:/public/<ImageNameFromStep2>.png

    ports:
      - 9000:9000
      - 9443:9443
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock:ro
      - /volume1/docker/portainer/portainer_data:/data
      - /volume1/docker/portainer/portainer-dsm-colors-129x180.png:/public/63a301f0574f1a696ce6.png   # 180x180
      - /volume1/docker/portainer/portainer-dsm-colors-25x35.png:/public/2dcfc527d067d4ae3424.png     #  25x32
      - /volume1/docker/portainer/portainer-dsm-colors-25x35.png:/public/112a479c093f4729251d.png     #  12x16
      - /volume1/docker/log/var/log:/var/log:rw
    restart: always

4. If you want to customize your Dashboard logo as well so it shows up on the Login Screen, resizes to fit, & is a local file instead of a wewb hosted one:
   1. Right-Click on the current logo in the Top-Left on any page in Portainer
   2. Open Image In New Tab
   3. Copy the address
   4. Optionally: Save the image to edit
   5. Goto Settings
   6. Slide on the Use custom logo switch & paste in the address you copied from the image
   7. Place your edited or custom SVG image somewhere Docker has access to
   8. Map your image to the same filename we copied earlier in the /public directory of the container

    ports:
      - 9000:9000
      - 9443:9443
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock:ro
      - /volume1/docker/portainer/portainer_data:/data
      - /volume1/docker/portainer/portainer-dsm-colors-129x180.png:/public/63a301f0574f1a696ce6.png     # 180x180
      - /volume1/docker/portainer/portainer-dsm-colors-25x35.png:/public/2dcfc527d067d4ae3424.png       #  25x32
      - /volume1/docker/portainer/portainer-dsm-colors-25x35.png:/public/112a479c093f4729251d.png       #  12x16
      - /volume1/docker/portainer/63c1259abd88a9d2cebc-dsm-colors.svg:/public/63c1259abd88a9d2cebc.svg  # Business
     # - /volume1/docker/portainer/7e697c5bab4f819328df.svg:/public/7e697c5bab4f819328df.svg            # Community
      - /volume1/docker/log/var/log:/var/log:rw
    restart: always

[robsd]

Does this persist across updates or does it go back to default when you update Portainer?

[LostOnTheLine]

Does this persist across updates or does it go back to default when you update Portainer?

I have updated many times & it seems to persist. I don't know if a major update will change that, but as long as the logo location stays the same it should work without issue

[robsd]

Portainer could really do with adding this as a customisation option, and possibly even colour themes to really drive it home and make it as distinguishable between instances as possible

Right now, the only was we can distinguish when on the tab is the logo and outside of the tab by updating the environment name