就像是圖中所展示的,網址列的最前端及書籤圖示,指的就是Favicon,站長教你,輕輕鬆鬆幾個步驟就製作完成囉。

ico01

為什麼要製作Favicon?

當然是為了讓人對你的站台加深印象囉!比如說像是 香腸炒魷魚他們的Favicon就是一根香腸加一支魷魚,讓人很容易就聯想起來了!諸如此類,所以這也是一個加深別人對你站台的印象哦,當別人加了一堆網址書籤後,如果你的Favicon很特別,那麼別人很容易馬上就能找到你的網址,不是嗎?

如何製作Favicon?

站長在這邊介紹一個快速製作Favicon的網站:http://www.favicon.cc/

這個網站可以將你想製作成Favicon的圖片,快速轉換成Favicon,或者是利用他的編輯介面自行畫製Favicon製作時,下方還有一個即時預覽圖,可以讓你馬上知道做出來的效果哦!站長先介紹上一下每個欄位的功能。

從左欄開始:

Create New Favicon:製作新的Favicon

Import Image:匯入現有圖片製作

Latest Favicons:最新被製作的Favicon

Top Rated Favicons:熱門Favicon

Login:登入,如果你有註冊的話

Register:註冊(不需註冊即可使用全部的功能)

Search:可用搜尋列打入關鍵字,搜尋相關的Favicon

中間的16×16編輯欄,對應著下面的即時預覽圖

右邊的工具列:

即點即選的色彩選擇框

輕鬆製作專屬於自己的書籤及網址列圖示《Favicon》 eraser

transparent:橡皮擦

輕鬆製作專屬於自己的書籤及網址列圖示《Favicon》 pipette pick existing color:透明化

輕鬆製作專屬於自己的書籤及網址列圖示《Favicon》 mover move:可以將整個Favicon移動成你想要的位子

製作完畢後再按下面的《Download Favicon》即可輸出Favicon.ico檔案囉,聰明的你,想必不用太多說你很快就可以得心應手囉!!

輕鬆製作專屬於自己的書籤及網址列圖示《Favicon》 ico02

如何在網址列加上Favicon.ico?

將你做好的Favicon.ico上傳到你放圖片的空間或是部落格空間都可以,例如站長的是放置在

https://steachs.com/wp-content/uploads/favicon.ico

至你的wordpress佈景資料夾中下載index.php檔案回來,打開index.php

加入以下語法於最上方(記得將網址換成你的icon位址哦)

<link href=’https://steachs.com/wp-content/uploads/favicon.ico‘ rel=’shortcut icon’/>

儲存檔案後,再上傳覆蓋即可。或是利用後台編輯亦可

輕鬆製作專屬於自己的書籤及網址列圖示《Favicon》 ico03

後台中至外觀→編輯→選擇index.php

然後在上方加入語法再儲存即可

輕鬆製作專屬於自己的書籤及網址列圖示《Favicon》 ico04

然後再到部落格看看,加到我的最愛再看,如此一來你的網址列前方就有專屬你網站的Favicon

輕鬆製作專屬於自己的書籤及網址列圖示《Favicon》 ico05

Categorized in:

線上工具/服務,

Last Update: 2009 年 11 月 25 日

Tagged in:

, ,