更新日期：2021-06-29

想要設定 favicon icon（網站圖示），可以直接到後台，外觀 > 佈景主題 > 自訂裡面，找到「網站識別」去選擇你想要建立的圖案即可。

此時檢視網頁原始碼，你會看到多了幾行描述不同尺寸的 icon 語法，大概是這樣：

<link rel="icon" href="http://www.abc.com/wp-content/uploads/icon-32x32.jpg" sizes="32x32" />
<link rel="icon" href="http://www.abc.com/wp-content/uploads/icon-192x192.jpg" sizes="192x192" />
<link rel="apple-touch-icon" href="http://www.abc.com/wp-content/uploads/icon-180x180.jpg" />
<meta name="msapplication-TileImage" content="http://www.abc.com/wp-content/uploads/icon-270x270.jpg" />

32, 180, 192, 270 這幾個圖檔尺寸是被定義在 wp-amdin/includes/class-wp-site-icon.php 的 function site_icon_sizes 裡面。想要增加不同的尺寸，可以下這樣子語法：

add_filter( 'site_icon_image_sizes' , 'sig_add_my_icon_size' );
function sig_add_my_icon_size( $site_icon_sizes ){
    $site_icon_sizes[] = 48;
    $site_icon_sizes[] = 96;
    return $site_icon_sizes;
});

上面語法加入後，再去後台選擇新的網站圖示，這樣子才會有新的尺寸圖檔被製作出來。接著如何顯示在網頁上？需要再加入以下這段語法：

add_filter( 'site_icon_meta_tags', 'sig_my_icon_meta_tags' );
function sig_my_icon_meta_tags( $meta_tags ){
    $icon_48 = get_site_icon_url( 48 );
    if ( $icon_48 ) {
        $meta_tags[] = sprintf( '<link rel="icon" href="%s" sizes="48x48" />', esc_url( $icon_48 ) );
    }

    $icon_96 = get_site_icon_url( 96 );
    if ( $icon_96 ) {
        $meta_tags[] = sprintf( '<link rel="icon" href="%s" sizes="96x96" />', esc_url( $icon_96 ) );
    }
    return $meta_tags;
}

補充：
1. 在版本 5.3 之後，若是沒有設定網站圖示，程式會自動幫你生出一個代表 WordPress 的 icon，圖示的路徑 /wp-includes/images/w-logo-blue-white-bg.png，相關函數可以查 do_favicon
2. Google 搜尋結果，如何顯示網站小圖示 https://developers.google.com/search/docs/advanced/appearance/favicon-in-search?hl=zh-tw