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

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

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

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

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

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

Restore old Google icons 將 Gmail、日曆和 Meet 網站圖示還原舊版(Chrome 擴充功能)

Restore old Google icons 將 Gmail、日曆和 Meet 網站圖示還原舊版(Chrome 擴充功能)

網站圖示(Favicon)是網頁相當重要的一部分,特別是現在大家習慣在瀏覽器同時打開許多分頁,當分頁標籤寬度不足時,就只能透過網站圖示辨別,另一方面是書籤也會顯示圖示,對我來說是從一堆網站快速找到需要網站的方法。前段時間 Google 開始將旗下服務的圖示風格統一,採用 Google 標誌的四種顏色:藍色、紅色、黃色和綠色,看起來更為簡約,不過也有不少人反映看起來好像長得都一樣,在可辨識度方面會有些問題。

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

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

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

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

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

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

Favicon Checker 測試網站圖示在不同瀏覽器、佈景主題配色的顯示效果

Favicon Checker 測試網站圖示在不同瀏覽器、佈景主題配色的顯示效果

在建立網站和部落格時通常有許多重要環節一定要做,其中一個就是加入網站圖示,也就是大家常聽到的「Favicon」,這是什麼呢?其實就是網站會顯示於瀏覽器分頁上的小小圖示,這也不是什麼很新的東西,大部分網站都會放,尤其在開啟很多頁面的情況下無法在分頁標籤看到網站名稱,圖示就成為辨識分頁對應網站的方式,因此設定好一個易於識別、能增加使用者印象的網站圖示就顯得格外重要。

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

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

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

Gmail Sender Icons 在 Gmail 顯示寄件者公司網頁圖示、網址(Chrome 擴充功能)

Gmail Sender Icons
(Copyright: alexeyboldin / 123RF Stock Photo

以往我還蠻習慣使用 Gmail 網頁版收發郵件,後來瀏覽器加入桌面通知後,其實就跟一般郵件軟體沒太大差異,也能夠即時收到通知而不用擔心錯過重要郵件。現在我在 Macbook 筆電上也仍在使用瀏覽器收發郵件。話雖如此,Gmail 郵件介面設計還蠻陽春的(或者可以說非常精簡),如果你希望它能顯示更多資訊的話,本文要介紹的小工具你一定會喜歡。

Favikon 網站小圖示(favicon)產生器

Favikon 網站小圖示(favicon)產生器

如果你有網站或部落格,應該為它加上一個網站小圖示,也就是 Favicon(發音為”fave-icon”,也就是喜愛的圖示),通常此圖示會出現在網頁瀏覽器的網址列旁邊,會使用標誌或是代表網站的圖片,除了出現在瀏覽器以外,也會使用在 RSS 閱讀器列表或是鏈結清單裡,加上好的 Favicon 可以讓使用者更容易辨識並記住你的網站。