PHP GD 動態生成 Favicon 顯示未讀訊息數

功能簡介

參考 Gmail 實驗室功能，利用 PHP GD 库在瀏覽器分頁圖示上直接繪製未讀郵件計數，讓使用者無需切換分頁即可掌握新訊息。

核心實作

<?php
// favicon.php
$im = imagecreatefrompng("favicon.png"); // 支援 jpg/bmp 同理

// 取得要繪製的文字（預設 'V'）
$text = isset($_GET['char']) && $_GET['char'] !== '' ? $_GET['char'] : 'V';

// 分配顏色
$bg = imagecolorallocate($im, 255, 255, 255); // 白底
$fg = imagecolorallocate($im, 0, 0, 0);       // 黑字

// 繪製單一字元（字體大小 2，座標 5,1）
imagechar($im, 2, 5, 1, $text, $fg);

// 輸出 PNG
header('Content-Type: image/png');
imagepng($im);
imagedestroy($im);
?>

前端整合方式

<!-- 預設 favicon -->
<link rel="icon" href="favicon.png" id="favicon">

<script>
function updateFavicon(count) {
    const link = document.getElementById('favicon');
    if (count > 0) {
        link.href = 'favicon.php?char=' + encodeURIComponent(count > 99 ? '99+' : count);
    } else {
        link.href = 'favicon.png';
    }
}
// 範例：每 30 秒輪詢未讀數
setInterval(() => fetch('/api/unread').then(r => r.json()).then(d => updateFavicon(d.count)), 30000);
</script>

進階應用建議

• 多字元支援：改用 imagettftext() 配合 TTF 字型可繪製完整數字
• 圓形背景：先畫圓再寫字，視覺更醒目
• 快取機制：對相同計數值快取生成的圖片，減少 CPU 開銷
• Base64 內嵌：輸出 data:image/png;base64,... 避免額外 HTTP 請求

瀏覽器相容性

注意事項

1. Favicon 檔案建議 16x16 或 32x32 像素，過大無法完整顯示
2. HTTPS 網站需確保 favicon.php 同樣走 HTTPS，否則混合內容會被阻擋
3. 行動裝置瀏覽器對動態 favicon 支援度較低，建議搭配 Web Push 通知