您現在的位置是:電腦技術吧?>? 編程技術 ??>??完美圖標,完美公司圖標??>??正文詳情

完美圖標,完美公司圖標

竹新冬2019-11-17 09:10:35 人圍觀
簡介完美瑪麗艷圖標Favicon通常被稱為網頁的小圖標、網站的縮略圖圖標或收藏夾圖標,是瀏覽器中除了標題之外的網站和收藏夾的重要識別方法。今天的文章來自設計師Philippe B完美鋼琴用過

Favicon,常被稱為網頁小圖標、網站縮略圖標或者收藏夾圖標,是網站在瀏覽器和收藏夾中除標題外的重要識別方式。

今天的這篇文章來自設計師Philippe Bernard,他以小測試的形式為我們詳細介紹了Favicon的相關知識。

在文末,Philippe 還為我們介紹了他設計的在線Favicon制作工具RealFaviconGenerator(自備梯子)。

Favicon最早于1999年出現在IE5上,并且在幾個月之后由W3C納入標準,作為代表網站的小圖標。

隨后,絕大多數的桌面端瀏覽器跟隨這一趨勢,開始以各自的方式使用Favicon。

為網站隨便做個小圖標嘛,一點都不炫酷,能有多復雜?

事實真的如此嘛?

讓我們通過一個小測試來了解一下Favicon。

問:Favicon的圖標文件長啥樣?

答:這上一個favicon.ico 文件,通常它并不是一個改名之后的PNG圖片,雖然有的瀏覽器可以識別PNG改ICO的Favicon文件。

ICO實際上是一個完全不同的格式,它支持使用一張圖片包含多個版本和格式。

問:Favicon.ico應該是什么尺寸?

A:標準尺寸應該是1616吧。

B:好象什么時候標準更新為3232~C:視網膜屏幕開始流行了!現在應該用6464!D:以上答案都是扯淡。

答:D。

Favicon.ico的格式最初是由微軟和其他一系列廠商共同制定標準。

微軟建議使用1616、3232 和 4848。

是的,沒錯,一個ICO格式文件可以包含多個圖片喲~桌面瀏覽器中經常在選項卡中使用Favicon,在標準的顯示器上,1616的分辨率就夠看了:

截至目前,1616 的Favicon.ico 在谷歌瀏覽器的標簽中,看起來還很不錯。

可是,1616 的Favicon.ico添加到桌面上就不好看了。

將1616 的Favicon.ico添加到任務欄的效果。

1616 的Favicon.ico 添加到桌面的效果,并不理想。

所以,當Favicon包含多個圖片之后,展示效果會好很多。

當使用包含1616,3232以及4848 多尺寸圖片的Favicon之后,任務欄的顯示效果就好多了,看起來更像是本地應用了。

包含1616,3232以及4848 多尺寸圖片的Favicon 應用到桌面上,效果完美。

問:那么Favicon.png的意義何在?

當我們深入探討Favicon的時候,始終繞不過Favicon.png這個文件,人們一直對它心存疑慮。

它究竟是什么?

A:它是為那些不支持Favicon.ico這種文件而生的圖標,比如Firefox?

B:一個高分辨率的圖標。

要知道,高分辨率的屏幕越來越多了。

C:這上一個歷史遺留的產物。

現在有更加現代的圖標替代它。

D:well,這是一個非常復雜的事兒。

答:D。

隨著HTML5的推行,Favicon.ico 逐漸顯得不那么有用了。

不同大小屬性的圖片可以被同一個圖片的不同版本所替代,而PNG格式圖片正好可以勝任。

link rel=icon type=image/png href=/favicon-16x16.png sizes=16x16link rel=icon type=image/png href=/favicon-32x32.png sizes=32x32link rel=icon type=image/png href=/favicon-96x96.png sizes=96x96那么,我們應該怎樣聲明呢?

接下來,我們要面對的真相可能并不那么令人滿意。

盡管所有的桌面瀏覽器都在支持Favicon.ico文件,但是這個文件終究是過時的。

你依然可以繼續使用Favicon.ico,它也仍然會繼續正常工作,但坦率地講,它的局限性越來越明顯,相反,PNG更加一致,應用范圍更廣。

Favicon.ico 是為舊版的IE而生,對于其他瀏覽器和新版的IE,我們傾向于使用PNG圖標,那么我們應該怎樣設置它的尺寸呢?

接下來,我們探討一下這個問題。

問:在移動平臺上我們需要什么樣的格式?

根據AmartInsights的數據顯示,超過26%的網站流量是來自智能手機和平板,那么在未來,我們需要使用什么樣的格式呢?

A:當然是Favicon.ico,截至目前它已經存在15年了。

B:PNG格式圖標。

你都說了要繼續探討這個了~C:Apple Touch IconD:反正無論如何都不會在ABC中列出正確答案備注:在iPhone,iPad,iTouch的safari上可以使用添加到主屏按鈕將網站添加到主屏幕上。

apple-touch-icon是IOS設備的私有標簽,如果設置了相應apple-touch-icon標簽,則添加到主屏上的圖標會使用指定的圖片。

Apple-touch-icon標簽支持sizes屬性,可以用來放置對應不同的設備。

答:D。

你需要PNG 圖標,也需要Apple Touch Icon,還需要Windows 8 磁貼,最重要的,你需要一個名為 browserconfig.xml 的文件。

比起傳統的桌面端瀏覽器,移動端平臺更加龐雜,屏幕尺寸和分辨率也差異巨大,iOS和Android兩家割據,并不是像互聯網剛剛興起的時候WIndows一家獨大之時那么容易推廣標準。

所以,你不用期待一個移動端Favicon 應付所有需求。

問:那么PNG格式應該使用哪些尺寸呢?

A:9696,Google TVB:196196,Android和ChromeC:228228,Coast,OperaD:以上全部答:D。

當然,這還不是全部。

你還需要為老版的Opera的快速撥號界面準備 160160 尺寸的圖標,而Chrome 網上商店的圖標還需要128128 尺寸的圖標。

所以,在選取尺寸的時候需要考慮它到底要支持哪些平臺。

問:Apple Touch Icon 的尺寸應設定為多少?

答:早期的時候,你只需要準備5757的圖標就行,但是現在,你需要制作高達152152 的圖標。

在iPhone發布之后,Apple Touch icon的尺寸發生過3次變化。

首先是iPad的發布。

它的屏幕尺寸比iPhone大,圖標尺寸也稍有差別。

然后是Retina屏幕。

這時候屏幕的像素密度是之前的2倍。

再就是iOS7的發布。

扁平化之后,圖標在iPhone和iPad上略有不同。

這樣一來,iOS上圖標尺寸就有了2x2x2=8種規格:

老版的5757的Apple Touch icon 在視網膜屏幕上的效果很模糊。

152152 的Apple Touch icon 在視網膜上效果很清晰。

如果你沒有猜對Apple Touch icon的正確尺寸,不要自責。

在全球最靠前的5000個網站中,能用對Apple Touch icon的不到4%。

有人可能會說,制作8個版本的Apple Touch icon沒有必要,但是你至少需要備好一個152152的圖標。

這能確保運行iOS7的視網膜屏幕iPad能夠正常顯示圖標,而分辨率較低的iOS設備也能按比例縮小,顯示效果也不會差。

問:有必要在HTML中聲明Apple Touch icon么?

A:不知道。

B:有必要。

否則iOS怎么能識別它們?

C:沒必要。

按照Apple的習慣來放置圖標就夠了,iOS設備無論如何都會找到它們的。

D:沒有必要,但是答:好吧,答案還是D。

考慮到還有其他平臺(Andorid,WP等)也會用Apple Touch icon,所以最好還是為之作出聲明。

link rel=apple-touch-icon sizes=57x57 href=/apple-touch-icon-57x57.png link rel=apple-touch-icon sizes=114x114 href=/apple-touch-icon-114x114.png link rel=apple-touch-icon sizes=72x72 href=/apple-touch-icon-72x72.png link rel=apple-touch-icon sizes=144x144 href=/apple-touch-icon-144x144.png link rel=apple-touch-icon sizes=60x60 href=/apple-touch-icon-60x60.png link rel=apple-touch-icon sizes=120x120 href=/apple-touch-icon-120x120.png link rel=apple-touch-icon sizes=76x76 href=/apple-touch-icon-76x76.png link rel=apple-touch-icon sizes=152x152 href=/apple-touch-icon-152x152.png比起高分辨率的PNG圖片,Apple Touch icon更流行也更加常見,諸如Android Chrome這樣的移動端瀏覽器也傾向于使用它們。

因此,聲明它們會相對更安全,以備其他兼容的設備和瀏覽器隨時能夠訪問它們。

問:怎樣才能為 WIndows 8 平板設計一個磁貼?

A:windows 8 平板是個啥?

B:Favicon.ico,這是鮑爾默(微軟前CEO)的遺產。

C:使用Two msapplication-TileColor 和 msapplication-TileImage meta 標簽.D:browserconfig.xml答:對于Windows 8.0 和IE 10,答案是C;對于WIndows 8.1和IE 11,答案是D;當然,A差不多也可以說是對的,哈哈~Windows 8.0 中通常是這樣聲明的:meta name=msapplication-TileColor content=#2b5797meta name=msapplication-TileImage content=/mstile-144x144.png在Windows 8.1 和 IE 11 中的磁貼則通常是這樣聲明的:?xml version=1.0 encoding=utf-8?browserconfig msapplication tile square70x70logo src=/mstile-70x70.png/ square150x150logo src=/mstile-150x150.png/ square310x310logo src=/mstile-310x310.png/ wide310x150logo src=/mstile-310x150.png/ TileColor#2b5797/TileColor /tile /msapplication /browserconfig新的Metro Ui擁有一系列全新的設計規范,比如內置的APP都使用了white silhouettes。

Windows 8 桌面的網站磁貼。

問:150150 尺寸的Logo 磁貼到底要用多大尺寸的?

A:都說了是150150的,還會有什么其他的尺寸?

B:怎么不能是其他尺寸的?

答:B,270270。

微軟推薦使用更大的尺寸,以兼容更高分辨率的屏幕恭喜你!整個測試到此結束,你都答對了么?

這些問題看起來很簡單,但是實際上真正深究的話,還是非常刁鉆的。

單純使用Favicon.ico的時代已經過去了,雖然還有網站沿襲舊有的習慣,但是常常會導致荒謬的結果。

我們可以耗費很長時間來精心雕琢響應式網站,但是如何只是內置一個5757的 Apple Touch icon,那么網站也只能是在老舊的設備上正常顯示。

為移動時代而生的Favicon生成器在今天,制作一個符合多平臺需求的Favicon是復雜而艱難的。

你當然可以在網站根目錄中內置一個老派的Favicon.ico,一個3232的PNG圖標和一個152152的Apple Touch icon。

但是,你也可以內置足以應付任何分辨率屏幕的一組圖標,只是這樣一來,工作量就非常恐怖了。

這個時候,你需要RealFaviconGenerator。

和傳統的Favicon生成器不一樣,RealFaviconGenerator主要滿足2大需求:編輯圖標,和生成代碼。

不同的平臺使用截然不同的界面,所以需要為不同的平臺生成不同的圖標。

RealFaviconGenerator自然不是在線的PS,但是RealFaviconGenerator通過設置可以幫你設計出符合不同平臺需求的圖標。

比如,你可以為iOS設備生成帶不透明背景的圖標,以及符合Windows 8的白色圖標。

RealFaviconGenerator 編輯器主要生成圖片和相應的HTML代碼,其中主要覆蓋以下平臺:PC/Mac,iOS,Android,Windows 8 等。

可用的圖片和HTML代碼比如,當你提供一個高分辨率的圖標,簡單幾個點擊就可以生成如下圖標:

總而言之,在RealFaviconGenerator的幫助之下制作Favicon和10年前一樣方便快捷。

版權聲明:本文由 竹新冬 整理編輯。

原標題:完美圖標圖片大全,完美日記圖標

轉載注明出處:http://www.dn9ww09s.icu/program/13119.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 虛擬內存影響玩游戲嗎,win7虛擬內存設置多少好

    虛擬內存影響玩游戲嗎,win7虛擬內存設置多少好 相關圖片電腦虛擬內存的作用當用戶運行一個大的程序或打開太多的程序而耗盡物理內存時,虛擬內存可以分擔部分負擔,使程序正常運行。通常,它應該設置為物理內存大小的兩倍。如果設置...

  • ppt制作時鐘動畫,時鐘動畫

    ppt制作時鐘動畫,時鐘動畫 相關圖片max時鐘動畫最終預覽讓我們看看最終預覽效果的第一步:二進制是什么意思?每個人都知道如何計數,但不是每個人都知道有多少不同的方法可用。現在我們將使用一個非常特殊的方法...

  • 沖頂大會,沖頂大會現在還有嗎

    沖頂大會,沖頂大會現在還有嗎 相關圖片沖頂大會為何取消了談到最近最流行的軟件類型,自然是軟件贏得了各種類型的問題獎。其中,最受歡迎的是首腦會議。你知道怎么參加峰會嗎?峰會如何兌現?我不怎么說。接下來,...

  • 視覺稿,稿定設計視覺

    視覺稿,稿定設計視覺 相關圖片稿定設計視覺支持是什么意思對于視覺設計師和交互設計師來說,他們需要做的不僅僅是設計一個靜態頁面和一個獨立的圖標,而是將這些元素作為一個整體結合起來,并根據整體的畫...

  • 火螢視頻桌面,火螢視頻桌面怎么設置

    火螢視頻桌面,火螢視頻桌面怎么設置 相關圖片火螢桌面下載螢火蟲視頻桌面是一款多平臺動態壁紙軟件,具有個性化、個性化、年輕化的特點。內置多類視頻資源,提供免費下載,使您的設備具有一種個性化的美感。有些朋友不知...

  • xml與xhtml的區別,xml與html的異同

    xml與xhtml的區別,xml與html的異同 相關圖片xhtml與html5HTML:超文本標記語言;XHTML:可擴展超文本標記語言;XML:可擴展標記語言。如果你有任何問題,可以參考下面的文章。發展趨勢:HTML(超文本標記語言)Xhtml跟xhtml哪個好用...

  • dashboard是什么意思,dashboard是什么

    dashboard是什么意思,dashboard是什么 相關圖片willpower是什么意思Dashboard是蘋果操作系統中的一個應用程序。它的界面主要是一個半透明層。它隱藏在啟動時間之外。用戶可以通過按熱鍵啟動,熱鍵可以在“首選項”中更改。大船c...

  • 芝麻信用怎么開通,芝麻信用

    芝麻信用怎么開通,芝麻信用 相關圖片芝麻信用分在哪里查看Pulse作為一種能夠擴展網絡的軟件,相信有很多小伙伴通過它來結識一些客戶和朋友。那么pulse怎么能綁定芝麻信用呢?脈沖綁定芝麻信用卡有什么用?我不怎么說...

  • 跳轉菜單,自定義菜單跳轉網頁

    跳轉菜單,自定義菜單跳轉網頁 相關圖片訂閱號菜單跳轉到網頁一。在Dreamweaver 1中插入跳轉菜單。單擊鼠標,將光標定位在表單框中,單擊“插入”菜單,選擇表單項,在彈出的子菜單中選擇“跳轉菜單”命令,或在“插入”...

  • genymotion怎么使用,genymotion破解版

    genymotion怎么使用,genymotion破解版 相關圖片genymotion破解版網盤資源Genymotion是一個Android模擬器,它允許用戶在計算機上運行Android系統。有些游戲可以擺脫手機電源的束縛,毫無顧忌地在電腦上運行。讓我們看看如安卓模擬器gen...

熱評文章

  • 鼠標點電腦電腦沒反應,recent替換

    鼠標點電腦電腦沒反應,recent替換 相關圖片desktop最近,很多孩子報告說,當他們打開電腦時,他們發現了一個叫做recentplaces的圖標。那么什么是最近的地方?可以刪除最近的位置嗎?我不會說太多。下一個favorites...

  • 火螢視頻桌面,火螢視頻桌面怎么設置

    火螢視頻桌面,火螢視頻桌面怎么設置 相關圖片火螢桌面下載Firescreen視頻桌面的主要功能之一是用戶可以將視頻文件設置為自己的動態桌面,非常酷。您不僅可以在本地導入視頻文件以進行自己的設置,還可以將視頻發送到fi視頻桌...

  • media播放器,安卓ijkmedia播放器

    media播放器,安卓ijkmedia播放器 相關圖片A什么播放器代碼如下:!DOCTYPE htmlmllang=enheadmetachset=utf-8titlehtml音頻API/titlelinkrel=styles播放器...

  • 怎么取消bitlocker,bitlocker取消不了

    怎么取消bitlocker,bitlocker取消不了 相關圖片u盤bitlocker怎么取消BitLocker是一個用于數據保護的平臺模塊,它可以幫助保護windows操作系統和用戶數據,并有助于確保計算機即使無人值守、丟失或被盜也不會被篡改。但對于普bitlocke...

  • 給黑白照片上色,黑白照片如何上色

    給黑白照片上色,黑白照片如何上色 相關圖片黑白照片怎么上色ps事實上,煙火也可以給黑白照片上色你不相信嗎?一起試試吧!打開煙火中的黑白圖片,然后使用魔棒工具進行選擇。在Xtra/adjust color/hue saturps給黑白照片人物上色...

  • workstation密鑰,workstation10密鑰

    workstation密鑰,workstation10密鑰 相關圖片vmware 15 密鑰VMware工作站是最常用、最經典的虛擬機軟件。使用vmware工作站,我們可以在主機上運行單獨的操作系統,而不會影響vm15密鑰...

  • 360網址收藏夾在什么位置,360收藏夾默認在什么位置

    360網址收藏夾在什么位置,360收藏夾默認在什么位置 相關圖片360收藏夾網頁版作為一款能夠為用戶提供強大保護服務的瀏覽器,360瀏覽器受到了大家的喜愛。你知道360最愛在哪里嗎?如果缺少360個收藏夾,您該怎么辦?現在,超人軟件將為您帶來...

  • 載入遠程圖像,vb載入圖像

    載入遠程圖像,vb載入圖像 相關圖片郵件載入遠程圖像是什么意思使用“預加載圖像”行為將頁面上暫時不顯示的圖像加載到瀏覽器緩存中。使用具有更多圖像的對象時,可以提前將使用過的圖像下載到瀏覽器緩存中,以...

  • assembly是什么文件夾,assembly路徑下只有文件夾

    assembly是什么文件夾,assembly路徑下只有文件夾 相關圖片branding文件夾可以刪除嗎我相信我的很多朋友在打開C盤后發現了一個名為assembly的文件夾。它占用了很多記憶。那么匯編文件夾有什么用呢?可以刪除程序集文件夾嗎?現在,超人軟件是...

  • 橫向滾動條怎么去掉,怎么去掉滾動條

    橫向滾動條怎么去掉,怎么去掉滾動條 相關圖片如何去掉網頁左右的滾動條一。在原始的HTML中,我們可以定義整個頁面的滾動條如下:body{scroll-3dlight-color:?d4d0c8;/*-最左邊-*/scroll hcss去掉滾動條...

關注微信

变脸官网查询