網站 icon 生成器,一鍵通殺全平台。

記得早期做網頁的時候,在網站完成後會另外畫一個 16×16 的小 icon,這個小 icon 會出現在網址列及我的最愛中,取代瀏覽器原本的預設 icon,成為一點私人的小特色。但後來由於設備的發展一日千里,手機、平板、iOS、Android、MAC、Windows 等等,每種平台對這些小 icon 接受的大小、格式及規範都有些許不同,如果要個別針對這些平台去製作小 icon 變得有點麻煩,且不一定有相關的設備可以提供測試,這時,該怎麼辦呢?

Real Favicon Generator 這個網站提供上述問題的解決方案,讓你可以透過簡單的設定,一鍵生成全平台使用的 icon,而且還提供線上檢查的機制,對網頁設計師來說,可以省去很多檢查及 resize 的時間,十分好用。

all-drive-icon

一、上傳你的 icon

在了解我們要做的事情之後請先到 Real Favicon Generator 首頁,接著請點選 Select Your Favicon Picture 的按鈕,點選後會要求你上傳自己的 icon,系統可以接受 PNG, JPG, SVG 等格式,最小尺寸是 70×70,但建議可以上傳大一點的尺寸,讓系統在轉換個種尺寸的時候可以有較大的調整空間。

上傳 icon

二、預覽效果

當你完成上傳後,系統會自動將你上傳的 icon,以預設值的方式套用在各平上提供給你預覽,如下圖,你可以先參考看看,如果不合適的話,也針對不同的平台個別調整。

step-2

三、調整細節

由於每種平台對 icon 的規格、大小都有不同的規定,所以 Real Favicon Generator 將這些平台的設定分開,讓你可以很方便地針對特定系統去優化 icon 的效果。

由於 Android 可以調整的參數最多,接下來我們以它為例,其他平台調整的方式也大同小異,就不一一抓圖說明了,大家可以自己去玩看看。

Android 的參數調整可以透過下面畫面中的頁籤切換,分別為 Main settings、Options、Assets 及 Dedicated picture。

step-3

Main settings 下有三種選擇,由上而下分別是

  • No change, keep the master picture as it is. 預設值,如果你什麼都不想調整的話,選這個就可以。
  • Add margins and a plain background. 增加背景色及外邊線
  • Apply a slight drop shadow, similar to official Google apps (Gmail, Play Store, YouTube…). 類似 Google Play 的應用程式 icon,他會為 icon 增加一個淺淺的陰影,而且你還可以為它取個名字。

step-4

通常我都選擇第三種,效果如下:

step-5

也可以模擬 icon 在 Android 操作下的各種效果,分別為:

  • Home:模擬首頁 Icon
  • Switcher:可以模擬 Androud 切換的效果
  • Splash:可以模擬進入 App 的第一個畫面

step-6

Android 的設定介紹先到此為止,剩下的大家可以自己玩看看,所有的設定都可以在線上直接看到效果,不用擔心被自己玩壞,非常方便。

四、設定 icon 放置的目錄及下載 icon

在下載回來之前,你要先決定這些 icon 要放在網站的那個位置,這裡有兩種選擇,分別為:

  • 放在網站的根目錄 (推薦):I will place favicon files (favicon.ico, apple-touch-icon.png, etc.) at the root of my web site. Recommended.
  • 放在指定的目錄:I cannot or I do not want to place favicon files at the root of my web site. Instead I will place them here:

step-8

當你所有的平台都設定好之後,你可以點選頁面最下面的 Generate your Favicons and HTML code 藍色按鈕:

step-7

接者,你還需要經過三個步驟,分別為:

  1. 把 icon 下載到你的電腦裡:Download your package
  2. 把 icon 上傳到你的網站指定目錄中:Extract this package in the root of your web site. If your site is http://mysite.com, you should be able to access a file named http://mysite.com/favicon.ico.
  3. 將相關的 html code 放在首頁的 head 標籤裡:Insert the following code in the “head” section of your pages

step-9

五、線上檢查

理論上到此為止你的網站已經設定好了,但為防萬一,我們還是要模擬測試一下,看看有沒有問題。
請點選第四點 Optional – Once your web site is deployed, check your favicon.

step-10

在欄位處輸入你的網址,完成後點選 Check Favicon 藍色按鈕。

step-11

如果順利的話,你可以看到如下的畫面,完成。

step-12

下課魯~

大概簡單的說明如上,剩下就有賴大家自己動手去發現、去玩看看,希望這篇對你有幫助,如果你在使用上有遇到什麼問題,也可以透過下面的問答提出,Good Lucky。

每個人的生命都有一些重要的東西,對我而言,網路、單車、相機和繪畫一直在生命中的某些時刻扮演著重要的角色。我不明白老天爺是否要透過這些東西的集合告訴我什麼。只能努力地去串連這些看似無關的事物,並試著藉此為生活塗上一些屬於個人的顏色與符號。在自我追尋的同時,也期許能夠豐富這個世界。

你的觀點

Scroll to top