Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
  • #545669

    I’m having trouble with the responsiveness for big cellphone screens such as iPhone 6s plus… It is not adapting correctly.. How can I fix it?

    Also, I need to create an icon image when the website is added to Home Screen on Iphones, so it looks like an app on IOS. Like the two last icons of the image I sent, they are not apps, they are websites added to home screen.



    Hi clarissamansour,

    Your site looks fine on my end using iphone4/Chrome, could you post screenshots of the problem you are having please? Also specify what browser you are using.



    Hello, you didn’t answer my second request. Thank you



    Please add following code to Google Analytics field in Enfold theme options

    <link rel="apple-touch-icon" href="/your-custom-icon.png"/>

    Best regards,


    Hello, unfortunately it didn’t work. How can I solve this issue??

    I put the code: <link rel=”apple-touch-icon” href=”uluwatu_logo_apple.png”/>
    Inside the Google Analytics field.

    When I add the website to Home Screen on my mobile, I doesn’t show correctly.



    Please add following code to Functions.php file in Appearance > Editor

    function add_custom_code(){
    <link rel="apple-touch-icon" href="/your-custom-icon.png"/>
    add_action('wp_head', 'add_custom_code');

    Best regards,


    Hello, I pasted the code here (look at image/link) but it didn’t work either.

    Best, C.



    can you provide us admin access please? so we can take a closer look into it and check it.
    Post login details here as private reply.



    Yes sure



    I can’t find the code Yigit provided you from here when checking your functions.php. Can you use it again please? cause we need to check it. Let us know when you are ready.

    Best regards,



    With regards to adding a home screen icon on mobile devices, is the above code still valid?

    If so, do we need to add both the function and the GA code?




    Hi Phil,

    Yes, you can try using the code. Please let us know if it does not work for you.

    Best regards,


    you always can add those icons like this (but i think this is yigits code – with more options):

    add_action('wp_head', 'ava_add_icons');
    function ava_add_icons() {
    <link rel="shortcut icon" type="image/x-icon" href="/wp-content/uploads/icons/favicon.ico">
    <link rel="icon" type="image/x-icon" href="/wp-content/uploads/icons/favicon.ico">
    <link rel="icon" type="image/gif" href="/wp-content/uploads/icons/favicon.gif">
    <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon.png">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon.png">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-57x57.png" sizes="57x57">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-60x60.png" sizes="60x60">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-72x72.png" sizes="72x72">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-76x76.png" sizes="76x76">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-114x114.png" sizes="114x114">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-120x120.png" sizes="120x120">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-128x128.png" sizes="128x128">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-144x144.png" sizes="144x144">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-152x152.png" sizes="152x152">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-180x180.png" sizes="180x180">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-precomposed.png">
    <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-160x160.png" sizes="160x160">
    <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-192x192.png" sizes="192x192">
    <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-196x196.png" sizes="196x196">
    <meta name="msapplication-TileImage" content="/wp-content/uploads/icons/win8-tile-144x144.png"> 
    <meta name="msapplication-TileColor" content="#ffffff"> 
    <meta name="msapplication-navbutton-color" content="#ffffff"> 
    <meta name="application-name" content="homeurl.de"/> 
    <meta name="msapplication-tooltip" content="homeurl.de"/> 
    <meta name="apple-mobile-web-app-title" content="homeurl.de"/> 
    <meta name="msapplication-square70x70logo" content="/wp-content/uploads/icons/win8-tile-70x70.png"> 
    <meta name="msapplication-square144x144logo" content="/wp-content/uploads/icons/win8-tile-144x144.png"> 
    <meta name="msapplication-square150x150logo" content="/wp-content/uploads/icons/win8-tile-150x150.png"> 
    <meta name="msapplication-wide310x150logo" content="/wp-content/uploads/icons/win8-tile-310x150.png"> 
    <meta name="msapplication-square310x310logo" content="/wp-content/uploads/icons/win8-tile-310x310.png"> 

    a nice but german page to create those different sizes is: web-stuebchen.de


    and a bit more elegant but not as mighty as the code above is to have on enfold options dialog under the favicon input field an apple touch icon input field ! : put this to your functions.php of your child-theme (all credits goes to the other Günter)

    function my_avf_option_page_data_add_elements( array $avia_elements = array() )
      $slug = "avia";
      $id = 'favicon';
      $new_element =  array(
              "slug"  => "avia",
              "name"  => __( "Apple Icon", 'avia_framework' ),
              "desc"  => __("Specify an Apple Touch Icon for your site.", 'avia_framework')." <br/>".__("Accepted formats: .png", 'avia_framework')."<br/>".__("best format will be 158px in square", 'avia_framework'),
              "id"    => "avia_appleicon",
              "type"  => "upload",
              "label" => __( "Use Image as Apple Icon", 'avia_framework' ) );
      $found = false;
      $index = 0;
      foreach( $avia_elements as $key => $element )
    	{ $index++;
    	    if( isset( $element['id'] ) &&  ( $element['id'] == $id ) && isset( $element['slug'] ) && ( $element['slug'] == $slug ) ) { 
    	      $found = true;
    	if( ! $found ) { 
    		$avia_elements[] = $new_element;
    	else {
    	$avia_elements = array_merge( array_slice( $avia_elements, 0, $index ), array( $new_element ), array_slice( $avia_elements, $index  ) );
    	return $avia_elements;
    add_filter( 'avf_option_page_data_init', 'my_avf_option_page_data_add_elements', 10, 1 );


    Thanks for sharing @guenni007, much appreciated :-)

    Best regards,


    Thanks @guenni007 – I”ll give that a try


    Hi Phil,

    Great, let us know if you have any luck with it.

    Best regards,


    Hi Rikard,

    I found this plugin

    A bit out of date but seems to work for iOS and it means we don’t have to code anything into functions.

    Now I’m looking to find a way to do something similar with Android.





    Thanks for the update.

    According to a stackoverflow thread, the iOS home screen icon markup should also work for android devices. If the plugin is generating the following markup then it should work for android devices, too.

     	<link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">

    // https://stackoverflow.com/questions/43467789/customize-icon-for-add-to-home-screen

    Or you can just add the markup manually as @Guennie007 suggested.

    Best regards,

Viewing 19 posts - 1 through 19 (of 19 total)

You must be logged in to reply to this topic.