給自己的網(wǎng)站加上一個小圖標(biāo)，顯示既專業(yè)又美觀。

網(wǎng)站左上角顯示的小圖標(biāo)一般是ico格式的圖片，然后在HTML里使用代碼去設(shè)置ico小圖片為該網(wǎng)站的小標(biāo)。

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

設(shè)計軟件設(shè)計出來的圖標(biāo)一般是png、jpg這等格式的，但ico圖標(biāo)不同于png、jpg這類常見的圖片格式，需要簡單的轉(zhuǎn)換一下。

雖然有些瀏覽器支持網(wǎng)站圖標(biāo)使用png圖片，但是建議使用ico格式的圖片，兼容性更好些，同時最好放置在網(wǎng)站的根目錄下

有了png格式的小圖標(biāo)如何轉(zhuǎn)成ico格式的圖標(biāo)呢？

試下png2ico這款小軟件，它支持在Windows、MacOS、Linux平臺上將png格式的圖片轉(zhuǎn)成ico格式的圖片。

這款小軟件的下載地址 https://www.winterdrache.de/freeware/png2ico/

Windows用戶需要至官網(wǎng)去下載這個小軟件

MacOS用戶可以直接通過命令行去安裝（前提需要先安裝好brew）：

brew install png2ico

Linux用戶需要到官網(wǎng)下載源碼自己編譯下。

這款軟件不支持GUI圖形化操作，需要通過命令行去運(yùn)行它。

使用步驟：

先準(zhǔn)備好兩張png圖片：logo16x16.png（16像素X16像素）和logo32x32.png（32像素X32像素），然后通過命令行運(yùn)行

png2ico favicon.ico logo16x16.png logo32x32.png

上述命令可以將這兩張png的圖片包含在一個favicon.ico文件中，轉(zhuǎn)換之后這個favicon.ico就可以放置在網(wǎng)站中，作為網(wǎng)站的小標(biāo)使用了。

也可以只將一張png圖片放置在ico文件中：

png2ico favicon.ico logo32x32.png

生成好這個favicon.ico圖標(biāo)并將它正確的放置在網(wǎng)站根目錄中，通過代碼去正確的引用它，刷新瀏覽器你就可以看到漂亮的網(wǎng)站小標(biāo)出現(xiàn)了。

如果刷新后沒有出現(xiàn)小圖標(biāo)，可能是瀏覽器緩存造成的，需要清理下瀏覽器緩存，或者換個瀏覽器試試

本小教程有用嗎？覺得有用就快收藏，轉(zhuǎn)發(fā)吧，同時別忘了關(guān)注我們「遠(yuǎn)懷學(xué)堂」，不斷有好的教程發(fā)布哦。