Mobile App icon

[Lauren]

Hi-

Is there any way to have a specific image used for mobile and tablet icons when saving my website to the homescreen of the tablet or phone? Other themes call this the “Touch Icon (iOS and Android)” or the “mobile touch image” etc.

Is there a way to have this for Buddyboss? If not can we add this option to a wishlist?

thanks,
Kim

[Alyssa]

@optimystic you will need to ask Apple for this, I have no clue, sorry.

[Alyssa]

@optimystic you will need to ask Apple for this, I have no clue, sorry.

[vone]

@optimystic check out the Favicon plugin https://wordpress.org/plugins/favicon-by-realfavicongenerator/
You will have to set up a favicon and then choose how you want it to be displayed on iOS, Android and other devices.

[Alyssa]

Thanks for the input Vone!

[Lauren]

@tjchester APPLE? really? This is a feature integrated in 3 of the last 4 themes I installed, has nothing to do with apple. Maybe you didn’t understand the question? But if you would like examples of the themes I have used that have this icon display option I will provide them. Have no idea what I would be asking apple for.

[Lauren]

@vosypa thank you for this i will look into it, but I am desiring it as a native feature. I don’t like to use plugins whenever I can avoid them.

[Alyssa]

@optimystic here is the Apple codex if you wish to add this to your site now. This is not currently a feature of our theme: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

[Brad]

I’ve added the following code to functions.php to achieve the desired result…

function add_favicons()
{
  echo "<link rel=\"shortcut icon\" href=\"http://tradingpremium.com/assets/icon-32.png\">\n";
  echo "<link rel=\"apple-touch-icon-precomposed\" href=\"http://tradingpremium.com/assets/icon-57.png\">\n";
  echo "<link rel=\"apple-touch-icon-precomposed\" sizes=\"72x72\" href=\"http://tradingpremium.com/assets/icon-72.png\">\n";
  echo "<link rel=\"apple-touch-icon-precomposed\" sizes=\"114x114\" href=\"http://tradingpremium.com/assets/icon-114.png\">\n";
  echo" <link rel=\"apple-touch-icon-precomposed\" sizes=\"144x144\" href=\"http://tradingpremium.com/assets/icon-144.png\">\n";
}
add_action('wp_head', 'add_favicons');

[Brad]

The following code is contained in header.php of the parent theme. Is there any way I can have the child theme remove/ignore this (as I do not want to have to update the favicon each time the theme is updated)?

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.ico" type="image/x-icon">

[Alyssa]

@tradingpremium you would need to copy the file to your child theme and remove this line.

[Brad]

@tjchester If I copy the file to the child theme, effectively I would not benefit from any updates of the file, right?

[Varun Dubey]

Hello @tradingpremium , if you keep your edits in parent theme you will lost it after updates, that’s why TJ suggested you keep/copy you edited files inside the child theme.

Regards
Varun Dubey