Website-Icon in WordPress: Eigene Bildgrößen hinzufügen

Ab der kommenden WordPress-Version 4.3 wird es möglich sein im Customizer ein Website-Icon hochzuladen, das dann als Favicon und App-Icon genutzt wird. Wie ihr zu den vier Standard-Größen weitere hinzufügen könnt, zeige ich euch in diesem Beitrag.

Eigene Größen für Website-Icons in WordPress

WordPress wird ab 4.3 standardmäßig vier Größen des sogenannten Website-Icons erstellen:

• 32x32 Pixel für das Favicon
• 180x180 Pixel für das App-Icon auf iOS bis zum iPhone 6+
• 192x192 Pixel für das App-Icon auf Android und Chrome
• 270x270 Pixel für mittelgroße Windows-Kacheln

Neben diesen vier Größen gibt es aber noch andere Maße, die von irgendwelchen Geräten oder Programmen irgendwo genutzt werden. Bei dem Favicon Generator wird beispielsweise noch ein 152x152-Pixel-Icon für iOS-Geräte erzeugt. Wir werden jetzt in einem kleinen Plugin alle noch fehlenden Größen hinzufügen:

<?php
defined( 'ABSPATH' ) or die( "Nothing to see!" );
/**
 * Plugin Name: Custom site icon sizes
 * Description: Custom site icon sizes
 * Version: 1.0
 * Author: Florian Brinkmann
 * Author URI: https://florianbrinkmann.com
 */
function csiz_custom_site_icon_size( $sizes ) {
   array_push( $sizes, 57, 60, 72, 76, 114, 120, 144, 152, 96, 16 );
 
   return $sizes;
}
add_filter( 'site_icon_image_sizes', 'csiz_custom_site_icon_size' );
 
function csiz_custom_site_icon_tag( $meta_tags ) {
   array_push( $meta_tags,
       sprintf( '<link rel="apple-touch-icon" href="%s" sizes="57x57" />', esc_url( get_site_icon_url( null, 57 ) ) ),
       sprintf( '<link rel="apple-touch-icon" href="%s" sizes="60x60" />', esc_url( get_site_icon_url( null, 60 ) ) ),
       sprintf( '<link rel="apple-touch-icon" href="%s" sizes="72x72" />', esc_url( get_site_icon_url( null, 72 ) ) ),
       sprintf( '<link rel="apple-touch-icon" href="%s" sizes="76x76" />', esc_url( get_site_icon_url( null, 76 ) ) ),
       sprintf( '<link rel="apple-touch-icon" href="%s" sizes="114x114" />', esc_url( get_site_icon_url( null, 114 ) ) ),
       sprintf( '<link rel="apple-touch-icon" href="%s" sizes="120x120" />', esc_url( get_site_icon_url( null, 120 ) ) ),
       sprintf( '<link rel="apple-touch-icon" href="%s" sizes="144x144" />', esc_url( get_site_icon_url( null, 144 ) ) ),
       sprintf( '<link rel="apple-touch-icon" href="%s" sizes="152x152" />', esc_url( get_site_icon_url( null, 152 ) ) ),
       sprintf( '<link rel="icon" href="%s" sizes="96x96" />', esc_url( get_site_icon_url( null, 96 ) ) ),
       sprintf( '<link rel="icon" href="%s" sizes="16x16" />', esc_url( get_site_icon_url( null, 16 ) ) )
   );

   return $meta_tags;
}
add_filter( 'site_icon_meta_tags', 'csiz_custom_site_icon_tag' );Code-Sprache: HTML, XML (xml)

Zuerst werden in einer Funktion dem Array $sizes die Größen hinzugefügt, die wir nich erzeugen möchten. In der Funktion csiz_custom_site_icon_tag() geben wir dem Array $meta_tags die HTML-Tags als Einträge mit. Mittels get_site_icon_url()-Funktion holen wir uns die URL zu der jeweiligen Version des Website-Icons.

Das wars auch schon. Jetzt könnt ihr im Customizer (aber erst ab WordPress 4.3, das voraussichtlich am 18. August veröffentlicht wird) ein Website-Icon auswählen und bekommt alle Größen ausgegeben. Den Code des Plugins findet ihr auch auf GitHub.