Favicon.io 最強大的網站圖示產生器,可線上文字製作或以圖片轉換

最後更新於 2020 年 07 月 07 日

前段時間在研究網站圖示(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/

使用教學

STEP 1

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

STEP 2

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

另一種是將你現有的圖片轉為網站圖示,這可能是大部分人會選擇的方式,例如免費資源網路社群已經有個 Logo 設計,透過 Favicon.io 將圖片拖曳進去後就會轉為幾種常見的網站圖示大小,再加入適當語法後就能在網站上使用這些圖案。

產生後點選右上角的「Download」就能將所有圖案打包下載。

STEP 3

下載後解壓縮會獲得一些檔案,包括:

  • 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 標籤即可。

STEP 4

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

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

值得一試的三個理由:

  1. 線上產生網站圖示 Favicon,可從文字製作或以現有圖片轉換
  2. 可製作出常見尺寸、適用於行動裝置的圖片檔名
  3. 解壓縮將圖片上傳伺服器,複製網站的原始碼範例即可載入

 

相關的文章

Favic-o-Matic 快速裁切、製作各種尺寸大小的 Favicon 網站圖示

最近無意間發現免費資源網路社群在 Google 搜尋結果無法正確顯示網站圖示,也就是大家都知道的 Favicon(Favorites icon),這個小小圖示代表一個網站,經常會顯示於瀏覽器標籤列或書籤,有些時候當網網頁打開太多,標題無法全部顯示於標籤列,我們就會很習慣透過網站圖示來判斷是不是自己需要的網頁。前段時間 Google 搜尋調整結果呈現的樣式,在網站標題旁邊加上圖示,因此好好設定一下自己的網站圖示格外重要(雖然後來這個設計被很多網友抗議 Google 決定要重新研議)。

Google Search Ads Highlighter 為搜尋結果的廣告加入不同背景色效果(Chrome 擴充功能)

Google 去年在行動搜尋上推出新的樣式,最主要的外觀差異就是將網站的品牌往上移動,並將網站名稱及網站圖示(favicon)顯示於搜尋結果上方,聲稱能幫助使用者更了解資訊來源和要尋找的頁面。今年一月 Google 決定將這個更新推送到桌面版搜尋,但引來不少使用者反彈,例如搜尋結果混雜著網站標誌看起來非常凌亂,而且顯示於頂部的廣告因為標誌變小很容易引起誤點(被誤認為是一般搜尋結果),後來在十天左右就緊急將網站標誌拿掉,並決定進行新的實驗以找出更適合放置網站圖示的位置。

ScreenApp.io 透過瀏覽器進行螢幕錄影,可選擇錄製應用程式或網頁畫面

以往要錄製螢幕畫面必須透過螢幕錄影軟體或是瀏覽器外掛,例如 Screencast-O-Matic 就是我非常喜歡的螢幕錄影工具,錄製後還能直接將影片上傳 YouTube,另一款 Activepresenter 也深受不少使用者喜愛,如果你使用 Google Chrome 瀏覽器,可考慮下載 Loom、Screencastify 等擴充功能,也有一樣的效果。

Scrnrcrd 從瀏覽器螢幕錄影,免安裝或下載軟體外掛程式

現在瀏覽器可以做的事真的非常多,很多時候甚至取代軟體,連瀏覽器外掛都不用額外安裝,之前介紹過一個很有用的服務「RecordScreen.io 從瀏覽器進行螢幕錄影免下載安裝軟體外掛」就非常方便,直接從瀏覽器來選取要錄影的視窗,接著就能把一連串動作轉為影片讓使用者匯出下載,不過對於臨時要錄製螢幕畫面來說還行,若要更多功能還是得透過專業的錄影工具,例如我個人很喜歡的 Screencastify、適用於 Windows、macOS 的 Screencast-O-Matic 或 ActivePresenter 等等,YouTube 也有提供線上錄影功能。

Watermark.ws 線上浮水印工具,保護你的相片影片和文件免於被竊取盜用

這陣子遇到不少涉嫌抄襲免費資源網路社群文章的有心人士,對於內容創作者來說,這些文字就像自己的孩子,必須花費相當多時間心血才能完成,但要竊取很容易,防不勝防。以前沒有花太多時間處理類似問題,相信大家都取之有道,標示原作者、連回出處來源是最基本的準則,後來實在太離譜,只好一一寫信請對方將盜文撤除,那麼創作者要如何避免自己原創內容被其他人竊取呢?

QRCode Monkey 免費 QR Code 產生器,可自訂顏色、樣式或加入 Logo

現在到處都能看到 QR Code 被實際應用的蹤跡,QR 來自英文 Quick Response 縮寫,意思是可以快速反應、解碼並讀取內容,而現在只要透過手機的相機就能掃描後取得 QR Code 儲存的內容,經常被使用於票券驗證(像是活動或交通票券)或開啟網址,例如在掃描後就能連到預先設定好的鏈結,或是對 Facebook 粉絲專頁按讚或加入 LINE 帳號,減少手動輸入時間,應用層面非常廣泛。

回應