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.

2 Reaktionen zu »Website-Icon in WordPress: Eigene Bildgrößen hinzufügen«

Erwähnungen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert