Favicons - Praktik terbaik

Saya mencoba memahami semua ukuran dan format berbeda yang diperlukan untuk Favicons, ikon Touch, dan sekarang ikon Ubin juga.

Saya telah membaca posting ini: http://www.jonathantneal.com/blog/understand-the-favicon tetapi saya masih agak bingung tentang apa yang harus digunakan yang akan terlihat cukup bagus di semua perangkat dan browser> = IE8 .

Saya pikir saya harus membuat yang berikut ini:

ICO
favicon.ico (32x32)

PNG
favicon.png (96x96)

Ikon Ubin
tileicon.png (144x144)

Ikon Apple Touch
apple-touch-icon-precomposed.png (152x152)
berdasarkan https://github.com/h5bp/html5-boilerplate/issues/1367 ini

... dan kemudian menggunakan kode ini untuk menyajikannya?

<link rel="apple-touch-icon" href="path/to/touchicon.png">
<link rel="icon" href="path/to/favicon.png">
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- or, set /favicon.ico for IE10 win -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">

Apakah saya melewatkan sesuatu?

Saya tidak jelas apakah ini akan mencakup IE 10?

Favicon jauh lebih kompleks daripada kedengarannya. 10 tahun yang lalu, favicon.icoadalah satu-satunya barang yang dibutuhkan. Lalu, ada ikon sentuh, lalu beberapa ikon sentuh untuk berbagai resolusi layar perangkat iOS, lalu ada ikon ubin untuk Windows ...

Beberapa jawaban di sini sangat komprehensif - dan luar biasa (semua ini, hanya untuk favicon?). Namun, mereka gagal menunjukkan bahwa ikon ubin 310x310 untuk Windows disarankan berukuran 558x558 . Dan karena ditulis beberapa bulan yang lalu, mereka tidak menyebutkan manifes terbaru untuk Android Chrome M39 atau ikon SVG tab yang disematkan untuk Safari di OS X El Capitan .

Desain per platform adalah topik lain yang sulit, namun diabaikan. Misalnya, favicon sering kali transparan. Tetapi iOS tidak mendukung transparansi (untuk contoh ini, bandingkan ikon SO touch dan apa yang Anda dapatkan saat menambahkan SO ke layar beranda iPhone Anda).

Untuk alasan ini, yang saya anggap sebagai praktik terbaik untuk favicon adalah tidak membuatnya secara manual. Sebagai gantinya, gunakan alat untuk mengotomatiskan seluruh proses dan menerapkan pedoman platform.

Saya menyarankan Anda untuk menggunakan RealFaviconGenerator . Ini menghasilkan semua gambar dan kode HTML yang Anda butuhkan untuk menyelesaikan pekerjaan:

• favicon.ico dan ikon PNG untuk browser desktop
• Ikon sentuh Apple untuk perangkat iOS dan Android
• Ubin Windows 8
• Ikon tab yang disematkan untuk Safari di OS X El Capitan

Misalnya, ini tidak hanya menghasilkan msapplication-TileImagegambar dan markup tetapi juga file yang lebih baru yang browserconfig.xmldidukung oleh IE11. Itu juga diperbarui beberapa bulan yang lalu untuk mendukung manifes Android Chrome dan Safari OS X El Capitan.

Pengungkapan penuh: Saya adalah penulis situs ini.

Berikut ini contoh lengkap favicon untuk ponsel dan tablet:

<!-- non-retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon57.png" sizes="57x57">
<!-- non-retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon72.png" sizes="72x72">
<!-- non-retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon76.png" sizes="76x76">
<!-- retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon114.png" sizes="114x114">
<!-- retina iPhone iOS 7 -->
<link rel="apple-touch-icon" href="icon120.png" sizes="120x120">
<!-- retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon144.png" sizes="144x144">
<!-- retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon152.png" sizes="152x152">
<!-- Win8 tile -->
<meta name="msapplication-TileImage" content="favicon-144.png">
<meta name="msapplication-TileColor" content="#B20099"/>
<meta name="application-name" content="name" />

<!-- IE11 tiles -->
<meta name="msapplication-square70x70logo" content="tile-tiny.png"/>
<meta name="msapplication-square150x150logo" content="tile-square.png"/>
<meta name="msapplication-wide310x150logo" content="tile-wide.png"/>
<meta name="msapplication-square310x310logo" content="tile-large.png"/>

Untuk IE11, berikut adalah FAQ

Ada sejumlah ikon berbeda dan bahkan layar pembuka yang dapat Anda atur untuk berbagai perangkat. Jawaban ini membahas bagaimana mendukung mereka semua.

Berikut beberapa cuplikan yang telah saya gunakan dengan tautan relevan ke tempat saya mengumpulkan informasi. Lihat blog saya untuk informasi lebih lanjut dan informasi lebih lanjut tentang template proyek ASP.NET MVC Boilerplate dengan semua ini dibangun langsung dari kotak (Termasuk file gambar contoh).

Tambahkan mark-up berikut ke kepala html Anda. Bagian yang diberi komentar sepenuhnya opsional. Sedangkan bagian tanpa komentar direkomendasikan untuk mencakup semua penggunaan ikon. Jangan takut, kebanyakan jika itu adalah komentar untuk membantu Anda.

<!-- Icons & Platform Specific Settings - Favicon generator used to generate the icons below http://realfavicongenerator.net/ -->
<!-- shortcut icon - It is best to add this icon to the root of your site and only use this link element if you move it somewhere else. This file contains the following sizes 16x16, 32x32 and 48x48. -->
<!--<link rel="shortcut icon" href="favicon.ico">-->
<!-- favicon-96x96.png - For Google TV. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/content/images/favicon-32x32.png" sizes="32x32">

<!-- Android/Chrome -->
<!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory.
    https://developer.chrome.com/multidevice/android/installtohomescreen. -->
<link rel="manifest" href="https://stackoverflow.com/content/icons/manifest.json">
<!-- theme-color - The colour of the toolbar in Chrome M39+
    http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
<meta name="theme-color" content="#1E1E1E">
<!-- favicon-192x192.png - For Android Chrome M36 to M38 this HTML is used. M39+ uses the manifest.json file. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/content/icons/favicon-192x192.png" sizes="192x192">
<!-- mobile-web-app-capable - Run Android/Chrome version M31 to M38 in standalone mode, hiding the browser chrome. -->
<!-- <meta name="mobile-web-app-capable" content="yes"> -->

<!-- Apple Icons - You can move all these icons to the root of the site and remove these link elements, if you don't mind the clutter.
    https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//apple_ref/doc/uid/30001261-SW1 -->
<!-- apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. -->
<!--<meta name="apple-mobile-web-app-title" content="">-->
<!-- apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in 'standalone' mode. Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. -->
<!--<meta name="apple-mobile-web-app-capable" content="yes">-->
<!-- apple-mobile-web-app-status-bar-style - default/black/black-translucent Styles the IOS status bar. Using black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. -->
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black">-->
<!-- apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon" sizes="57x57" href="https://stackoverflow.com/content/images/apple-touch-icon-57x57.png">
<!-- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="114x114" href="https://stackoverflow.com/content/images/apple-touch-icon-114x114.png">
<!-- apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 6 -->
<link rel="apple-touch-icon" sizes="72x72" href="https://stackoverflow.com/content/images/apple-touch-icon-72x72.png">
<!-- apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="144x144" href="https://stackoverflow.com/content/images/apple-touch-icon-144x144.png">
<!-- apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7. -->
<link rel="apple-touch-icon" sizes="60x60" href="https://stackoverflow.com/content/images/apple-touch-icon-60x60.png">
<!-- apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="120x120" href="https://stackoverflow.com/content/images/apple-touch-icon-120x120.png">
<!-- apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 7 -->
<link rel="apple-touch-icon" sizes="76x76" href="https://stackoverflow.com/content/images/apple-touch-icon-76x76.png">
<!-- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="152x152" href="https://stackoverflow.com/content/images/apple-touch-icon-152x152.png">
<!-- apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS = 8 -->
<link rel="apple-touch-icon" sizes="180x180" href="https://stackoverflow.com/content/images/apple-touch-icon-180x180.png">

<!-- Apple Startup Images - These are shown when the page is loading if the site is pinned https://gist.github.com/tfausak/2222823 -->
<!-- apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5 -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-320x460.png - iOS 6 iPhone -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">

<!-- Windows 8 Icons - If you add an RSS feed, revisit this page and regenerate the browserconfig.xml file. You will then have a cool live tile!
     browserconfig.xml - Windows 8.1 - Has been added to the root of the site. This points to the tile images and tile background colour. It contains the following images:
     mstile-70x70.png - For Windows 8.1 / IE11.
     mstile-144x144.png - For Windows 8 / IE10.
     mstile-150x150.png - For Windows 8.1 / IE11.
     mstile-310x310.png - For Windows 8.1 / IE11.
     mstile-310x150.png - For Windows 8.1 / IE11.
     See http://www.buildmypinnedsite.com/en and http://msdn.microsoft.com/en-gb/library/ie/dn255024%28v=vs.85%29.aspx. -->
<!-- application-name - Windows 8+ - The name of the application if pinned to the start screen. -->
<!--<meta name="application-name" content="">-->
<!-- msapplication-TileColor - Windows 8 - The tile colour which shows around your tile image (msapplication-TileImage). -->
<meta name="msapplication-TileColor" content="#5cb95c">
<!-- msapplication-TileImage - Windows 8 - The tile image. -->
<meta name="msapplication-TileImage" content="/content/images/mstile-144x144.png">

File browserconfig.xml saya. Penjelasan lengkap diatas.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/Content/Images/mstile-70x70.png"/>
      <square150x150logo src="/Content/Images/mstile-150x150.png"/>
      <square310x310logo src="/Content/Images/mstile-310x310.png"/>
      <wide310x150logo src="/Content/Images/mstile-310x150.png"/>
      <TileColor>#5cb95c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

File manifest.json saya. Penjelasan lengkap diatas.

{
    "name": "ASP.NET MVC Boilerplate (Required! Update This)",
    "icons": [
        {
            "src": "\/Content\/icons\/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/Content\/icons\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/Content\/icons\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ]
}

Daftar file dalam proyek (Perhatikan bahwa nama-nama file ini penting jika Anda memutuskan untuk meletakkan beberapa di antaranya di root proyek Anda untuk menghindari penggunaan tag meta di atas):

favicon.ico
browserconfig.xml
Content/Images/
    android-chrome-144x144.png
    android-chrome-192x192.png
    android-chrome-36x36.png
    android-chrome-48x48.png
    android-chrome-72x72.png
    android-chrome-96x96.png
    apple-touch-icon.png
    apple-touch-icon-57x57.png
    apple-touch-icon-60x60.png
    apple-touch-icon-72x72.png
    apple-touch-icon-76x76.png
    apple-touch-icon-114x114.png
    apple-touch-icon-120x120.png
    apple-touch-icon-144x144.png
    apple-touch-icon-152x152.png
    apple-touch-icon-180x180.png
    apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    apple-touch-startup-image-1536x2008.png
    apple-touch-startup-image-1496x2048.png
    apple-touch-startup-image-768x1004.png
    apple-touch-startup-image-748x1024.png
    apple-touch-startup-image-640x1096.png
    apple-touch-startup-image-640x920.png
    apple-touch-startup-image-320x460.png

Total Overhead

Jika Anda menghilangkan komentar yang memiliki HTML tambahan 3KB, jika Anda tidak mendukung layar splash yang berukuran 1,5KB. Jika Anda menggunakan kompresi GZIP pada konten HTML Anda, yang seharusnya dilakukan semua orang saat ini, Anda memiliki sekitar 634 Byte overhead per permintaan untuk mendukung semua platform atau 446 Bytes tanpa splash screen. Saya pribadi berpikir itu layak untuk mendukung perangkat IOS, Android dan Windows tetapi itu pilihan Anda, saya hanya memberikan opsi!

Catatan Samping Tentang Situasi Ikon / Layar Pembuka / Pengaturan Web Saat Ini

Situasi dengan ikon khusus vendor, layar splash, dan tag khusus untuk mengontrol browser web atau ikon yang disematkan ini konyol. Dalam dunia yang sempurna kita semua akan menggunakan file favicon.svg yang bisa terlihat bagus dalam berbagai ukuran dan bisa ditempatkan di root halaman. Hanya FireFox yang mendukung ini pada saat penulisan (Lihat CanIUse.com ).

Namun, ikon bukan satu-satunya pengaturan saat ini, ada beberapa pengaturan khusus vendor lainnya (ditampilkan di atas) tetapi file favicon.svg akan mencakup sebagian besar kasus penggunaan.

Memperbarui

Diperbarui untuk menyertakan opsi baru Android / Chrome versi M39 + favicon / tema. Menariknya, mereka menggunakan pendekatan yang mirip dengan Microsoft tetapi menggunakan file JSON, bukan XML.

Solusi paling sederhana adalah dengan menggunakan satu (!) Gambar PNG (pada tahun 2020).

Cukup tambahkan ini ke bagian atas dokumen Anda:

<link rel="shortcut icon" type="image/png" href="https://stackoverflow.com/img/icon-192x192.png">
<link rel="shortcut icon" sizes="192x192" href="https://stackoverflow.com/img/icon-192x192.png">
<link rel="apple-touch-icon" href="https://stackoverflow.com/img/icon-192x192.png">

Tautan terakhir adalah untuk Apple (layar beranda), yang kedua untuk Android (layar beranda) dan yang pertama untuk yang lainnya.

Perhatikan bahwa solusi ini TIDAK mendukung 'ubin' di Windows 8/10. Ini TIDAK mendukung gambar dalam cara pintas, bookmark dan tab browser.

Ukurannya persis dengan ukuran yang digunakan layar utama Android. Ukuran ikon layar beranda Apple adalah 60px (3x), jadi 180px dan akan diperkecil. Platform lain menggunakan ikon pintasan default, yang juga akan diperkecil.

Saya sebenarnya bertanya pada diri sendiri pertanyaan yang sama dan mencoba mencari proyek sederhana di luar sana yang dapat diintegrasikan ke dalam langkah pembangunan atau hanya menyederhanakan pembuatan aset dan markup yang diperlukan.

Saya tidak menemukan apa pun yang memenuhi persyaratan saya, jadi saya membuat faviconbuild dan merilisnya di bawah lisensi MIT .

Tujuan dari proyek ini adalah untuk membuat utilitas lintas platform yang terpusat, dapat dipelihara, dan dapat dijalankan secara lokal untuk membangun favicon dan markup pendukung. Ini memanfaatkan kekuatan Imagemagick sehingga Anda perlu mengunduhnya untuk platform Anda atau menggunakan yang saya sediakan di rilis saya . Silakan gunakan ini dalam proyek komersial atau pribadi, berkontribusi, mengirimkan permintaan fitur, atau cukup gunakan sebagai sumber inspirasi untuk utilitas Anda sendiri.

Proyek ini terdiri dari file batch untuk Windows dan skrip bash untuk Unix / Mac (atau Windows melalui Cygwin). Anda bisa mendapatkan daftar lengkap opsi yang didukung dari opsi bantuan internal -h atau --help.

ex:

./faviconbuild.sh -h

Kedua skrip mengurai file teks sederhana yang juga dapat Anda timpa dengan opsi -p atau --parsed. File ini pada dasarnya hanyalah template perintah untuk dijalankan sehingga Anda dapat lebih mudah menyesuaikan output jika diperlukan.

Saya juga menerbitkan posting blog tentang pengembangan dan sebagai tutorial mini tentang skrip bash / batch.