土芭樂數位學堂

BigData 大數據分析, 大數據平台建置及應用 (Hadoop/spark),虛擬核⼼技術,資訊技術的分享, TiddlyWiki教學, Google 服務應用教學, 3D列印創意思維

7月 22, 2009

製作網站 Logo 小圖示

如果希望訪客在進入自己的網站時,可在瀏覽器的網址列 Logo圖示(Favicon),就要透過線上製作、產生favicon。首先必須先準備好一張圖檔,然後透過以下二種方式來製作即可:



方法一:直接連結到「favicon.cc」網站製作小icon圖示。
「favicon.cc」首頁網址:http://www.favicon.cc/

方法二:直接拿公司的 Logo 圖片檔(最好長、寬同等尺寸的圖),至「favicongenerator」網站做小 icon 轉換。

「favicongenerator」網站首頁:http://www.favicongenerator.com/

以上二種方法,無論是自己做小圖示或拿小圖示轉檔,最後都必須輸出檔案(將檔案*.ico下載回來),並將檔案放至網頁的影像資料夾中。然後在網頁的 Head 標籤範圍中加入下列程式碼:

<head>
<link rel="shortcut icon" href="images/favicon.ico" >
</head>

如果您還想要更特別的網址圖示,可以到下面這個網站來試試,做出來的小圖會有動畫效果哦!

網址:http://www.chami.com/html-kit/services/favicon/


倘若您有利用以上的網站服務製作動畫小圖示,請將以下的 HTML 程式碼複製到您的網頁 Head 標籤範圍中。

<head>
<link rel="shortcut icon" href="images/favicon.ico" >
<link rel="icon" type="image/gif" href="images/animated_favicon1.gif">
</head>


除此外,您還有下列的網站可以做選擇:
【網站網址】http://tools.dynamicdrive.com/favicon/
【網站網址】http://www.dagondesign.com/articles/favicon-generator/
【網站網址】http://www.rw-designer.com/online_icon_maker.php
【網站網址】http://www.favicon.jp/
, ,

沒有留言:

張貼留言