線上設計網址列出現 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/
2007/10/14
又一款好用 線上設計 icon 工具
12 comments:
請問再yahoo的部落格可以用嗎?
雅虎部落格不知道有沒有開放到可以在header內改設定, 目前是沒看到這方面的資訊呢!
請問link href='icon所在網址' rel='SHORTCUT ICON'/
link href='icon所在網址' rel='icon' type='image/ico'/
只要放入'icon所在網址' 這兩處的網址就好嗎?
還是還有哪需要改?
因為都無法顯示
而3.Download Favicon後, 只要存在自己的電腦.
是有指定要存在電腦哪嗎?
總之按照這步驟都無法顯示耶...
頭痛!!
---以斯帖---
以斯帖, 你必須 按Download Favicon, 在到電腦後, 再將裡面的.ico及.gif檔案, 分別上傳到網路空間, 如 http://pages.google.com,先申請一個帳號後, 上傳這2個檔, 然後, 在這2個檔案上面, 按滑鼠右鍵, 複製連結, 再把連結分別貼回步驟5的所在網址, 才行哦!
請問pixnet可以用嗎？
我測試的結果是不行>"<
想問問看有沒有辦法...
只要 pixnet 有提供在＜head>及 ＜/head>之間加語法, 就可實現這個效果了!如果沒有的話, 就沒辦法囉!
不好意思...問個笨問題,download下來不是.ico檔案嗎?怎樣才能有.gif呢?一定要上傳兩個嗎?做好了ico...也拿到網址,可是不知道去哪裏找gif說~~~
謝謝,
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檔,所以文章中提到這２行程式碼都要放。這樣ie會去讀.ico, ＦＦ會讀取gif。
http://picasion.com/
Hi Skyvee,
想請教一下, 我在blogger的html code只找到一個head, 請問這個情況可怎做? 如我做的icon是"jpg", 這個可以嗎? 謝謝~
光軍,
都是放在 ＜head> 與 ＜/head> 之間的, 你可以放在＜title>.....＜/title>的下一行.
試看看吧!
Hi Skyvee,
謝謝您的解答, 按您說的做法做好了, 但是在我的網址還是沒有顯示我的BLOG ICON... 可否幫我查一下發生了什麼問題嗎? 謝謝
光軍, 我在firefox 下開你的網頁,很快就跑出icon,不過在IE 8下, 有可能在載入一些外掛元件時,因為花較多時間, 所以要等很久, 才會出現icon, 但是都會出現, 你可以再試看看.
張貼意見
謝謝您願意在此分享心得, 讓文章內容更豐富.