Apa yang harus dimasukkan?
Minimum
<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) -->
<link rel="shortcut icon" href="/favicon.ico">
<!-- Modern browsers (196x196 should cover all modern browsers) -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- iOS & other mobile devices (ideally 180x180, at least 120x120) -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
Untuk yang Obsesif
<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) -->
<link rel="shortcut icon" href="/favicon.ico">
<!-- Modern browsers & Devices -->
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="icon" type="image/png" href="/favicon-64x64.png" sizes="64x64">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-128x128.png" sizes="128x128">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">
<!-- iOS & other mobile devices -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">
<!-- Windows Tiles (optionally omitted and replaced with browserconfig.xml in root directory) -->
<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />
<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />
favicon.ico
favicon.ico adalah yang tertua dari favicons, sudah berfungsi sejak sebelum banyak orang yang membaca ini lahir dan masih berfungsi dengan baik hari ini.
Microsoft merekomendasikan untuk menyertakan gambar berukuran 16x16, 32x32 dan 48x48.
Cara standar untuk mendefinisikan favicon Anda:
<link rel="shortcut icon" href="/favicon.ico" />
Browser akan mencari direktori root situs web favicon.ico
Anda sehingga Anda dapat menghilangkan tautannya. Beberapa browser lama akan default ke yang dideklarasikan favicon.ico
bahkan jika ada PNG berukuran lebih tepat dideklarasikan, sehingga meninggalkan ICO tidak dideklarasikan di root dan menyatakan PNG dengan ukuran berbeda mungkin merupakan ide yang baik.
favicon.png
HTML5 memperkenalkan sizes
atribut untuk membantu mendeklarasikan beberapa ikon berukuran. Menggunakan PNG tertentu memberi Anda kontrol lebih besar atas ukuran yang digunakan dan berarti hanya gambar yang benar sedang dimuat.
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
Ukuran yang Anda nyatakan tergantung pada perangkat yang ingin Anda dukung. Beberapa ukuran umum dan tidak terlalu umum:
- 32x32
- 48x48
- 64x64
- 96x96
- 128x128 ikon Toko Web Chrome
- 160x160 Chrome untuk Android
- 192x192 Chrome untuk Android
- 195x195 ikon Panggilan Cepat Opera
- 196x196 Chrome untuk Android
- Ikon 228x228 Opera Coast
Ikon Apple Touch
Ikon klip web iOS hadir dalam sejumlah ukuran untuk berbagai perangkat dan resolusi. Anda dapat menentukan satu atau beberapa ikon berukuran, jika tidak ada ikon pada ukuran yang relevan ditemukan, ikon generik tanpa ukuran yang dideklarasikan akan digunakan.
Jika tidak ada ikon yang ditentukan menggunakan elemen tautan, iOS akan mencari ikon direktori root dengan apple-touch-icon
awalan. Perangkat iOS bukan (anehnya) satu-satunya perangkat yang menggunakan ikon ini (Android Chrome, misalnya) sehingga menyatakannya adalah opsi yang lebih aman.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">
Ubin Windows
Ubin digunakan saat Anda menyematkan situs web ke layar mulai di Windows atau Windows Phone dan tersedia dalam beberapa ukuran.
<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />
Ukuran gambar yang disarankan lebih besar dari nama yang disarankan gambar tersebut. Ini adalah ukuran yang disarankan dari microsoft.com
| Minimum | Recommended
Small | 70 x 70 | 56 x 56 | 128 x 128
Medium | 150 x 150 | 120 x 120 | 270 x 270
Wide | 310 x 150 | 248 x 120 | 558 x 270
Large | 310 x 310 | 248 x 248 | 558 x 558
Warna dan judul ubin
Perilaku standar ubin adalah untuk mengambil judul ubin dari <title>
tag dan menghormati transparansi dalam gambar ubin, menunjukkan warna latar belakang. Anda dapat menyesuaikan warna dan judul menggunakan tag meta ini:
<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />
browserconfig.xml
Semua msapplication
tag meta dapat dihapus dan diganti dengan file XML di folder root yang disebut browserconfig.xml
. File XML akan terlihat seperti ini:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="images/tile-small.png"/>
<square150x150logo src="images/tile-medium.png"/>
<wide310x150logo src="images/tile-wide.png"/>
<square310x310logo src="images/tile-large.png"/>
<TileColor>#582686</TileColor>
</tile>
</msapplication>
</browserconfig>
Bacaan Lebih Lanjut & Sumber Daya