網(wǎng)站ico 圖標(biāo)不會(huì)做?用這個(gè)小工具輕松搞定(網(wǎng)站ico圖標(biāo)制作)
給自己的網(wǎng)站加上一個(gè)小圖標(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è)計(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ā)布哦。