Apa itu favicon dan untuk apa?
Favicon adalah lencana (ikon) yang muncul di tab browser, bookmark, dan cuplikan hasil pencarian.
Favicon memainkan peran penting dalam aplikasi web. Ini dapat meningkatkan tampilan situs dalam hasil pencarian, meningkatkan pengenalan situs Anda, membantu pengguna dengan cepat menemukan halaman yang diinginkan di bookmark dan tab.
Selain itu, pengguna dapat menambahkan halaman situs Anda ke layar awal ponsel atau menyimpannya sebagai aplikasi web. Dalam kasus ini, dengan menggunakan favicon, Anda dapat dengan cepat menemukan situs di antara banyak aplikasi lain.
Format apa yang digunakan untuk favicon?
Sebelumnya, ICO digunakan sebagai format utama. Keunikan format ini adalah multi-dimensi. File ini dapat menyimpan beberapa ukuran ikon. ICO diganti dengan format PNG. ICO masih didukung, tetapi sebagian besar browser modern memilih format ikon PNG, yang lebih ringan. Beberapa browser tidak dapat memilih ikon yang benar di file ICO, mengakibatkan penyalahgunaan ikon resolusi rendah.
Platform apa yang akan dibahas artikel ini?
- Browser desktop klasik
- Android Chrome
- Klip Web Safari iOS
- Mac OS
- Windows
Browser desktop klasik
Mari kita mulai dengan desktop klasik.
Seperti yang disebutkan sebelumnya, format ICO sudah usang hari ini, tetapi ini tidak berarti Anda harus melupakannya. Format ICO dapat menyimpan ikon Anda dan menampilkan favicon dengan benar dalam beberapa kasus. Misalnya, sebelum IE 11, format PNG tidak didukung. Oleh karena itu, untuk IE10 dan versi yang lebih rendah, Anda perlu menggunakan format ICO lama. Dalam kasus ini, disarankan untuk menggunakan kombinasi format ICO dan PNG berikut:
<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" sizes="16x16" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" sizes="32x32" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" sizes="96x96" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" sizes="120x120" rel="icon" href="…/favicon-120x120.png">Untuk membuat ikon ICO multi ukuran, Anda dapat menggunakan layanan konverter icoconvert . Saat membuat ikon, Anda harus memilih ukuran berikut: 16x16, 32x32, 48x48 (ikon resolusi tertinggi).
Ikon PNG memiliki ukuran sebagai berikut: 16x16, 32x32, 96x96, 120x120. Mengapa ikon 120x120? Bantuan Yandex menginformasikan bahwa itu dapat menggunakan ikon sebesar ini.
Jika kita memperhatikan nilai rel (tipe sumber daya), maka ikon diperhitungkan oleh sebagian besar browser, dan ikon pintasan diperhitungkan oleh browser IE.
Android Chrome
Android mengharapkan untuk melihat ikon PNG 192x192, saluran alfa (transparansi) didorong.
<link type="image/png" sizes="192x192" rel="icon" href="…/android-icon-192x192.png">Android Chrome mengandalkan manifes aplikasi web. Situs mana pun dapat menggunakan manifes untuk ditautkan ke beberapa ikon.
File manifes itu sendiri dalam format json dan dideklarasikan dengan baris berikut:
<link rel="manifest" href="…/manifest.json">File manifes untuk Android Chrome dapat dibuat menggunakan layanan RealFaviconGenerator .
{
"name": "My Application",
"short_name": "App",
"description": "Application OK",
"lang": "ru-Ru",
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"icons": [
{
"src": "\/res\/img\/icons\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/res\/img\/icons\/android-icon -96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/res\/img\/icons\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/res\/img\/icons\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
},
{
"src": "\/res\/img\/icons\/android-icon-512x512.png",
"sizes": "512x512",
"type": "image\/png"
}
]
}Ikon harus memiliki ukuran berikut: 72x72, 96x96, 144x144, 192x192, 512x512 dalam format PNG, transparansi dianjurkan. Karena ikon dapat memiliki latar belakang transparan, warna dapat ditentukan dalam manifes menggunakan background_color .
Harus dibatalkan bahwa di ponsel pengguna memiliki opsi untuk menyimpan halaman browser ke layar beranda. Ini hanya akan menjadi tautan ke halaman di situs Anda, ikon dengan nama android-icon-192x192.png akan ditarik , yang dinyatakan dalam kode Anda.
Jika Anda menghubungkan manifes ke situs, maka saat membuka halaman, pengguna mungkin diminta untuk menyimpan situs sebagai aplikasi. Dalam hal ini, Anda dapat mendeklarasikan ikon yang sama secara visual ( android-icon-192x192.png) atau mendesain ulang ikon aplikasi agar sesuai dengan kebutuhan Anda dan mendeklarasikannya dalam manifes dengan dimensi yang sesuai.
Klip Web Safari iOS
iOS Safari mengharapkan untuk melihat ikon sentuh apel . Ini adalah ikon PNG 180x180, tanpa saluran alfa (tanpa transparansi). Sudut ikon akan secara otomatis dibulatkan, sehingga lebih mudah untuk membuat ikon sentuh apel .
Pengguna iOS juga dapat menambahkan situs ke layar beranda dan itu akan terlihat seperti aplikasi. Tautan seperti itu ditampilkan sebagai ikon dan disebut Klip Web.
Ukuran ikon berikut dirancang untuk mendukung berbagai perangkat, seperti iPhone dan iPad:
<link sizes="57x57" rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link sizes="60x60" rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link sizes="72x72" rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link sizes="76x76" rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link sizes="114x114" rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link sizes="120x120" rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link sizes="144x144" rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link sizes="152x152" rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link sizes="180x180" rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">Di kode, tambahkan atribut rel = "apple-touch-icon" dan tentukan ukuran menggunakan ukuran.
Jika situs tidak memiliki ikon dengan ukuran yang direkomendasikan untuk perangkat, maka ikon terdekat yang lebih besar akan digunakan. Ikon sentuh apel utama adalah ikon 180x180. Perangkat lain dapat mencampur ikon.
Jangan lupa tentang padding saat membuat ikon. Setidaknya harus berukuran 4px di semua sisi. Ini untuk mencegah ikon Anda terpotong, karena ikon aplikasi iOS memiliki sudut membulat.
Perlu dicatat bahwa perangkat iOS bukan satu-satunya yang mencari ikon sentuh apel... Beberapa browser, seperti Android Chrome, mungkin menggunakan ikon sentuh apel, karena lebih umum daripada ikon PNG resolusi tinggi lainnya.
Mac OS
Di Mac OS, semuanya sangat berbeda. Jika pengguna mencoba untuk menyimpan situs ke desktop, screenshot halaman dengan kode html akan ditampilkan sebagai ganti ikon situs.
Untuk menambahkan ikon, Anda perlu menggunakan format SVG, yang memungkinkan Anda membuat topeng ikon. Ikon ini akan ditampilkan saat Anda menyematkan tab di Safari.
<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">Anda perlu menambahkan atribut rel = "mask-icon" di kode Anda . Ikon SVG itu sendiri harus berwarna hitam. Warna ikon disetel dalam atribut color = "# e52037" .
Ikon SVG digunakan di tab yang disematkan (tanpa fokus) dalam monokrom. Saat mengarahkan kursor (tab tersemat - fokus), ikon akan dicat dengan warna yang memiliki atribut " warna ". Warna atribut " color " juga diteruskan ke panel sentuh .
Saat membuat ikon, Anda perlu menghapus semua bayangan yang ada, membuatnya datar dan sederhana. Anda dapat menyederhanakan ikon menjadi satu objek menggunakan operasi "Union" dan "Flatten". Operasi ini mudah diterapkan di Figma.
Jika Anda menutup mata untuk membuat ikon topeng, browser hanya akan menampilkan huruf pertama dari domain situs Anda.
Windows
Dengan Windows, dibutuhkan sedikit mengutak-atik untuk melakukannya dengan baik.
Untuk IE10 dan versi yang lebih rendah, format ICO harus digunakan karena PNG tidak didukung sebelum IE11.
Dengan munculnya IE11 dan Windows 8.1, menjadi mungkin untuk menyematkan situs sebagai ubin langsung. Untuk ubin kecil, favicon default digunakan, tetapi untuk ubin besar dan lebar, Anda perlu menyetel gambar dengan ukuran tertentu. Ini dapat dilakukan dengan menambahkan tag metadata ke markup situs atau dengan membuat browserconfig.xml (file konfigurasi browser).
Contoh menambahkan tag metadata ke markup situs web untuk ubin besar:
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">Dengan baris ini, kami menentukan warna latar belakang ubin:
<meta name="msapplication-TileColor" content="#2b5797">Anda dapat menentukan nama situs web Anda:
<meta name="application-name" content="My Application">Apa itu browserconfig ? Ini adalah dokumen XML yang mencantumkan berbagai ikon yang sesuai dengan Metro UI.
Untuk menyertakan file browserconfig di markup, tambahkan baris berikut ke head :
<meta name="msapplication-config" content="…/browserconfig.xml">File itu sendiri akan terlihat seperti ini:
<?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>#ffc40d</TileColor>
</tile>
</msapplication>
</browserconfig>File browserconfig mendefinisikan gambar untuk ukuran ubin yang berbeda.
Microsoft merekomendasikan menggunakan ukuran gambar yang lebih besar untuk mendukung layar dengan kepadatan piksel tinggi.
Daftar berikut memberikan beberapa pedoman untuk menggunakan ukuran yang berbeda:
- Kecil - 70x70 (Ukuran yang disarankan: 128x128)
- Sedang - 150x150 (Ukuran yang disarankan: 270x270)
- Lebar - 310x150 (Ukuran yang disarankan: 558x270)
- Besar - 310x310 (Ukuran yang disarankan: 558x558)
Misalnya, untuk gambar 70x70, ukuran yang disarankan adalah 128x128. Ini berarti Anda perlu membuat gambar 128x128 dengan latar belakang transparan, yang namanya mstile-70x70 . Lakukan hal yang sama dengan dimensi lainnya.
Mempersiapkan favicon
Sebelum menambahkan ikon Anda ke folder root situs, Anda perlu mempersiapkannya. Ukuran asli ikon tidak terlalu besar, tetapi dapat dikompresi dengan penurunan kualitas paling sedikit.
Misalnya, dalam kasus saya, berat semua gambar adalah 200kb, setelah kompresi adalah 50kb. Kualitas gambarnya hampir tidak berubah. Anda dapat menggunakan layanan kompresi gambar yang nyaman. Saya menggunakan iloveimg .
Kesimpulan
Urutan koneksi dalam markup situs web:
<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" sizes="16x16" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" sizes="32x32" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" sizes="96x96" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" sizes="120x120" rel="icon" href="…/favicon-120x120.png">
<link type="image/png" sizes="192x192" rel="icon" href="…/android-icon-192x192.png">
<link sizes="57x57" rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link sizes="60x60" rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link sizes="72x72" rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link sizes="76x76" rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link sizes="114x114" rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link sizes="120x120" rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link sizes="144x144" rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link sizes="152x152" rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link sizes="180x180" rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">
<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">
<meta name="application-name" content="My Application">
<meta name="msapplication-config" content="…/browserconfig.xml">
<link rel="manifest" href="…/manifest.json">
<meta name="theme-color" content="#ffffff">Dengan baris terakhir kode " theme-color ", Anda dapat mengecat bilah alamat dan bilah notifikasi dengan warna apa pun. Nilai konten menentukan warna.
Gunakan RealFaviconGenerator untuk memeriksa ikon situs web Anda . Layanan ini akan menunjukkan kepada Anda bagaimana ikon Anda ditampilkan pada platform yang berbeda, memberi tahu Anda di mana dan masalah apa yang mungkin ada.
Selain itu, layanan ini dapat menghasilkan ukuran, format ikon, dan kode yang diperlukan. Tetapi sumber harus memeriksa keberadaan semua ukuran yang direkomendasikan untuk tampilan yang benar di berbagai perangkat.