Vicky's Blog 薇琪的玩耍俱樂部 公告區

  
Sims 3:補丁及CC安裝方法動作盒的安裝與使用密技存檔錯誤12聯繫EA線上客服
Sims 4:模組安裝方法密技與快捷鍵如何下載安裝房屋或人物
其他文章請查閱左側欄文章分類
薇琪不是EA客服,給網友的幫助都是免費的,部落格也沒有自行放置的廣告、沒有任何營利目的,請注意:
薇琪沒有義務回答問題,也沒有義務提供遊戲資訊。
薇琪目前沒有太多時間玩遊戲內容若有遊戲疑問請至電玩論壇等討論區發問,請勿在本部落格提問
因生活忙碌,減少更新部落格,以蓋屋為主 

 

 

Favicon全名為Favorite Icon,就是在瀏覽器網址列的小圖示,亦稱為網頁圖標,在維基百科上有詳細的說明(見這裡)。

 

對於用心經營部落格的人來說,往往都會希望放上擁有個人風格的Favicon。

 

要換掉痞客邦部落格預設的網頁圖標其實很簡單,首先要準備好圖示,懂電腦繪圖的網友可以自行製作(下文也有介紹使用favicon.cc網站來製作圖示喔),若不懂製作圖示也沒關係,可善用搜尋大神,網路上有很多免費的小圖供下載使用。

 

  


方法一:適用瀏覽器 Google Chrome、Mozilla Firefox

 

Favicon 一般來說支援icopnggif 等格式,圖示尺寸大小為16x16

把製作好或選擇好的圖示上傳至網站空間,並取得圖片網址

 

png、gif檔可上傳至痞客邦相簿,擷取痞客邦相簿圖片網址方法:把圖片上傳到痞客邦的相簿中,接著到部落格管理頁面「發表新文章」,插入剛才上傳的圖片,之後點選「編輯 HTML 原始程式碼」,即可見<img src="http://pic.pimg.tw/..." alt="" border="0" />字串,其中紅字部分即為圖片網址。



然後進入痞客邦管理後台→部落格→基本/進階設定,

 

   

 


接下來在「部落格描述」處輸入以下語法:<link rel="icon" href="圖片網址">

 

      

 

儲存設定就完成囉!很簡單吧!

 

 

 

方法二:適用瀏覽器 IE、Mozilla Firefox

 

除了上述方法以外,痞客邦本身也有提供自訂瀏覽器網址列圖示的功能,大小限制在 10KB 以下

到管理後台→帳戶管理

 

 

 

 

→網域設定

 

 

 

 

→瀏覽器網址列圖示→使用自訂的網址列圖示

 

 

 

 

→上傳新ICO檔→選擇檔案→送出→儲存設定

 

   

 

設定完成後,如果沒有生效,請清除網頁快取

 

 

 

目前薇琪是使用方法一 + 方法二, Google Chrome、Mozilla Firefox、IE 這三種瀏覽器都可以顯示icon圖示。

 

  

 

可愛的兔子圖是薇琪自己畫的唷 

 

 

 

 

 

 

製作Favicon的網站:http://www.favicon.cc/

 

此網站可以上傳圖片轉成ico檔,或是上傳圖片後做細部改動製成icon,更可以線上自行創作小圖後下載,若註冊會員還能與網友交流圖標,是值得推薦的好地方。

 

 

使用 favicon.cc 網站 製作圖示(無須註冊):

 

(A)上傳圖片轉成ico檔 / 上傳圖片後做細部修飾

 

進入該網站後,可以看見製作小圖的功能頁面,選擇「Import Image」(匯入圖檔)

 

 

 

 

接著 1.選擇檔案 2.選擇「Keep dimensions」(將圖片等比例縮小) 3.「Upload」上傳

 

 

 

 

 

上傳完成後可以看見放大的圖片,右側的功能可對圖片作修改

 

 

 

 

 

下方有預覽圖,是圖片在網址列實際的樣子。

 

點擊「Download Favicon」可下載圖片,下載的圖片是ico格式尺寸大小為16x16

 

 

 

 

 

(B)自行創作小圖

 

選擇「Create New Favicon」(創造新圖示),

 

右側便是創作圖片的地方,有斜線的格子表示是透明的

 

 

 

 

 

如下圖,最右邊的功能為:色盤、透明度、用色記錄、橡皮擦、汲取顏色、移動整個圖案

 

這個笑臉是薇琪畫的。

 

 

 

 

 

下方一樣是預覽圖以及下載。

 

  

 

畫好圖之後就可以下載回家囉!

 

 

 

 

除了一般靜態圖檔,這個網站也能製作動態圖檔

 

 

 

 

點擊「Use Animation」(製作動態圖)

 

 

 

1.「Append New Frame」(創建另一圖層) 

 

2.「Copy Previous Frame」(複製上一張圖 )

 

這第二張圖薇琪只是把閉眼改成開眼

 

其他功能如上圖說明

 

 

 

圖片製作好就可以看到下方預覽,是動態的喔!

 

   

 

同樣,點擊「Download Favicon」可下載圖片,下載的圖片是ico格式,尺寸大小為16x16。 

 

 

薇琪自己也有製作動態圖標,不過只有在Mozilla Firefox能顯示(下圖就是在火狐顯示的樣子),不是所有瀏覽器都支援動態圖標,這或許就是大多數網站都是靜態圖標的原因吧。 

 

   

 

 

 

 

 

 

創作者介紹

薇琪的玩耍俱樂部

薇琪 發表在 痞客邦 PIXNET 留言(30) 人氣()


留言列表 (30)

發表留言
  • 河堤上的貓
  • 薇琪很用心在經營blog呢!!

    真的!!有漂亮的圖示,自己看了就開心;)
  • 如果用自己製作的小圖就更讚囉^^

    薇琪 於 2012/04/14 13:06 回覆

  • 桑馬麗
  • 薇琪好棒~
    因為這樣 大家的部落格就會更有個人特色了XDD
    感動阿~薇琪用心地打這篇教學♥
  • 馬麗,請問一下妳也是用跟我一樣的方法嗎?
    我另外測試了一下痞客邦官方的方法,但是沒有成功顯示耶

    薇琪 於 2012/04/14 13:05 回覆

  • 桑馬麗
  • 好...我去用看看
  • 麻煩馬麗囉...

    薇琪 於 2012/04/14 13:49 回覆

  • 凱文
  • 好文推推
    謝謝薇琪的分享唷
  • 不客氣唷 :)

    薇琪 於 2012/04/14 13:31 回覆

  • 桑馬麗
  • 薇琪..我好像成功了....
    你要確定上傳的檔案名字是ico 還要小於10kb
    不過在後台會顯示成痞客幫內建的
    在網頁普通瀏覽就會正常了
  • 好的,謝謝馬麗,抱~~
    那我知道了,
    應該是檔名的關係,
    因為我用gif檔,我真迷糊啊XD

    薇琪 於 2012/04/14 13:50 回覆

  • 小P
  • 喔喔!好華麗的東西喲!
    嘻嘻嘻有空再來試試看!
  • 小P會電腦繪圖,可以自己做icon圖呢^^

    薇琪 於 2012/04/14 22:04 回覆

  • 吉玫
  • 薇琪換成好可愛的小花朵喔~
    很實用的教學~~
    謝謝薇琪囉~
  • 不客氣喔^^

    薇琪 於 2012/04/14 22:05 回覆

  • ChiakiHoung
  • 超實用的教學!!!!
    有空就來做做看 ^^
  • 已經看到CH的小圖示了^^

    薇琪 於 2012/04/16 02:57 回覆

  • 莎曼
  • 昨天還在桑馬麗家稱讚她的小圖示好酷,
    今天正要向她請教時,薇琪就發了這篇!真的太棒了!XDD
    謝謝薇琪的教學^ ^ 我也要來做看看~

    我有一個問題,
    就是我用GOOGLE瀏覽器來薇琪和桑馬麗家時看的到圖示,
    可是我用IE瀏覽器時卻看不到,而是原來痞客的圖示,
    這個是我電腦的問題嗎? > <
    還是本來就要用GOOGLE才看的到
  • 莎曼,我的文章中就有說了喔
    有兩種方法,適用的瀏覽器不同,
    目前我用的方法是第一種,IE的話看不到,
    馬麗應該也是用第一種方法。

    薇琪 於 2012/04/14 22:01 回覆

  • 菲妮
  • 謝謝薇琪的教學(抱~)
    有時間再來試試
    最近都很少在部落格^^"
  • 菲子,抱~
    菲子身體也不太好,照顧好身體先唷^^

    薇琪 於 2012/04/14 22:07 回覆

  • 桑馬麗
  • 莎曼..你那個原因是ie的歷史訪問紀錄造成的,有歷史紀錄在,favicon永遠不會更新喔
  • 馬麗,好像不是那個原因,
    而是像我文章中說的,
    有兩種方法,適用的瀏覽器不同。

    薇琪 於 2012/04/14 22:02 回覆

  • 莎曼
  • 馬麗~ 應該不是歷史紀錄的問題,我有定期刪除~

    薇琪~ 那如果兩邊都要顯示,是兩種方法都用嗎?
    因為我有看到有些網站是兩邊都可以顯示的
  • 莎曼看到兩種瀏覽器都有顯示的是痞客邦的部落格嗎?
    我自己測試的結果是,第一種方法會蓋過第二種方法,
    雖然我用了第一種方法後也有設定第二種方法,
    可是用IE看我的部落格還是沒有看到icon圖呢!
    而如果純用第二種方法,Google Chrome瀏覽器又看不到圖示(嘆
    如果有其他方法的話我要再研究看看嚕!

    薇琪 於 2012/04/14 22:44 回覆

  • 桑馬麗
  • 好困擾阿....那麼原因就要找找了~(SORRY我好像都講錯XDD
    已起找出問題吧=P
  • 馬麗別說SRY嘛
    我也是不懂,大家一起討論呀^^

    薇琪 於 2012/04/14 23:31 回覆

  • 薇琪
  • 我換了語法,文章也更新了,目前看起來三種瀏覽器都可以顯示。
  • 小米
  • 啊~ 薇琪好棒啊 :D
    之前還想問的說~ 就發了這篇文
    多謝多謝啦 :D
  • 噗噗,不客氣唷
    小米的icon小圖很可愛呢

    薇琪 於 2012/04/15 03:58 回覆

  • Tzuching(Taco)
  • 我也來試試~^^
    謝謝薇琪分享唷~~
  • 不客氣唷
    晴可以試試看自己做小圖,更有個人風格 :)

    薇琪 於 2012/04/15 12:47 回覆

  • 飄寶寶
  • 好文呀!!!薇琪你這篇文章
    讓我也想試試看哩:"P
    不過話說一定要是16*16的圖片唷?~*
    薇琪有用甚麼方法把自己想要的圖片縮小媽?
    因為我的圖都好大T^T...
    想把它們都縮小>///<~*
  • 因為是瀏覽器網址列的圖示,
    本身空間就不大,
    所以圖片也不能太大,
    一般尺寸是16x16,
    最大也不能超過32x32。
    繪圖軟體本身就能把圖片縮小呀,
    不然就是在網路上找可以線上製作Favicon的網站,
    譬如我文章最後附上那個網址。

    薇琪 於 2012/04/15 18:02 回覆

  • ﹡c_花殤悅
  • 看了薇琪的教學文我也試了一下
    用了方法一和方法二都沒有顯示呢
  • 我剛去花花那裡,有看到小圖喔!粉紅色的對吧!
    花花可能要清除一下網頁快取

    薇琪 於 2012/04/15 19:50 回覆

  • ﹡c_花殤悅
  • 是呀,粉紅色的
    可是我不知道網頁快取式什麼呢
    我對這方面不是很懂 Q_Q
  • 網頁快取是一些網頁暫存檔,
    就是當我們瀏覽網頁時有些東西會暫存在電腦中,
    這樣下次瀏覽相同網頁時就可以直接從電腦中讀取,
    節省頁面載入時間。
    不過若沒有定期清除,就可能在網頁有更新物件時沒有載入,導致看不到。

    清除方法:
    瀏覽器--工具--刪除瀏覽歷史資料--刪除temporary internet files(網頁快取)

    薇琪 於 2012/04/15 20:18 回覆

  • 玥彌曦
  • 超棒的教學文XDD
    有空也可以來試試看!!
    謝謝薇琪的分享~~~
  • 不客氣唷^^
    除了在網路上抓圖外,
    我原本以為自己畫小圖多少有點難度,
    沒想到使用favicon.cc網站來製作圖標非常容易,
    有興趣的話可以試試看呢^^

    薇琪 於 2012/04/17 13:23 回覆

  • 菜菜小依
  • 你好棒喔~~~~
    你的教學很簡單又清楚
    讓我有機會把那呆呆的預設小圖換掉
    現在我也有自己的專屬小圖啦~
    ^Q^
  • 有看到小依的小圖,很有特色呢^^

    薇琪 於 2012/04/18 22:41 回覆

  • 兔仔♥
  • 謝謝薇琪
    我也會用哩 =DD
    是個很棒的教學
  • 不用客氣唷 ^^
    最近比較疲累,
    過陣子再去兔仔的家坐坐 ^^

    薇琪 於 2012/05/17 07:48 回覆

  • pansy888hk
  • 嘩,薇琪很厲害呀,懂自己做標示~~~而且我看到此blog有飄雪呀,好美,不知如何弄的??
  • 其實我只會做簡單的 ^^
    飄雪是另外插入JS程式,
    原本我有點擔心會不會太花,不過大家反應好像都還不錯 :)

    薇琪 於 2012/05/24 18:34 回覆

  • 悄悄話
  • 天使魚
  • 謝謝琪琪,我剛剛很恆心地弄了一個出來XDD
    很好玩!! (大姆指)
    幸好有你的教學,不然都不知要怎做動圖~~ 謝謝~>3<
  • 我有看到魚魚的動態icon,好讚喔!
    魚魚Good Job! XDD

    薇琪 於 2012/09/21 23:09 回覆

  • 阿癲
  • 謝謝~~~找了很久都找不到在哪裡更換
  • 不客氣 ^^

    薇琪 於 2013/09/06 18:01 回覆

  • eileen56
  • 薇琪你好

    很謝謝你的分享
    看到這篇才知道原來可以自己製作icon,而且其實並不難~

    另外想要請問,使用製作Favicon的網站做出來的圖檔,
    下載下來之後是ico檔,而ico檔好像不是圖片檔,請問該怎麼轉成圖片檔呢?
    因為我試了方法二有成功,可是方法一的部分,相簿拒絕上傳icon(無法選取ico檔,或是會被判斷為無效的檔案),所以想請問薇琪是怎麼做的呢?

    謝謝
  • 直接把副檔名ico改成png就可以更改檔案格式上傳到痞客相簿了.
    如果您的電腦預設隱藏副檔名,
    請到ico存檔所在的資料夾,
    點選視窗左上角"管理組合"-"資料夾和搜尋選項"-"檢視"-"進階設定"中取消勾選"隱藏已知檔案類型的副檔名",
    即可顯示.

    薇琪 於 2013/10/18 09:56 回覆

  • 訪客
  • 不好意思 如果是用google 瀏覽器 是只要找到適合的圖檔在上傳上去
    然後再把語法複製貼上就可以了嗎?
    因為我照著步驟做顯現不出來 想說是不是哪裡少步驟>"<

    ps我也有清除瀏覽資料了!
  • 村傻_咩兒♥
  • 我是上面那個訪客
    我用成功了 但是我想改別的圖示 怎麼都一直改不過來
    甚至要用痞客邦預設的圖示也沒辦法了> <
  • 檔案格式對嗎?
    我這邊看您的部落格圖標是痞客的預設圖喔!

    薇琪 於 2015/07/02 16:48 回覆

  • 村傻_咩兒♥
  • 我已經搞懂了> < 謝謝妳哦♥
  • ^^

    薇琪 於 2015/07/03 19:11 回覆