'Use different favicons when in Elementor edit or preview mode

I'd like to see on my browser tabs different favicons depending on whether it displays the Elementor editor, the Elementor preview or the public live pages. I'm not an expert in PHP, but looking on the web I found some info and tried this:

function elementor_custom_favicons() {
  if ( \Elementor\Plugin::$instance->preview->is_preview_mode() ) {
    $favicon_prefix = 'preview-';
  }
  if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
    $favicon_prefix = 'elementor-';
  }
  echo '<link rel="icon" href="'. get_stylesheet_directory_uri() . '/img/' . $favicon_prefix . 'favicon.png" type="image/png" />';
}
add_action('wp_head', 'elementor_custom_favicons');

It doesn't work and I don't know why. Of course I created the right images preview-favicon.png, elementor-favicon.png and just favicon.png and put them in the img folder of my child theme.

phpwordpressfaviconelementor


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions