Want to Brand your administration backend? This article shows you how to replace the logos and favicons in the administration panel.

Backend Logos

If you are familiar with replacing the logos on the frontend, then the backend is a charm as it is basically the same method.

  • Backend > System >  Administrator templates > Atum Details and Files > Create Child Template
  • Next open the Administrator Template Styles screen. Select your new style and enter the logos you want displayed.
  • Close the screen and check to see that your new style has been made the default style.

CSS Files

Rather than change the whole color scheme, I choose to change just the background color of the logo. I also use the same logo for all three sizes and use the following css instead.

Place the following lines into a user.css file and save in this directory: root/templates/administrator/atum/css

  • .header .logo {background-color:#d3e5f4!important;}
  • .header .logo img{width:272px;height:54px!important;}

Changing the favicons

Find the index.php in the /administrator/templates/atum/ and add the following lines to the file index.php at about line 104 just after the <head>

 <!-- Added by Cayenne Design -->
<!-- ICO Favicon -->
<link rel="icon" type="image/x-icon" href="/../../../images/favicons/cayenne_ico_16.png">

<!-- PNG Favicon -->
<link rel="icon" type="image/png" sizes="286x286" href="/../../../images/favicons/cayenne_ico_286_transparent.png">
<link rel="icon" type="image/png" sizes="64x64" href="/../../../images/favicons/cayenne_ico_64.png">
<link rel="icon" type="image/png" sizes="32x32" href="/../../../images/favicons/cayenne_ico_32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/../../../images/favicons/cayenne_ico_16.png">

<!-- SVG Favicon -->
<link rel="icon" type="image/svg+xml" href="/../../../images/favicons/cayenne_ico.svg">

<!-- WEBP Favicon (Note: Not all browsers support WEBP for favicons, ensure to have fallbacks) -->
<link rel="icon" type="image/webp" href="/../../../images/favicons/cayenne_ico.webp">

<!-- Apple Touch Icon (Optional for Apple devices) -->
<link rel="apple-touch-icon" sizes="286x286" href="/../../../images/favicons/apple-touch-icon.png">

<!-- Manifest for PWA (Optional) -->
<link rel="manifest" href="/../../../images/favicons/site.webmanifest">

"This article was initially drafted with the assistance of ChatGPT and other related GPTs, which were instrumental in generating outlines, suggesting ideas, conducting preliminary research, and creating images. However, it's important to note that all written content has undergone a thorough review process. In most cases, the material has been extensively rewritten to ensure clarity, coherence, and stylistic consistency. Moreover, the Cayenne editorial staff has meticulously checked the information presented for accuracy and reliability. Our commitment to quality and precision in our reporting and content creation process is paramount, ensuring that our readers receive trustworthy and informative articles."
ChatGPT Acknowledgment