當各位在瀏覽網站時,有沒有曾經留意過,在分頁的左邊都會有個小小圖示,這個小玩意兒,有一個專屬名稱,稱做「Favicon」。
「Favicon」是由 2 個單字 Favorite + Icon 所組成的名詞,白話文意思就是「最愛的圖示」,而現今學習自架網站、網頁的人越來越多,過去要製作「Favicon」可能需要點程式語法思維,而現在網路上也已經有各種工具,可以協助各位快速製作跟設定自己的網站的「Favicon」。
今天這篇文章帶大家快速認識「Favicon」以及如何運用免費資源製作跟設定!
Favicon 網址列小圖示|簡單製作自己來
1. Favicon ( 網址列小圖示 ) 是甚麼?
「Favicon ( 網址列小圖示 )」全稱為「Favicon Icon」,也可稱「Website Icon」「Tab Icon」「URL Icon」「Bookmark Icon」。
從英文名字看就不難發現,它們指的就是當我們看網頁時,網頁瀏覽器 ( Browser ) 分頁標題左邊的小圖示 Icon,一般當我們在瀏覽網頁時,常常會打開很多分頁,而這個「Favicon ( 網址列小圖示 )」,就能快速透過圖示 Icon 的視覺設計,讓使用者能清楚辨別自己正在看甚麼網站,同時「Favicon ( 網址列小圖示 )」也能幫助各個平台與內容網站,建立自己的品牌形象識別度,做到一致性的企業識別宣傳。
👇 以「勇氣酵母」自己的網站為例,前面使用了「勇」的文字設計,做為部落格網站的「Favicon ( 網址列小圖示 )」。
👇 若沒有設定網站的小圖示,就像會下面這網站一樣,出現一個預設的地球 Icon 圖示,當使用者要切換、尋找你的網站時,因為這個圖示跟其他網站沒有設定的都長一樣,很有可能你的網站就被忽略而很難被找到了。
2. 為何 Favicon ( 網址列小圖示 ) 很重要?
在數位內容已成為我們生活中不可或缺的現在,每天每分鐘我們都在接觸網站網頁,「Favicon ( 網址列小圖示 )」想當然爾也成為網站、網頁製作不可或缺的一部分 ( 可以說是標準配備了 )。
如同前面提到的,這個小圖示除了可以展現網站品牌的視覺一致性外,也能提升專業感,並讓使用者提升瀏覽時的用戶體驗 ( User Experience,UX ),並且當使用者儲存你的網站至書籤列時,也能快速 show 出 Icon,方便使用者去管理跟快速連結!
👇 有製作「Favicon ( 網址列小圖示 )」的網站,當被儲存在書籤列、或是我的最愛時,Icon 圖示將自動出現。
3. Favicon ( 網址列小圖示 ) 支援的格式、尺寸?
支援格式
通常支援副檔名為 ICO, PNG, GIF, JPG 或 SVG 等格式,且大多數常用瀏覽器 ( Edge, Chrome, Firefox, Safari ) 也都支援顯示。
常見尺寸
目前常見使用的小圖示圖片比例仍為 1 : 1。
尺寸建議為 512 x 512 像素,最小不低於 72 × 72 像素。
4. Favicon ( 網址列小圖示 ) 設計小訣竅
通常小圖示的設計上,會直接使用品牌、公司、企業的 LOGO,不過在細節的部份,的確有些地方可以注意,整理如下供參考。
去背透明樣式
👇 就是保留圖示的輪廓,其餘背景去除,優點是視覺美感較好,但缺點是若是使用者的瀏覽器視窗顏色跟圖示的顏色有衝突 ( 同色系或色滲現象 ),那圖示相對就看不清楚了。
帶框樣式
👇 延續上一點說明,最常見的設計方式,就是將 LOGO 使用底色圖框做設計,優點是無論在甚麼底色的瀏覽器上,都能背看得清楚,例如以下 Google 跟 Klook 的設計,而圖框的造型,不限制是圓形、方形,只要能在規範的尺寸以內即可。
單色系樣式
👇 如果各位的 LOGO 或企業識別,屬於單色系或文字類型 ( Logomark ),則可以考慮使用單一色系做設計,一般來說建議使用深色或單色作為背景、LOGO 或文字使用白色,如此一來,在不同背景下,小尺寸的圖示 Icon 都能被看的清楚!
5. 三種方式製作 Favicon ( 網址列小圖示 )
#1 設計軟體
👇 第一種最快速、直接的方式,就是使用設計軟體來產出,如 Adobe 系列的 illustrator, photoshop,可參考最新的「Adobe Creative Cloud」優惠計畫。
不懂設計、要用最省的預算搞定!沒有問題,下面分享一款免費服務給各位使用。
名稱:favicon.io
連結:傳送門
👇 進入網站後,就是主要的編輯介面,使用單純的文字來做「Favicon ( 網址列小圖示 )」。
👇 除了英文數字之外,也有支援中文字 ( 不過字體要以 Google Fonts 有支援的為主 ),其他設定如背景造型 ( Background ),文字大小 ( Font Size ) 都能做調整。
👇 文字顏色跟背景顏色的調整。
👇 完成製作後,點選下載就可以拿到圖檔,下面2 個示範檔案給各位參考。
#2 Real Favicon Generator
第二種方式,使用線上的免費產生器來產出,但要先準備好比例為 1 比 1 的圖示圖檔,以例產生器去調整跟製作匯出。
名稱:Real Favicon Generator
連結:傳送門
👇 進入網站後,找到右邊的「Select your Favicon image」,點擊後上圖示圖片的檔案。
👇 上傳完成後,會自動出現目前圖示 Icon 在網頁、iOS、Android 預覽的樣子。
👇 每個預覽也都提供額外的設計樣式微調設定,可以修改輪廓、或是增加外框顏色,各位不妨自己動手玩玩。
👇 確認圖示示自己要的版本之後,按下「Generate your Favicons and HTML code」按鈕送出。
👇 接著系統會運算、打包出一份檔案,初學者或有網站後台介面可上傳圖檔的,選「Favicon package」按鈕下載。
👇 下載下來的檔案解壓縮後,我們會得到一包已經 adapt 好的各種格式小圖示檔案,之後就可針對自己的需求去做上傳。
#3 Favicon-Generator
第三種方式也是產生器,不過客製程度沒有上述第二種多,屬於快速產出轉檔的方式。
名稱:Favicon-Generator
連結:傳送門
👇 進入網站後 > 上傳圖示的圖片檔案 > 點選「Create Favicon」按鈕。
👇 上傳完畢後 > 會直接出現下載畫面 > 點選「Download the generated favicon」按鈕。
👇 下載後的檔案解壓縮後 > 會得到各種尺寸跟平台的格式圖檔。
6. 二種方式設定 WORDPRESS Favicon
#1 從預設外觀功能設定
👇 在左側選單列 > 外觀 > 自訂 > 點一下進入設定的畫面。
👇 找到「General」 > 點選。
👇 找到「General Settings」 > 點選。
👇 找到「Upload Favicon」選項 > 上傳小圖示的圖片檔案 > 完成後發布。
👇 大功告成!回到網頁前端檢查是否有成功。
#2 使用外掛設定
如果上述方法找不到設定的人,可以使用 WORDPRESS 外掛設定。
👇 進到後台 > 安裝外掛 > 輸入「RealFaviconGenerator」關鍵字 > 下載安裝 > 安裝完成記得點選啟用。
👇 會在左側的選單 > 設定 > 找到「Favion」選項。
👇 進去設定後 > 上傳圖示的圖片檔案 > 按下「Generae favion」按鈕完成上傳設定。
👇 如果各位的佈景主題是有支援 Favicon 上傳的,那麼會出現下面的畫面 > 設定請按照上面第 1 種方式進行設定。
3. 結語
「Favicon ( 網址列小圖示 )」是網頁、網站製作很重要的小地方之一,如果你的網站還沒有,趕緊花點時間,把這個重要的小東西加上去吧!
4. 同場加映
👇 5 個經營部落格 BLOG 的起心動念|你需要知道為何而寫
支持 & 贊助
👋 覺得文章有幫助嗎?你的回饋鼓勵將是我們持續創作的動力!
謝謝每一位造訪的各位,歡迎透過以下有價或無價的方式,給予我們支持提供更多更好的內容給大家!🤙🤙:
1. 更多精彩豐富內容,請追蹤以下平台。
2. 透過連結完成訂單,你獲得優惠也讓我們獲取些許分潤。
- 旅遊行程 & 票劵:Klook|KKday|GetYourGuide
- 住宿:Booking.com|Agoda|Hostelworld
- 機票:Trip.com|WayAway
- 租車:Rentalcars.com|Getrentacar.com
3. 小額 Donate 贊助喝杯咖啡 ( Red Bull 也不錯 )。
- 小額贊助支持:綠界ECPAY|BuyMeaCoffee|街口支付
- 加密貨幣贊助支持:幣安 ( 276682866 )|Metamask – Ethereum ( ERC20 )
4. 到下方的拍手👏動動手指按讚 5 次 ( 建議使用 Google 或 Facebook 做快速登入 )。