Iconpie 上傳圖片自動產生各種網頁及應用程式專用的圖示尺寸

Iconpie 上傳圖片自動產生各種網頁及應用程式專用的圖示尺寸

無論是開發網站、網頁服務或是一般手機應用程式,一定都會用到圖示,這在網站上通常被稱為網頁圖示(Favicon),應用程式也會因裝置需要不一樣的圖示大小,雖然轉換圖片大小是很簡單的事,但我們不一定確切知道需要什麼樣的尺寸或格式,有一些工具可以快速解決問題,像是 Favic-o-Matic 就能協助使用者製作出各種尺寸的網站圖示,而且也提供對應的程式碼非常有用。

Formito 免費網站圖示 Favicon 產生器,以文字或表情符號線上製作圖案

Formito 免費網站圖示 Favicon 產生器,以文字或表情符號線上製作圖案

如果有開發或經營網站的經驗,一定知道網站圖示(Favicon)是相當重要的一個環節,這個圖案除了顯示於書籤列表,在開啟網頁時也會出現在瀏覽器分頁標籤左側,對於識別網站來說有一定程度效果,特別是很多人習慣同時打開許多分頁,在這種情況下圖示就成為快速切換特定分頁的方式。一開始就建議選擇具有代表性、容易被記住的圖案或顏色,通常會以 LOGO 或是字母搭配特定顏色加強記憶。

Favicon.io 最強大的網站圖示產生器,可線上文字製作或以圖片轉換

Favicon.io 最強大的網站圖示產生器,可線上文字製作或以圖片轉換

前段時間在研究網站圖示(Favicon)如何正確運作,對有在經營網站的站長來說一定知道在網站加入識別圖案的重要性,一般來說,加入網站圖示的作法並不困難,甚至很多網站會說只要一段原始碼就能做到,但現在因為有行動裝置作業系統,也要考量到網站被新增到桌面時會用到不同圖示尺寸,因此就必須額外準備各種不同尺寸大小的網站圖示。

Favic-o-Matic 快速裁切、製作各種尺寸大小的 Favicon 網站圖示

Favic-o-Matic 快速裁切、製作各種尺寸大小的 Favicon 網站圖示

最近無意間發現免費資源網路社群在 Google 搜尋結果無法正確顯示網站圖示,也就是大家都知道的 Favicon(Favorites icon),這個小小圖示代表一個網站,經常會顯示於瀏覽器標籤列或書籤,有些時候當網網頁打開太多,標題無法全部顯示於標籤列,我們就會很習慣透過網站圖示來判斷是不是自己需要的網頁。前段時間 Google 搜尋調整結果呈現的樣式,在網站標題旁邊加上圖示,因此好好設定一下自己的網站圖示格外重要(雖然後來這個設計被很多網友抗議 Google 決定要重新研議)。

Favicon Checker 檢查網站圖示在 iOS、Android、PC 和 Mac 設定是否正確

Favicon Checker 檢查網站圖示在 iOS、Android、PC 和 Mac 設定是否正確
(Copyright: audiohead / 123RF Stock Photo

網站最佳化指南裡有提到最好可為網站加入網站圖示(Favicon),如果沒記錯的話,雖然是一個簡單的動作,但對網站來說卻有相當大的幫助,怎麼說呢?這些圖案有助於加深使用者對網站的印象,在書籤列顯示也更容易識別,除此之外,當今行動裝置瀏覽器例如 iOS Safari 或 Android Chrome 都支援將網站釘選到主畫面,不過必須事先設定好合適的圖案。

Free Favicon – 免費favicon收集站,快幫你的網站加入一個網址列小圖示!

Free Favicon

作者/Pseric(2009-08-08)

Free Favicon 提供相當大量的免費favicon小圖示,分門別類,下載後就能使用。至於什麼是favicon呢?簡單來說,就是出現在網址列左側的那個小圖案,一般大小都是 16×16 或是 32×32。可別小看這微不足道的小圖,它足以代表一個網站或部落格,因為當使用者進入你的網站,或是將網站加入書籤後,都會看到這個圖案。