Apa praktik terbaik untuk membuat favicon di situs web?

103

Pertanyaan

  • Apa praktik terbaik untuk membuat favicon di situs web?
  • dan apakah file .ico dengan gambar 16x16 dan 32x32 lebih baik daripada file .png dengan ukuran 16x16 saja?
  • Mungkinkah metode yang tepat yang disukai saat ini tidak berfungsi di browser yang cukup lama?

Metode 1

Menempatkan file dengan nama favicon.icodi direktori utama adalah salah satu cara. Browser selalu meminta file itu. Anda dapat melihatnya di file log apache.

Metode 2

Tag HTML di <head>bagian:

<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />
html favicon bytecode77
sumber

Jawaban:

154

Ada beberapa cara untuk membuat favicon. Cara terbaik untuk Anda bergantung pada berbagai faktor:

  • Waktu yang bisa Anda habiskan untuk tugas ini. Bagi banyak orang, ini "secepat mungkin".
  • Upaya yang ingin Anda lakukan. Seperti, menggambar ikon 16x16 dengan tangan untuk hasil yang lebih baik.
  • Batasan khusus, seperti mendukung browser tertentu dengan spesifikasi aneh.

Metode pertama: Gunakan generator favicon

Jika Anda ingin menyelesaikan pekerjaan dengan baik dan cepat, Anda dapat menggunakan generator favicon . Yang satu ini membuat gambar dan kode HTML untuk semua browser desktop dan seluler utama. Pengungkapan penuh: Saya adalah penulis situs ini.

Keuntungan dari solusi tersebut: cepat dan semua pertimbangan kompatibilitas sudah ditujukan untuk Anda.

Metode kedua: Buat favicon.ico (khusus browser desktop)

Seperti yang Anda sarankan, Anda dapat membuat favicon.icofile yang berisi gambar 16x16 dan 32x32 (perhatikan bahwa Microsoft merekomendasikan 16x16, 32x32 dan 48x48 ).

Kemudian, nyatakan dalam kode HTML Anda:

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">

Metode ini akan bekerja dengan semua browser desktop, lama dan baru. Tetapi sebagian besar browser seluler akan mengabaikan favicon.

Tentang saran Anda untuk menempatkan favicon.icofile di root dan tidak mendeklarasikannya: berhati-hatilah, meskipun teknik ini berfungsi di sebagian besar browser, tidak 100% dapat diandalkan. Misalnya Windows Safari tidak dapat menemukannya (diberikan: browser ini entah bagaimana sudah usang di Windows, tetapi Anda mengerti maksudnya). Teknik ini berguna jika dikombinasikan dengan ikon PNG (untuk browser modern).

Metode ketiga: Buat favicon.ico, ikon PNG dan ikon Apple Touch (semua browser)

Dalam pertanyaan Anda, Anda tidak menyebutkan browser seluler. Kebanyakan dari mereka akan mengabaikan favicon.icofile tersebut. Meskipun situs Anda mungkin didedikasikan untuk browser desktop, kemungkinan besar Anda tidak ingin mengabaikan browser seluler sama sekali.

Anda dapat mencapai kompatibilitas yang baik dengan:

  • favicon.ico, Lihat di atas.
  • Ikon PNG 192x192 untuk Android Chrome
  • Ikon Apple Touch 180x180 (untuk iPhone 6 Plus; perangkat lain akan memperkecil ukurannya sesuai kebutuhan).

Deklarasikan mereka dengan 

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">

Ini bukan cerita lengkapnya, tapi cukup bagus dalam banyak kasus.

philippe_b
sumber
9
Sebenarnya, <link rel = "shortcut icon" href = "/ path / to / icons / favicon.ico"> yang masih sering digunakan bukanlah pilihan yang valid. Ini bahkan tidak standar dan hanya IE yang mendukungnya. Dan pada IE 9, IE mendukung metode 'look at root' default. Jadi ini bukan cara untuk mendukung semua browser, tetapi hanya cara untuk mendukung IE <9. Mengandalkan metode 'tempat di root' (sekarang standar) atau, jika Anda bersikeras, tambahkan: <link rel = "icon" href = "/ favicon.ico"> (Meskipun ini juga bukan standar)
HappyMe
7
Mekanisme favicon pasti telah berkembang selama bertahun-tahun. Saya perhatikan hari ini spesifikasi di MDN sekarang mengatakan: Jenis tautan pintas sering terlihat sebelum ikon, tetapi jenis tautan ini tidak sesuai, diabaikan dan penulis web tidak boleh menggunakannya lagi. Artinya gunakan <link ref="icon" ...>daripada <link ref="shortcut icon" ...> developer.mozilla.org/en-US/docs/Web/HTML/Link_types
broc.seib
1
Terima kasih @ broc.seib atas tanggapannya. Pada saat menulis komentar ini, saya lupa mengapa itu adalah "ikon pintasan" dan bukan "ikon". Tentu, Mozilla punya suaranya dalam cerita ini. Tetapi kita tidak boleh lupa mengapa deklarasi ini ada di tempat pertama: untuk mendukung browser lama, seperti IE 8. Browser terbaru menggunakan ikon PNG, yang lebih bersih dan lebih ringan daripada ICO. Rencana saya untuk RealFavicon adalah menghapus pernyataan ini sepenuhnya. Sebelum ini, saya perlu menjalankan tes pada IE 7, 8 dan 9.
philippe_b
Belum lagi, jika Anda "melihat sumber" di halaman ini, di Stack Overflow, ref="shortcut icon"itulah yang mereka gunakan.
Steven Ventimiglia
1
@laggingreflex /favicon.icoadalah metode yang disukai. Inilah yang Anda dapatkan saat berkunjung www.google.com. Namun, Anda mungkin tidak ingin mencemari direktori root Anda dengan sebuah ikon. Dalam hal ini, markup berfungsi dengan baik.
philippe_b
2
  1. Anda dapat bekerja dengan situs web ini untuk menghasilkan favin.ico
  2. Saya merekomendasikan penggunaan format .ico karena png tidak berfungsi dengan metode 1 dan ico bisa memiliki lebih banyak detail!
  3. kedua metode bekerja dengan semua browser tetapi ketika bekerja secara otomatis, apa yang Anda ingin ketik kode untuk itu? jadi saya pikir metode 1 lebih baik.
a828h
sumber
2

Saya menggunakan https://iconifier.net Saya mengunggah gambar saya, mengunduh file zip gambar, menambahkan gambar ke server saya, mengikuti petunjuk di situs termasuk menambahkan tautan ke index.html saya dan itu berhasil. Favicon saya sekarang muncul di iPhone saya di Safari ketika 'Tambahkan ke layar beranda'

Hblegg
sumber