HTML5 定義圖標

網(wǎng)站圖標一般顯示在瀏覽器選項卡、歷史記錄、書簽、收藏夾或地址欄中。圖標大小一般為 16x16px，透明背景。移動設備圖標大小：iPhone圖標大小為57x57px或114x114px (Retina屏），iPad圖標大小為72x72px或144x144px (Retina屏）。Android系統(tǒng)支持該尺寸的圖標。

■實例設計

    第1步，創(chuàng)建大小為16><16px的圖像，保存為favicon.ico，注意擴展名為.ico。為Retina屏創(chuàng)建一個 32x32px的圖像。

    第2步，為觸屏設備至少創(chuàng)建一個圖像，并保存為png格式。如果只創(chuàng)建了一個，將其命名為apple-touchicon.png。如有需要，還可以創(chuàng)建其他的觸屏圖標。

    第3步，將圖標圖像放在網(wǎng)站根目錄。

    第4步，新建HTML5文檔，在網(wǎng)頁頭部位置輸入下面代碼。

    <link rel="icon" href="/fayicon.ico" type="image7x-icon"/>

    <link rel="shortcut icon" href="/favicon.icq" type="image/x-icon"/>

第5步，瀏覽網(wǎng)頁，瀏覽器會自動在根目錄尋找這些特定的文件名，找到后就將圖標顯示出來。

■小結(jié)

如果瀏覽器無法顯示，則可能是瀏覽器緩存和生成圖標慢的問題，嘗試清除緩存，或者先訪問圖標：http://localhostZfavicon.ico，然后再訪問網(wǎng)站，就正常顯示了。