favicon.png

favicon就是Favorite Icon的縮寫,叫做"我的最愛小圖",它會出現在你瀏覽器的網址旁邊,你如果把它加入到我的最愛或是書籤,這個小圖也會被存起來,雖然只是一個小圖但是可以增加你網站的記憶點,讓網友記得你的站喔! Kop現在示範一下怎麼用Photoshop製作favicon.......

首先要感謝一些偉大的人分享關於favicon的資訊

1. 于文強寫的書: 部落客也能賺大錢

http://blog.wendellyu.com/

book.jpeg

2. 如何讓部落格、網站有favicon小圖示?(免軟體,線上工具)
http://sofree.cc/favicon-cc/

 

3. 介紹 Favicon.ico 重點觀念
http://blog.miniasp.com/post/2007/12/Introduce-faviconico-and-important-concept.aspx

 

 

看完後你對於favicon會有進一步的了解,(于文強的那本書我強烈推薦,過一陣子我會寫一篇讀書心得跟各位分享)

大部分的favicon都是16x16的解析度(好low阿......),所以有網站直接提供服務,讓你用"點"的來製作favicon

http://www.favicon.cc/

可以選顏色用點的來畫圖,然後畫錯了還可以用橡皮擦點掉....

用點的.png

Kop我試著要畫一張臉,但是我發現,要點出一個"圓形"真的是太難了.....搞的我都快發火了.......這個網站不太適合"畫圖".....

反而很適合拿來寫字,而且我試過了可以寫兩個字喔.......

圖片 3.png

 

有品?!  你都沒有看新聞嘛? 偉大的教育部花了十二億元要推行"有品運動".......

花12億元 教部推有品運動

那沒有參加這個運動的人是不是很沒品??.....

 

所以我放棄用點的啦.....還是拿出我的愛用工具Wacom手寫板吧!

wacom.jpg

搭配Photoshop CS3英文版(我是用Mac,但是在PC上也一樣啦.....)

 

首先開啟一個160x160大的檔案

圖片1.png

 

然後把我要畫的大臉Outline先畫好

圖片2.png

接下來再outline的下面新增一層layer,然後隨性的塗上顏色

(其實上色有非常多方式,只是Kop習慣用土法煉鋼.....)

圖片3.png

問題來了.....我們在這樣的解析度下看的事很清楚,不過當這張圖縮小成為一個favicon的時候,就會變得辨識度非常低

圖片4.png

 

所以我們必須要修正一下原圖,把outline筆劃再弄粗一點,而且五官和帽子的距離也要取好,免得縮小以後擠在一起看不到....

圖片5.png

這樣看起來清楚多了吧......不過還有一個問題,頭髮的顏色和帽子的顏色太接近了,最好選擇對比度高一點的顏色.....

所以把頭髮顏色換亮一點.....

圖片6.png

好潮阿......這個髮色根本是韓國藝人嘛.......

韓國藝人.jpg

圖片來源: 輔大猴的遊記

 

然後我們點選Photoshop的Image->Image Size

把原本160x160的圖縮小為32x32

圖片7.png

(Kop建議這個時候把縮小的檔案另存成psd檔,這樣以後要修改大圖的時候還有原始檔)

把32x32的圖檔匯出成gif或是jpg都可以。

 

Photoshop因為沒有內建匯出成ico檔案的功能,有很多解決的方式,但是Kop推薦下列的網站,可以線上幫你轉檔,省下很多麻煩

線上轉ico檔
http://www.html-kit.com/favicon/

 

然後就得到一個叫做favicon.ico的圖檔啦!

圖片8.png

 

重要! Kop畫的是一個圓形的icon,但是我不想要背景是白色,而想要透明的,其實也可以用這個網站的客製化功能喔,在輸出成favicon之前選擇 Background為Transparent(如下圖所示)  你就可以把背景設為透明了。(甚至還可以做動畫喔.....)

圖片 1.png

 

 

如果你是自己架站的人(Kop以google page creator為例),把你的favicon.ico檔案和你想要它顯示出來的那個html檔放在同一層目錄之下

然後在該html檔的<head>和</head>之中輸入下列的語法:

 <LINK REL="SHORTCUT ICON" HREF="favicon.ico">

再重新載入該html檔,你就可以看到你的小圖出現在網址列囉!

但是......本文是以google page creator為例,Google已經有預設的favicon囉,所以你不要跟他取衝突的檔名,Kop我就把檔名改成kopicon.ico

所以我輸入的語法是

<link rel="shortcut icon" href="http://kopmichael.googlepages.com/kopicon.ico" type="image/x-icon" />

 

在href的後面我把完整位置都寫上去,是因為我連部落格都想要改favicon,所以寫上絕對網址。

圖片 4.png

 

在痞客邦改favicon的方法可以參考這篇文章:

 

 [部落格密技]把痞客邦預設的Favicon換掉吧!

http://cire.pixnet.net/blog/post/23703376

 

在無名小站改favicon的方法可以參考下列的電話:

雅虎奇摩的客服電話:(02) 2192-7123 無名小站問題按 5 傳真:(02) 2362-3401

 

 

然後問客服為什麼無名打死不開放這麼簡單的功能.....

 

不過Kop我也遇到困難了,我是透過Godaddy來註冊KopFamily.com這個Domain Name,而我的首頁經過Godaddy的轉址之後,Favicon就不見啦.....國外有許多網友也有類似的困擾,畢竟Godaddy是全世界市佔率最高的Domain申請公司(也是介面最複雜難懂的....)。不過它們的官方回答有看沒有懂.....

GoDaddy.jpg

 

希望本篇文章可以引出高手回答.....

 

animated_favicon1.gif  Kop  2009/6/18

http://www.KopFamily.com

 

kopfamily 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • 于文強
  • 很好的教學文

    HI 你好,我是《部落客也能賺大錢》的作者,這是一篇非常好的教學文,但建議你的文章標題改為、或是內文中的關鍵字增加「如何製作favicon」 這樣可以增加你被搜到的機率,另外請申請funp帳號 並把這篇文章自貼上去,目的同樣式為了被搜到。
    另外去YAHOO知識+ 搜尋"如何製作favicon""為何我的最愛會出現小圖"之類的問題,然後去回答,然後把連結帶到這來,或是很多人會做的,"自問自答"也可以 呵呵

    希望你看了書能實際操作,未來繼續加油!
  • Wendell你好,謝謝你的建議。 其實我覺得我的教學文寫得沒有那幾位前輩來的詳細啦,所以我把重點放在"用photoshop畫小圖"這個部分。希望對於喜好手繪的網友有些幫助。

    我把你的書看完了,對於"戳客"和"抄襲者"的作法我非常認同。常和朋友分享。 如果大家沒看過這本書也歡迎到作者的部落格看看
    http://blog.wendellyu.com/

    kopfamily 於 2009/06/19 12:32 回覆

【 X 關閉 】

【PIXNET 痞客邦】國外旅遊調查
您是我們挑選到的讀者!

填完問卷將有機會獲得心動好禮哦(注意:關閉此視窗將不再出現)

立即填寫取消