前段時間在研究網站圖標(Favicon)如何正確運作,一般來說,加入網站圖標的做法并不困難,甚至很多網站會說只要一段源碼就能做到,但現在因為有移動設備,也要考量到網站被新增到桌面時會用到不同圖標尺寸,因此就必須額外準備各種不同尺寸大小的網站圖標。

想給網站換個圖標?收下這個超強大的免費生成器!

本文要介紹的「Favicon.io」是一個協助站長制作網站圖標(Favicon)的線上生成器,主要有三種功能,以文字、圖片或表情符號制作網站圖標,然后產生各種圖片大小尺寸,以及一個必要的 favicon.ico 文檔,只要將相關文檔上傳到網站服務器根目錄,依照 Favicon.io 提供的源碼范例稍作修改就能為網站加入圖標,和之前介紹的 Favic-o-Matic 差不多。

如果網站還沒有適合的圖案,Favicon.io 支持直接以文字產生網站圖標,只要設定要顯示的文字、字型、邊框、文字大小然后設定顏色及背景顏色即可。

對于已經有 Logo 的網站,Favicon.io 可以將現有的圖案轉為各種尺寸,支持 JPG、PNG 和 BMP 格式,亦可轉換為 favicon.ico。這個文檔比較特別,也是瀏覽器會使用的特殊圖片格式,在單一文檔加入多層次圖案,每一層圖案都能有不同大小,常見尺寸包括 16x16px、32x32px 和 48x48px。

為了獲得最好的兼容性,瀏覽器通過 favicon.ico 文檔在不同位置顯示不同尺寸圖片,例如書簽列、網址列、瀏覽器標簽或桌面捷徑等等,若你覺得當前使用者的網站圖標不夠精確或想要更新一下,Favicon.io 是個很好用的工具。

Favicon.io

網站鏈接:https://favicon.io/

使用教學

開啟 Favicon.io 網站會看到三個主要功能,從文字轉 ICO、從 PNG(或其他圖片格式)轉 ICO 或是從表情符號轉 ICO ,選擇后能進入生成。

想給網站換個圖標?收下這個超強大的免費生成器!

以文字字母制作成網站圖標也是一個常見的做法,通過 Favicon.io 使用者就無需以繪圖軟件制作,從網頁就能輸入要顯示的文字、邊框、文字字型和大小,這里的字型很多(應該是直接從 Google Fonts 載入),可以設計出許多好看的風格,最后選擇一下文字和背景顏色就能在左上角預覽效果。

想給網站換個圖標?收下這個超強大的免費生成器!

另一種是將你現有的圖片轉為網站圖標,這可能是大部分人會選擇的方式,生成后點選右上角的「Download」就能將所有圖標打包下載。

想給網站換個圖標?收下這個超強大的免費生成器!

下載后解壓縮會獲得一些文檔,包括:

  • android-chrome-192×192.png
  • android-chrome-512×512.png
  • apple-touch-icon.png
  • favicon-16×16.png
  • favicon-32×32.png
  • favicon.ico
  • site.webmanifest

依照 Favicon.io下方說明,將這些文檔上傳到你的網站服務器根目錄,接著將下方的源碼復制、貼上你的 HTML 網頁文檔的 head 標簽即可。

想給網站換個圖標?收下這個超強大的免費生成器!

另一個有趣的功能是如果你網站沒有現有圖案、也不想要使用文字制作的網站圖標,還有另一種圖片來源就是表情符號(Emoji),進入后選擇你要使用的圖案,就會幫你制作成各種尺寸大小的網站圖標。

想給網站換個圖標?收下這個超強大的免費生成器!

一樣可從線上預覽,查看不同尺寸的顯示效果,點選「Download」取得各種格式圖片。

想給網站換個圖標?收下這個超強大的免費生成器!

值得一試的三個理由:

  • ?線上產生網站圖標 Favicon,可從文字制作或以現有圖片轉換
  • 可制作出常見尺寸、適用于移動設備的圖片文檔
  • 解壓縮將圖片上傳服務器根目錄,復制網站的源碼范例即可載入
點贊 5
收藏 17
繼續閱讀相關文章

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
評論 收藏