簡易修改樣板 (Favicon設計)

做一個網站除了有標題有內容,更要有一個具有識別度的品牌,
而此品牌的建立,是基於Favicon的設計基礎.
只要Favicon設計的好,便能帶給所有觀眾專業的形象.

而何謂Favicon,它是由Favorite Icon所集合的縮字,

使用Google搜尋頁面來做解說,
Favicon和一般廣泛認知的Logo有啥區別?

上方的特小標誌為Favicon,下方為Logo.(注意:兩者在法律層面上都為商標)

一般LOGO設計的發揮度較大,因為大小可能較為多變,

而Favicon的設計相較於Logo就較多限制了.原因看上圖應該非常清楚.

實際觀察Favicon設計,你會發現這類的設計跟"點描繪"的繪畫方式很像,
Favicon圖片框架為一正方形,且大小16*16到48*48,普遍不大.
因此在設計上,就要考量到圖片格式的問題,
盡量設計簡單但又能讓人輕易識別且聯想到網站形象是最好的.

設計Favicon流程:

正常來說,所有設計流程皆從最小的尺寸開始設計,

但我因為沒受過正規設計訓練,因此習慣要先從較清楚且尺寸較大的Logo開始設計,
才能再轉為尺寸較小的Favicon.

為了凸顯個人特色,我取自己英文名字的縮寫 JC做為象徵符號,
參考許多字體刑式並畫出自己喜歡的字形,
最後套用前陣子流行的Low Poly design 風格,
並以冷暖色系的對比,強調網站的豐富性,
最後出來的成果就是我的網站標誌囉.

接下來這一步就剩轉檔跟微調了,

其實這部分可以在Photoshop完成,但我的Ps有點怪怪的,就不想用了.

所以直接用favicon.ico Generator 這個網站轉檔.

可以觀察到上傳圖片後,它的像素大小,就能理解為何我會說favicon設計方式是"點描繪".

在這階段,你可以透過此平台自己在微調logo樣貌,他會直接show出來favicon的圖示,

讓你確認實際效果,確認完後,就可直接轉檔下載圖片並留存檔案.

設計完favicon就能套用到自己的網站或blogger.

在這輕鬆帶過如何套用到自己的blogger.

方法:blogger後台 - 版面配置 - 點選網站小圖示就可上傳自己的favicon囉.