以初學者的角度,來看待電腦教學這回事。

標籤: icon

如何自訂iPhone、iPad的Safari「加入主畫面」的圖示(icon)?

iPhone、iPad的Safari「加入主畫面」圖示(icon)

這幾天有人問我了這個問題,就是在iPad裡,將網站放到桌面上時的圖示,有沒有辦法改?

老實說,我從來沒將網址放在桌面上的習慣,可能是因為我都是用Google Chrome的關係,很少在用iPhone裡的Safari瀏覽器,所以也沒什麼機會去用「加入主畫面」這個功能。

iphone_safari_icon-01.jpg

  實際去把我的「電癮院」網站加入主畫面中,可以看到預設是以網站的截圖為其圖示(icon),如下圖:

iphone_safari_icon-02.jpg

  所以這問題,我就被問倒了,因此就把這個需求,當成家庭作業,好好來研究一下。

修改圖示的解決辦法

經過研究,原則上,除非你有JB,要不然這圖示是沒有辦法修改的,而AppStore裡雖然有像「LINE DECO」這類可以改APP圖示的軟體,但也只限於「APP」,對於我們加上去主畫面的「網站」圖示,還是沒辦法修改。

後來找到這兩篇文章,如下:

看過這兩篇文章之後,我才發現加入主畫面的icon,是可以由網站擁有人來自訂的,並非只能用「網站截圖」而已。

所以我先開了一個新的Blogger部落格,然後依樣畫葫蘆,把製作好的圖片,上傳到Blogger上面,製作在head裡,放入指定的html程式碼,結果,好像沒什麼用…

後來試到有點累,就放棄再嘗試了。

休息完的隔天,我又想要再來試看看了,不過這次我改搜尋國外的網站,後來找到「stackoverflow」的這個問題,裡面有解答如下:

I guess apple devices make those requests if the device owner adds the site to it. This is the equivalent of the favicon. To resolve, add 2 100×100 png files, save it as apple-touch-icon-precomposed.png and apple-touch-icon.png and upload it to the root directory of the server. After that, the error should be gone.

因此,我就照著要求,製作了兩張相同尺寸100×100的圖示,分別命名為「apple-touch-icon-precomposed.png」及「apple-touch-icon.png」,並且上傳到網站的「根目錄」之下。

沒想到,居然有作用了…

iphone_safari_icon-03.jpg

原來根本也不用修改HTML,只要擺兩張圖片到根目錄就好了,此外,我在猜,之前在Blogger弄不成功,說不定是圖片沒放在「根目錄」的關係,如果有朋友有試過的話,可以把結果留言一下,非常感謝,因為我目前也沒有打算要試了…

免費下載.icon格式檔案、可將任何圖片(JPG,PNG,GIF,BMP)轉成.Ico檔的Quick Any2Ico程式

.ICO格式的檔案

「.ico」這種格式的檔案,對於一般人使用者來說,應該相當的陌生,但對於程式設計師,或是美術、動畫設計師來說,就一定會有機會碰到這玩意,每當我們在設計一個程式時,除了主程式本身之外,在程式裡的各個按鈕及功能,多多少少都會有需要Icon這個檔案圖示。

當我們有這些需求時,如果是在公司的團隊時,我們程式就會向公司的美術提出需求,全能的美術就會根據我們的需求,設計出各式各樣需求的Icon,但如果,我們是個體戶,寫的程式是自己在用的,或是佛心來著寫的程式是放在網路上供人下載使用的,像是這個「PPPoE自動撥號程式」:

就是小弟我寫來給大家用的,當然我自己如果剛好電腦的環境是需要ADSL撥號時,或是組裝的客戶有需要時,我也會自己下載來使用。大家可以看到,在這個程式的左上方,也有一個圖示,這個就是在網路上搜尋到的icon免費資源下載下來的,多虧有這個icon,讓這個小程式看起來「專業」許多。

而合法取得這些ICON的方式,我想不是從網路上找,就是自己製作吧!

icon-1.jpg

(像是這個Visual Studio程式上的工具列,就有一大堆的圖示,就是使用這些Icon檔所製作出來的。)

FIND ICONS圖示檔案圖庫網

因為我自己並不是美術人員,也沒有設計圖示的天份,所以每次完成一支程式時,且需要一個漂亮的ICON時,就會從網路上的ICON網站下載,底下這個網站是我每次都會去尋找的網站。

FIND ICONS (http://findicons.com/)

icon-4.jpg

這個網站在搜尋時,要用「英文」的「關鍵字」來搜尋,例如:「cat」,就會出現一大堆很可愛的icon,如下圖:

icon-5.jpg

而在出現的這些貓的icon,在最下方的部份是「Premium Icons」,也就是付費的Icon,點擊這些Icon之後,就會開啟各自付費圖庫網站的頁面,如果你只是想要下載免費的Icon,那就可以參考這些Premium Icons上方的這些icons圖片,事實上這些免費的icon就已經優惠到不行了。

隨便點擊一個圖片,就可以進入該Icon的詳細訊息,如下圖:

icon-6.jpg

在這個頁面中,就可以看到在這個圖示中,有幾個解析度及版權宣告等訊息,同時在右方可以點擊〔下載ICO〕、〔下載PNG〕、〔多解析度ICO〕…等,點擊這些按鈕,就可以直接下載您所要的圖片檔案,甚至連PNG都有。

像是這個PNG,就可以直接用在網站的ICON上面,例如:

icon-2.jpg

只要下載之後,將檔案重新命名為「favicon.png」,就可以成為網站的圖示了。

自己繪製圖片,再利用圖示轉檔軟體

而另外有能力可以製作圖示的朋友,就可以利用自己熟悉的繪圖程式(IllustratorCorelDraw…),製作好圖案,並另存成jpg、bmp或png檔之後,再利用「Quick Any2Ico」這個轉檔程式,將檔案轉成正式可用的ICON檔案。

icon-7.jpg

此外,這個Quick Any2Ico程式,還可以從現有的exe、dll檔,直接取出icon圖片出來。

Powered by WordPress & Theme by Anders Norén