2007/10/14

又一款好用 線上設計 icon 工具




線上設計網址列出現 icon 的工具過去就很多, 不過這個網站包辦了許多功能. 有些自製icon的網站, 只提供線上設計, 有些僅支援上傳圖片轉換, 而這個網站兩者都有, 不用註冊就可以直接使用.


過去曾介紹過一篇 線上製做網址列的icon工具及加入部落格的方法, 不過這款 Favicon.cc的操作介面更優化, 更方便.

1.右側選好顏色後, 就可以開始設計了, 如 寫了 SK兩個字, 下方的預覽畫面馬上就出現結果, 覺得滿意後, 就可以下載了, 另外還有提供簡單的操作說明.


2.如果已有現成圖片, 也可以 選擇 Import Image.


同樣可以預覽呈現在網址列的模樣.


3. Download Favicon後, 只要存在自己的電腦.


4.然後上傳到某一個網路空間, 取得icon所在網址.

5.在 <head> </head> 之間, 加入此段程式碼.

<link href='icon所在網址' rel='SHORTCUT ICON'/>
<link href='icon所在網址' rel='icon' type='image/ico'/>


就可以在網址列出現icon了.

也有提供最新其他人
及評分較高的作品, 可供參考.



Favicon.cc : http://www.favicon.cc/

相關文章 :

12 comments:

peipei 提到...

請問再yahoo的部落格可以用嗎?

skyvee 提到...

雅虎部落格不知道有沒有開放到可以在header內改設定, 目前是沒看到這方面的資訊呢!

匿名 提到...

請問link href='icon所在網址' rel='SHORTCUT ICON'/
link href='icon所在網址' rel='icon' type='image/ico'/
只要放入'icon所在網址' 這兩處的網址就好嗎?
還是還有哪需要改?
因為都無法顯示
而3.Download Favicon後, 只要存在自己的電腦.
是有指定要存在電腦哪嗎?
總之按照這步驟都無法顯示耶...
頭痛!!

---以斯帖---

Skyvee 提到...

以斯帖, 你必須 按Download Favicon, 在到電腦後, 再將裡面的.ico及.gif檔案, 分別上傳到網路空間, 如 http://pages.google.com,先申請一個帳號後, 上傳這2個檔, 然後, 在這2個檔案上面, 按滑鼠右鍵, 複製連結, 再把連結分別貼回步驟5的所在網址, 才行哦!

匿名 提到...

請問pixnet可以用嗎?
我測試的結果是不行>"<
想問問看有沒有辦法...

Skyvee 提到...

只要 pixnet 有提供在<head>及 </head>之間加語法, 就可實現這個效果了!如果沒有的話, 就沒辦法囉!

kimiko 提到...

不好意思...問個笨問題,download下來不是.ico檔案嗎?怎樣才能有.gif呢?一定要上傳兩個嗎?做好了ico...也拿到網址,可是不知道去哪裏找gif說~~~

謝謝,

skyvee 提到...

kimiko, 經你一問才發現, favicon.cc已改版了, 它有一個製作動畫的選項, 在畫布下方,有一個 Use Animation , 點進後, 按下Append New Frame, 會新增一個畫布,在上面描出你要的字後,就能製成動畫.再將這gif上傳到網路空間。
這一行 <link href='http://www.XXX.XXX/XXX.gif' rel='icon' type='image/ico'/>,就是指到gif檔,而另一行.ico 是指到放ico的位置。
然而在ie下,不支援 gif檔,所以文章中提到這2行程式碼都要放。這樣ie會去讀.ico, FF會讀取gif。

http://picasion.com/

光.軍 提到...

Hi Skyvee,

想請教一下, 我在blogger的html code只找到一個head, 請問這個情況可怎做? 如我做的icon是"jpg", 這個可以嗎? 謝謝~

Skyvee 提到...

光軍,
都是放在 <head> 與 </head> 之間的, 你可以放在<title>.....</title>的下一行.
試看看吧!

光.軍 提到...

Hi Skyvee,

謝謝您的解答, 按您說的做法做好了, 但是在我的網址還是沒有顯示我的BLOG ICON... 可否幫我查一下發生了什麼問題嗎? 謝謝

Skyvee 提到...

光軍, 我在firefox 下開你的網頁,很快就跑出icon,不過在IE 8下, 有可能在載入一些外掛元件時,因為花較多時間, 所以要等很久, 才會出現icon, 但是都會出現, 你可以再試看看.

張貼留言

謝謝您願意在此分享心得, 讓文章內容更豐富.