Jump to content

Adding a favicon to the admin/CMS


a-ok
 Share

Recommended Posts

  • 11 months later...

Hi Richard, I don't know if you still need this, but I managed to use a favicon without any issues.

First: install the Reno admin theme
Second: navigate to wire/modules/AdminTheme/AdminThemeReno/default.php
Third: paste your favicon links into the <head>-area in my case line 56

 

    <!-- Favicons -->
    <link rel="apple-touch-icon" sizes="57x57" href="<?php echo $config->urls->templates?>favicons/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="<?php echo $config->urls->templates?>favicons/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="<?php echo $config->urls->templates?>favicons/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="<?php echo $config->urls->templates?>favicons/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="<?php echo $config->urls->templates?>favicons/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="<?php echo $config->urls->templates?>favicons/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="<?php echo $config->urls->templates?>favicons/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="<?php echo $config->urls->templates?>favicons/apple-touch-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="<?php echo $config->urls->templates?>favicons/apple-touch-icon-180x180.png">
    <link rel="icon" type="image/png" href="<?php echo $config->urls->templates?>favicons/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="<?php echo $config->urls->templates?>favicons/favicon-194x194.png" sizes="194x194">
    <link rel="icon" type="image/png" href="<?php echo $config->urls->templates?>favicons/favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="<?php echo $config->urls->templates?>favicons/android-chrome-192x192.png" sizes="192x192">
    <link rel="icon" type="image/png" href="<?php echo $config->urls->templates?>favicons/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="<?php echo $config->urls->templates?>favicons/manifest.json">
    <link rel="mask-icon" href="<?php echo $config->urls->templates?>favicons/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="shortcut icon" href="<?php echo $config->urls->templates?>favicons/favicon.ico">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="<?php echo $config->urls->templates?>favicons/mstile-144x144.png">
    <meta name="msapplication-config" content="<?php echo $config->urls->templates?>favicons/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
Link to comment
Share on other sites

  • 3 months later...

You could do this in admin.php (above the line that brings in controller.php):

$wire->addHookAfter('AdminTheme::getExtraMarkup', function($event) {
  $extras = $event->return;
  $extras['head'] .= '<link rel="shortcut icon" href="'.wire('config')->urls->templates.'favicon.png">';
  $event->return = $extras;
});
  • Like 8
  • Thanks 1
Link to comment
Share on other sites

  • 8 months later...

I don't know is this topic is still alive?

Just put this  line in the header of _main.php, close your browser and restart or refresh (CTRL-F5) a few times and the favicon appears.

	<link rel="icon" href="<?=urls()->templates?>styles/images/favicon.ico">

 

  • Like 1
Link to comment
Share on other sites

  • 2 years later...

Thank you @Robin S for that snippet!

One can also use fontawesome icons with this service: https://gauger.io/fonticon/

Just download the .ico to your website and include it like robin showed above:

$this->addHookAfter('AdminTheme::getExtraMarkup', function($event) {
	$extras = $event->return;
	$extras['head'] .= '<link rel="shortcut icon" href="/site/templates/img/favicon.ico">';
	$event->return = $extras;
});

? 

Link to comment
Share on other sites

It's even easier.

Just add a favicon.ico (backend) to and a favicon.png (website) to your web root.

For the real website you define something like <link rel="shortcut icon" href="/favicon.png" type="image/png">

While the website shows your .png the backend will show your .ico.

Link to comment
Share on other sites

Thx for clarifying. That doesn't work here on Win10 + Chrome ? I don't find any occurances of "favicon.ico" in the wire folder, so I guess your browser is making you see the favicon, not ProcessWire?

Link to comment
Share on other sites

Weird... the favicon.ico thing works like this:

The browser looks in certain places for certain files.

The favicon.ico is expected here: https://www.domain.tld/favicon.ico and will be displayed if it exists.

You can... nonetheless... define an alternative file as described above to change default behaviour or to show another file like a .png

Sometimes browsers are kind of lazy and don't look for new files they either haven't found for a while or have already cached. So using another browser or adding a bookmark to your bookmark bar can help to trigger a reload/refresh.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...