網(wǎng)站ico 圖標(biāo)不會(huì)做?用這個(gè)小工具輕松搞定(網(wǎng)站ico圖標(biāo)制作)

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

網(wǎng)站ico 圖標(biāo)不會(huì)做?用這個(gè)小工具輕松搞定(網(wǎng)站ico圖標(biāo)制作)

網(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è)計(jì)軟件設(shè)計(jì)出來(lái)的圖標(biāo)一般是png、jpg這等格式的,但ico圖標(biāo)不同于png、jpg這類常見(jiàn)的圖片格式,需要簡(jiǎn)單的轉(zhuǎn)換一下。

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

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

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

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

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

MacOS用戶可以直接通過(guò)命令行去安裝(前提需要先安裝好brew):

brew install png2ico

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

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

使用步驟:

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

png2ico favicon.ico logo16x16.png logo32x32.png

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

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

png2ico favicon.ico logo32x32.png

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

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

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

相關(guān)新聞

聯(lián)系我們
聯(lián)系我們
公眾號(hào)
公眾號(hào)
在線咨詢
分享本頁(yè)
返回頂部