site_icon_meta_tags
Allows you to change or extend the list of HTML meta tags for the site icon.
For example, plugins can add or replace site icon meta tags for different devices.
By default, WordPress adds the following sizes of the image selected as the Site Icon in the Customizer; see get_site_icon_url():
<link rel="icon" href="{URL}" sizes="32x32" />
<link rel="icon" href="{URL}" sizes="192x192" />
<link rel="apple-touch-icon" href="{URL}" />
<meta name="msapplication-TileImage" content="{URL}" />
Usage
add_filter( 'site_icon_meta_tags', 'wp_kama_site_icon_meta_tags_filter' );
/**
* Function for `site_icon_meta_tags` filter-hook.
*
* @param string[] $meta_tags Array of Site Icon meta tags.
*
* @return string[]
*/
function wp_kama_site_icon_meta_tags_filter( $meta_tags ){
// filter...
return $meta_tags;
}
- $meta_tags(string[])
- Array of Site Icon meta tags.
Examples
#1 Remove the apple-touch-icon meta tag from the site's HTML <head>
add_filter( 'site_icon_meta_tags', 'wpkama_remove_site_apple_touch_icon', 0 );
/**
* Remove `apple-touch-icon` added by WordPress in HTML head.
*
* Callback for `site_icon_meta_tags` hook.
*
* @param string[] $meta_tags Array of Site Icon meta tags.
*
* @return string[] Array where the Apple Touch Icons removed.
*/
function wpkama_remove_site_apple_touch_icon( $meta_tags ) {
if ( is_customize_preview() && is_admin() ) {
return $meta_tags;
}
foreach ( $meta_tags as $key => $value ) {
if ( strpos( $value, 'apple-touch-icon' ) ) {
unset( $meta_tags[ $key ] );
}
}
return $meta_tags;
}
#2 Add additional icons to the site icon list
Suppose the theme settings (see get_theme_mod()) contain fields for different application icon types, and the existing icon must be replaced.
add_filter( 'site_icon_meta_tags', 'wpkama_replace_site_icons' );
/**
* Replace site icons with custom ones.
*
* @param array $meta_tags The default meta tags.
*
* @return array
*/
function wpkama_replace_site_icons( $meta_tags ) {
$is_enabled = get_theme_mod( 'override_icon' );
if ( ! $is_enabled ) {
return $meta_tags;
}
$android_icon_url = wp_get_attachment_image_src( (int) get_theme_mod( 'android_icon' ) )[0] ?? null;
$ios_icon_url = wp_get_attachment_image_src( (int) get_theme_mod( 'ios_icon' ) )[0] ?? null;
$windows_icon_url = wp_get_attachment_image_src( (int) get_theme_mod( 'windows_icon' ) )[0] ?? null;
foreach ( $meta_tags as $index => $value ) {
if ( $android_icon_url && strpos( $value, '192x192' ) ) {
$meta_tags[ $index ] = sprintf( '<link rel="icon" href="%s" sizes="192x192" />', esc_url( $android_icon_url ) );
}
if ( $ios_icon_url && strpos( $value, 'apple-touch-icon-precomposed' ) ) {
$meta_tags[ $index ] = sprintf( '<link rel="apple-touch-icon-precomposed" href="%s" />', esc_url( $ios_icon_url ) );
}
if ( $windows_icon_url && strpos( $value, 'msapplication-TileImage' ) ) {
$meta_tags[ $index ] = sprintf(
'<meta name="msapplication-config" content="none"><meta name="msapplication-TileImage" content="%s" />',
esc_url( $windows_icon_url )
);
}
}
return $meta_tags;
}Changelog
| Since 4.3.0 | Introduced. |
Where the hook is called
site_icon_meta_tags
wp-includes/general-template.php 3824
$meta_tags = apply_filters( 'site_icon_meta_tags', $meta_tags );