Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 5, 2024 at 11:09 am #1472994
    ausgesonnen

    Hallo,
    the Ionos webchecker says that i need to add a touch icon. I cannot find a function for that in the theme options. Is there another way?

    Best
    Pete

    December 6, 2024 at 5:43 am #1473055
    Ismael

    Hey ausgesonnen,

    Thank you for the inquiry.

    You have to create an image for iOS devices that is at least 180x180px in PNG format. Name it apple-touch-icon.png, upload it to the Media Library, and add this filter to the functions.php file:

    add_filter( 'avf_favicon_final_output', 'avf_favicon_final_output_mod', 10, 3 );

function avf_favicon_final_output_mod( $icon_link, $url, $type ) {
    $upload_dir = wp_get_upload_dir();
    $touch_icon_url = $upload_dir['baseurl'] . '/apple-touch-icon.png';
    $touch_icon_link = ' 	<link rel="apple-touch-icon" href="' . esc_url( $touch_icon_url ) . '">';
    return $icon_link . "\n" . $touch_icon_link;
}

    Best regards,
    Ismael

    December 6, 2024 at 7:10 am #1473062
    Guenni007

    Ismaels solution is the fastest method. But if you like:
    Former tips of Günter show me how to get an input field for an apple touch icon via child-theme functions.php:

    Bildschirmfoto-2024-12-06-um-08-01-11

    put this to your child-theme functions.php:

    function my_avf_option_page_apple_touch_icon( array $avia_elements = array()){
  $slug = "avia";
  $id = 'favicon';
  $new_element =  array(
      "slug"  => "avia",
      "name"  => __( "Apple Touch Icon", 'avia_framework' ),
      "desc"  => __("Specify an Apple Touch Icon for your site.", 'avia_framework')." <br/>".__("recommended format: .png", 'avia_framework')."<br/>".__("best format will be 180px in square", 'avia_framework'),
      "id"    => "avia_appleicon",
      "type"  => "upload",
      "label" => __( "Use Image as Apple Touch 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;
	    break;
	  }
	} 
	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_apple_touch_icon', 10, 1 );

function add_apple_icon_to_header(){
?>
<link rel="apple-touch-icon" href="<?php echo avia_get_option('avia_appleicon'); ?>" type="<?php echo image_type_to_mime_type(exif_imagetype( avia_get_option('avia_appleicon'))); ?>">
<?php
}
add_action( 'wp_head',  'add_apple_icon_to_header', 10);

    upload your image to media-library – best would be to name it: apple-touch-icon.png
    or if you do not like those automatic stylings name it: apple-touch-icon-precomposed.png
    180px in square is best – because iPhones uses those resolutions.

    December 6, 2024 at 7:52 am #1473073
    Ismael

    Hi,

    Thanks for the info @Guenni007.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.