如何修改WordPress網站圖示(Favicon)?尺寸規定與設計技巧

如何修改WordPress網站圖示?尺寸規定與設計技巧

前言:為什麼需要新增網站小圖示(Favicon)?

我最常被詢問,什麼是網站圖示?網站 LOGO 小圖示要去哪裡新增?一定需要新增嗎?

以下分享兩個我認為網站圖示的重要性:

提升網站信任度

雖然網站圖示(Favicon)佔整個網站的比例非常的小,但卻是最常被人看見的一個地方,只要搜尋一次網站就一定會被看見,所以也會是你品牌很重要的一環,它可以幫助讀者更快速辨識這是不是你的品牌,並且記住您的網站。

所以網站圖示確定以後就不要常常更換它,除非你又重新調整過整個品牌。

Google 上搜尋溫研創意標誌示意圖

增加品牌識別度

我們都知道在使用瀏覽器時,都會依賴「書籤管理」,像下圖是我自己的瀏覽器,我自己就很喜歡這樣收藏常用的網站,所以這時候每一個網站的網站圖示辨別性就非常的重要,可以讓人一眼就辨識出,更快速找到常用的網站。

Google 瀏覽器的書籤標誌

設計網站小圖示需要注意哪些問題?

最常遇到想要在 WordPress 網站上傳小圖示時,很直接地就把自己的品牌 LOGO 直接上傳。

不過,在上傳之前,我想請大家注意兩個地方:

問題一:系統黑白模式下是否明顯呈現

最多人使用的會是 Chrome 瀏覽器,不管是在桌面、手機版的覽器裝置上,都會有兩個基本的模式:深色與淺色,當然還可以調整成各種顏色。

所以我們在網站的圖示上可以用黑底、白底兩種模式來做基準,當你設計好你的圖示後,請試著放在不同模式下,來確認網站圖示是否夠顯眼。

下圖是以我自己的「溫研創意」圖示來做示範,我希望在不同顏色背景下,我的圖示都能清楚地顯示,所以我會選擇右方的那個色調。

PS.當然我們不可能去迎合各種背景色的需求,但至少在最深(黑)與最淺(白)的背景下,可以把自己的圖示完整的呈現。

溫研創意網站圖示示

問題二:小圖示是否足夠容易吸引眼球

我相信你的瀏覽器應該常常是下圖一整排的狀態,那你的網站也一定會是在別人瀏覽器上的其中一個,所以要讓你的網站在這麼多個之中,讓讀者直接找到你的網站那會非常的重要。

在設計上我整理出 2 個重點:

Chrome 瀏覽器上的網站圖示比較圖

1.對比顏色:上述有提到瀏覽器本身的黑白背景色,所以在配色上可以與背景色產生強烈的對比,讓你的品牌圖示更凸顯。

以下圖為例,可以將原先的圖示,加上白色「背景」或「線條」,運用黑白的對比色,讓圖示在深色背景更明顯。

溫研創意網站圖示凸顯設計技巧

2.簡化線條:線條不要太複雜,我們在看網站圖示時只會有 16px 的大小,所以我們在看這麼小的圖示中,太過細微的線條是很難呈現,反而會讓圖示有些不乾淨、不好辨別。

案例一:溫研創意

自己的「溫研創意」品牌 LOGO,可以截取最具代表意義的圖示,如果包含原先的線條也放進去,那整體的圖示就會非常的不清楚,所以最後只截取最具代表意義的「太陽」圖示。

溫研創意網站圖示調整後版本示意

案例二:好好理財好好睡

這是我其中一位客戶的品牌「好好理財好好睡」,如果是放原先的 LOGO 會看不清楚整個輪廓,所以我將比例調整一下,將「綠色箭頭」整體放大,想一眼就讓讀者看到綠色的箭頭。

好好理財好想睡網站圖示調整後版本示意

總之,大家在上傳之前,可以先把自己的品牌 LOGO 縮小,再依情況來做調整

如何新增 WordPress 網站小圖示

如果你是剛架設 WordPress 網站,那你的圖示會是官方的 LOGO(下圖),接下來我們需要將圖示改成自己品牌的標誌。

WordPress 架設完成的預設網站圖示小圖示

製作過這麼多設計專案,很常有人問我:「如何經營一個跟你專業的網站?」

如果你剛開始經營,可以不用找我預約,我與我的教練 Dean 一同開發了一套完整的網站培訓。

我會在培訓中負責網站 & Logo 設計,讓你不只有美麗外觀,還擁有豐富內容。

以下是網站圖示的後製到 WordPress 上傳的步驟教學:

step 1

:開啟 Adobe Express 開始製作網站圖示圖示

在開啟之前需要先註冊一個帳號,才能開始編輯:

  1. 點選「自訂大小」
  2. 輸入尺寸「寬度 64 px、高度 64 px」
  3. 點選「建立新檔案」

通常網站圖示的尺寸會是正方形的 16×16 像素,但為了確保在每一個裝置都能讓你的網站圖示,有更好的解析度,所以通常我們會將尺寸再放大一些,而我最習慣使用 4 的倍數,64×64 像素

Adobe Express 設定64x64 像素尺寸

step 2

:開啟後,會看到空白的畫布,所以我們可以先在畫布上新增元素
  1. 點選「元素」
  2. 點選「形狀」
  3. 拖曳想要的形狀樣式

這個步驟,並沒有一定需要設定,如果你認為你的品牌 LOGO 不適合加上底色,那這個步驟就可以跳過,而我自己「溫研創意」的圖示也沒有使用背景色。

Adobe Express 新增形狀到畫布中

step 3

:將形狀調整符合品牌是覺得配色
  1. 點選畫布中的「形狀」
  2. 修改填充與邊框的顏色,填充的顏色為 #F8F5F0,邊框顏色刪掉
  3. 修改「圓弧」數據,讓圓角更圓潤一些
Adobe Express 將形狀改變填充與邊框 的顏色

step 4

:將自己的品牌 LOGO 上傳,直接拖曳放進畫布中
Adobe Express 把溫研的網站圖示上傳至畫布中

step 5

:匯出下載網站圖示
  1. 點選畫布「背景顏色」
  2. 點選「刪除背景色」(如果沒有刪除,那背景色就會跟著一起匯出)
  3. 點選上方按鈕「下載」會出現選擇文件格式
  4. 在文件格式,選擇「PNG」(記得使用 PNG 才會是透明的背景圖)
  5. 點選「下載」,就成功完成圖示製作

接下來我們要把它上傳到 WordPress 網站上

Adobe Express 將畫布的背景顏色調成透明度
Adobe Express 將設計好的網站圖示設定 PNG 格式並下載

step 6

:在 WordPress 網站上傳網站圖示

上傳網站圖示會使用佈景主題的訂定來設計,所以不同主題的「網站圖示」位置也會不同。

以下我使用「Astra 佈景主題」來做示範:

  1. 點選上方「自訂」
  2. 點選「網站識別」
  3. 點選「選取網站圖示」
  4. 在選取圖片,點選上傳的圖示(還沒上傳圖示,可以直接將圖片拖曳至圖片選取內)
  5. 點選「選取」
  6. 選取後,圖示會即時出現在瀏覽器上,確定是你要的效果後,就點選「發佈」
WordPress 佈景主題自訂
WordPress 選取網站識別設定
將網站圖示上傳至 WordPress 媒體庫
Adobe Express 網站圖示上傳並發佈

如果網站小圖示顯示不出來怎麼辦?

方法一:檢查媒體庫是否網站圖示的圖片遺失,有時候在一般處理圖片時,會不小心誤刪,這時候可以先檢查圖庫。

確認 WordPress 媒體庫是否有網站標誌圖片

方法二:上述有提到網站圖示是佈景主題內的設定,所以你所選擇的佈景主題也是有可能會導致網站圖示上傳失敗,我們可以改使用 Favicon by RealFaviconGenerator 專門上傳小圖示的外掛。

安裝 Favicon by RealFaviconGenerator 外掛

下一步,學習更多 WordPress 操作技巧

以上,是如何在 WordPress 網站上新增網站圖示(Favicon),希望讓你了解一個小圖示的重要性。

如果你已經完成網站圖示設定,那你接下來可以學習更多 WordPress 操作方法,讓你的網站更完整。

另外,如果你發現你的品牌 LOGO 設計,在網站圖示上不知道如何調整才能更凸顯視覺,那也歡迎點擊下方按鈕,跟溫研聊一聊,我能協助你設計出你想要的網站圖示。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

返回頂端