Bukankah konyol bahwa favicon kecil memerlukan lagi permintaan HTTP? Bagaimana saya bisa meletakkan favicon ke dalam sprite?

306

Semua orang tahu cara mengatur tautan favicon.ico dalam HTML:

<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon">

Tapi saya pikir itu konyol bahwa untuk ikon beberapa byte kecil Anda memerlukan permintaan HTTP lain . Jadi saya bertanya-tanya, bagaimana saya bisa membuat gambar itu bagian dari sprite (misalnya background-position=0px -200px;) untuk mempercepat dan menyimpan permintaan HTTP yang berharga. Bagaimana saya bisa menjadikan ini gambar sprite yang ada dengan logo saya dan karya seni lainnya?

Robot yang menunjuk ke favicon.ico, item nomor 31 pada grafik air terjun, adalah hewan peliharaan saya ZAM. Dia biasanya lebih bahagia dan dia punya poin bagus untuk memberi tahu saya sudah waktunya untuk beberapa peningkatan kreatif di web, meskipun dia dan saya tidak setuju dengan pakaiannya, yang saya pikir agak konyol hari ini ...

masukkan deskripsi gambar di sini

javascript html css performance favicon Sam
sumber
47
Bukankah konyol bahwa belum ada cara untuk menggabungkan .css / .js / .png / .html menjadi satu aliran tunggal yang dioptimalkan? Anda akan berpikir seseorang akan datang dengan ide ini sekarang
RichardTheKiwi
9
@Richard related: Respons multi-bagian dan Google memiliki inisiatif untuk protokol web baru yang dioptimalkan yang menyelesaikan ini, saya lupa namanya ... Edit : Itu bernama SPDY . Tapi itu jauh di masa depan, jelas.
Pekka
9
@ Richard alias cyberkiwi, Anda dapat meletakkan semuanya dalam file html dengan data:nilai untuk gambar, dan skrip sebaris.
zzzzBov
39
btw, pria sketsa yang bagus :)
Fatih Acet
18
+1 untuk sketsa :)
Giuliano

Jawaban:

140

Perbaikan kecil untuk jawaban @ yc adalah menyuntikkan favicon yang di-encode base64 dari file JavaScript yang biasanya akan digunakan dan di-cache, dan juga menekan perilaku browser standar meminta favicon.icodengan memasukkan URI data dalam metatag yang relevan .

Teknik ini menghindari permintaan http tambahan dan dikonfirmasi untuk berfungsi di versi terbaru dari Chrome, Firefox dan Opera di Windows 7. Namun tampaknya tidak berfungsi setidaknya di Internet Explorer 9.

index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- Suppress browser request for favicon.ico -->
        <link rel="shortcut icon"type="image/x-icon" href="data:image/x-icon;,">
        <script src="script.js"></script>
...

script.js

var favIcon = "\
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABrUlEQVR42mNkwAOepOgxMTD9mwhk\
[...truncated for brevity...]
IALgNIBUQBUDAFi2whGNUZ3eAAAAAElFTkSuQmCC";

var docHead = document.getElementsByTagName('head')[0];       
var newLink = document.createElement('link');
newLink.rel = 'shortcut icon';
newLink.href = 'data:image/png;base64,'+favIcon;
docHead.appendChild(newLink);

/* Other JS would normally be in here too. */

Demo: turi.co/up/favicon.html

Marcel
sumber
3
+1 terobosan cache indah @Marcel. PS Karakter dalam HTTP Headers Responsefile .ico saya hampir sama dengan ukuran ikon saya !! bagaimana kamu suka itu?
Sam
2
@ Sam: Saya perhatikan base64 dari PNG setara dengan file favicon.ico Stack Overflow adalah setengah ukuran. Bagus dan ringkas.
Marcel
1
eeehm saya tidak yakin apakah saya mengerti apa yang Anda maksud: 'file itu setengah dari ukuran ...? File PNG seperti icon.png? atau maksud Anda setara base64 itu lebih kecil ketika png diformat sebagai ganti ikon diformat atau gif? ingin tahu. Salut kawan!
Sam
1
@ Sam: Saya membandingkan base64 dari PNG ini dengan base64 dari file ICO ini . Versi PNG, seperti yang digunakan dalam contoh kode saya di atas, setengah ukurannya.
Marcel
1
ooh saya mengerti, itu membuat base 64 Anda menjawab, dan penggunaan umum format base64 PNG menjadi pilihan yang disukai, kan?
Sam
149

Saya pikir sebagian besar tidak menghasilkan permintaan HTTP lain karena ini biasanya dibuang di cache browser setelah akses pertama.

Ini sebenarnya lebih efisien daripada "solusi" yang diajukan.

James Anderson
sumber
53
Ini adalah satu-satunya jawaban yang masuk akal. Ini bukan masalah yang tidak perlu diperbaiki.
JoDG
1
James, solusi saya benar-benar hanya sebuah kemungkinan, tetapi solusi yang saya tidak akan pernah merekomendasikan kepada seseorang. Tapi, tampaknya sebagian besar browser akan mengeluarkan permintaan HTTP baru untuk favicon di awal sesi browser baru. Dan, itu tidak selalu menghasilkan angka 304.
Yahel
4
Peramban masih akan membuat panggilan KEPALA meskipun dalam cache browser sehingga Anda masih memiliki overhead permintaan HTTP.
dietbuddha
3
Sebenarnya semuanya tergantung pada browser. Sebagian besar dari mereka akan selalu mencari favicon di beberapa lokasi bahkan jika halaman tidak menyebutkannya dan membuat panggilan HEAD untuk setiap penyegaran.
David Costa
14
Favicon membutuhkan tajuk kedaluwarsa yang panjang seperti sumber daya statis yang baik. Dengan itu, bahkan panggilan KEPALA ditekan.
Paul Alexander
102

Anda dapat mencoba URI data. Tidak ada permintaan HTTP!

<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;base64,....==">

Kecuali jika halaman Anda memiliki caching statis, favicon Anda tidak akan bisa di-cache, dan tergantung pada ukuran gambar favicon Anda, kode sumber Anda bisa menjadi bengkak sebagai hasilnya.

Data URI favicons tampaknya berfungsi di sebagian besar browser modern; Saya memilikinya bekerja di versi terbaru dari Chrome, Firefox dan Safari di Mac. Tampaknya tidak berfungsi di Internet Explorer, dan mungkin beberapa versi Opera.

Jika Anda khawatir tentang IE Lama (dan Anda mungkin tidak boleh hari ini), Anda dapat menyertakan komentar bersyarat IE yang akan memuat favicon.ico yang sebenarnya dengan cara tradisional, karena tampaknya Internet Explorer yang lebih lama tidak mendukung Data URI Favicons

`<!--[if IE ]><link rel="shortcut icon" href="http://example.com/favicon.ico"  type="image/x-icon" /><![endif]--> `
  1. Sertakan file favicon.ico di direktori root Anda untuk menutupi browser yang akan memintanya, karena untuk browser tersebut, jika mereka sudah memeriksa apa pun yang Anda lakukan, Anda mungkin juga tidak membuang permintaan HTTP dengan respons 404 .

Anda juga bisa menggunakan favicon dari situs populer lain yang kemungkinan memiliki favicon di-cache, seperti http://google.com/favicon.ico, sehingga disajikan dari cache.

Seperti yang ditunjukkan oleh komentator, hanya karena Anda dapat melakukan ini tidak berarti Anda harus melakukannya, karena beberapa browser akan meminta favicon.ico terlepas dari trik yang kami buat. Jumlah overhead yang Anda hemat dengan melakukan hal ini akan sangat kecil dibandingkan dengan penghematan yang Anda dapatkan dari melakukan hal-hal seperti gzipping, menggunakan tajuk kedaluwarsa yang jauh kedaluwarsa untuk konten statis, mengecilkan file JavaScript, menempatkan gambar latar belakang ke dalam sprite atau data URI , menyajikan file statis dari CDN, dll.

Yahel
sumber
1
@ Pekka ya, itu bukan solusi yang praktis, karena data URI byte-weight ekstra pada halaman yang tidak di-cache mungkin akan lebih berat daripada berat permintaan HTTP itu. Mungkin OP dapat menyuntikkan favicon ke DOM secara tidak sinkron.
Yahel
4
@ Sam Maaf, saya mengerti apa artinya @yc sekarang, kesalahan saya. Tentu saja Anda dapat dengan sempurna mengakses <link rel>elemen di browser melalui JavaScript, itu harus dimungkinkan. Saya bahkan telah melihat permainan yang diprogram seperti itu ... namun tampaknya juga tidak berfungsi di IE, dan mungkin tidak akan mencegah /favicon.icopermintaan pencarian standar
Pekka
2
@ Pekka, saya mengerti. PS itu gim yang tidak bisa dimainkan! Membuat seluruh layar saya realestate menjadi malu, karena yang Anda butuhkan hanyalah 16x16 piksel haha. Hyperlink ini membuka beberapa kemungkinan untuk apa sebenarnya mungkin dengan favicon itu.
Sam
3
Jika ada deklarasi favicon yang hilang, semua browser akan secara otomatis meminta URL default /favicon.icodalam upaya buta untuk menemukannya. Jadi, jika Anda meninggalkan favicon <link>(untuk menambahkannya nanti melalui Javascript), Anda cenderung memperburuk keadaan.
Már Örlygsson
2
Cukup gunakan favicon.ico untuk menyimpan transparant gif Anda :)
markijbema
21

Anda dapat menggunakan favicon yang disandikan base64, seperti:

<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAACbUlEQVRIx7WUsU/qUBTGv96WSlWeEBZijJggxrREdwYixMnByYEyOvgfsBAMG0xuDsZ/QGc3NDFhgTioiYsmkhBYGLSBkLYR0va8gSjvQXiIT7/l5ibfOd/v3pN7gSmVSMTj8ThRfzdYk8lkMpl83/+AVFVVVXU0eHiVJEmSpB8DIcpkMplsdhCYz+fzhQJROBwOh8PDQN+oQCAQCASIRFEURZHI45GkP0/e7Xa73e70AMJnjel0Op1OA6oaDB4eAkAw6PcDvZ5t6zrw/Hx2trAw/cHYZ426ruu6DtzcGEYuBzQa19etFvD4WKtls4AoRqMPDwBjjLGPrt84ilgsFovF6EOapmmaRiP6O/jbAIguL4vFYpHGqlKpVCoVomq1Wq1Wibxer9fn+w+Q9+cUiUQikQhNrfdgWZZlWf4yyGhj27Zt254MUK/X6/X6F0aiKIqiKIOCYRmGYRjGZADLsizLIgqFQqHV1SkAnp5OTn79ItK0qyuPZ7SxaZqmaU4GKJfPzxmbfAPc/f3pqaIQLS8vLtZqgOP0bYyJoiAARC5Xrwf4/Vtbb2+Th1YqlUqlErC01GgkEkCz2WxyHLC+LsuiCAiCJLlcgM+3vd3pcBzXaJTLR0dEs7Ptdv+D4TiOG/A6DsBxQKvV621sAGtru7vl8ngAjuvXv7xcXIgiwNjMjCj2h+k4fQfPA4LA8xwHCO323V2hABiG223bwPy8xwMAbvfcHGMAY32j47y+3t4OAsZpZ2dzEwAsy7IcBxAExhwHMIxOx3GAlZVUyjT/1WFIudzenstFlEpFo9M8o+Pj/X2eJzo4SCR4fnzdb2N4Pyv9cduVAAAAAElFTkSuQmCC" rel="icon" type="image/x-icon" />
Dongsheng Cai
sumber
1
Petunjuk: string yang disandikan base64 yang digunakan dalam jawaban ini adalah file PNG dan tidak akan berfungsi dengan IE10 atau lebih lama.
sibbl
2
Jika ada yang ingin tahu, itu penguin linux.
Martlark
17

Saya menemukan solusi yang menarik di halaman ini . Ini adalah bahasa Jerman tetapi Anda akan dapat memahami kode tersebut.

Anda memasukkan data base64 ikon ke lembar gaya eksternal, sehingga akan di-cache. Di kepala situs web Anda, Anda harus mendefinisikan favicon dengan id dan favicon ditetapkan sebagai background-imagedalam stylesheet untuk id itu.

link#icon {
    background-image:url("data:image/x-icon;base64,<base64_image_data>");
}

dan html

<html>
    <head>
        <link id="icon" rel="shortcut icon" type="image/x-icon" />
        <link rel="stylesheet" type="text/css" href="/styles.css" />
        ...
    </head>
    <body>
        ...
    </body>
</html>
Felix Geenen
sumber
8
Satu orang dengan reputasi 74.947 mengatakan di suatu tempat di halaman ini: "Anda tidak bisa!" ... Lalu orang lain dengan reputasi kurang dari 50 berkata: "Kamu bisa!" Apakah ini berarti bahwa dorongan untuk solusi dan dorongan inovatif yang konkret tidak memiliki tautan atau hubungan dengan reputasi yang diperoleh? ... Baiklah itu luar biasa!
Sam
4
Saya baru saja mengkonfirmasi bahwa solusi ini tidak berfungsi - setidaknya tidak di Chrome 10 dan Firefox 3.6 di Windows
Már Örlygsson
13
Saya baru saja mengkonfirmasi bahwa solusi ini berfungsi - setidaknya di Chrome 10.0.648 pada W7 64 bit dan di FF 4.0 pada W7 64bit
Sam
4
LOL, saya sudah mengkonfirmasi dua pernyataan di atas tampak bertentangan, meskipun nomor versi yang sedikit berbeda saya ragu perilaku Chrome berubah banyak. Firefox mungkin melakukannya dari 3,6 ke 4, tetapi tidak mungkin Chrome 10 berubah banyak pada pembaruan kecil.
dyasta
Saya dapat mengonfirmasi bahwa ini berfungsi pada Chrome 83 dan Firefox ESR 68 di Ubuntu 20.04, dan saya dapat mengonfirmasi bahwa itu tidak berfungsi untuk mencegah hit di /favicon.ico. Jadi Anda mendapatkan gambar tetapi Anda tidak mencegah koneksi SSL tambahan. Karena itulah tujuannya, ini adalah kegagalan.
Wil
14

Poin bagus dan ide bagus, tapi tidak mungkin. Favicon perlu menjadi sumber daya tunggal yang terpisah. Tidak ada cara untuk menggabungkannya dengan file gambar lain.

Pekka
sumber
1
Mungkin saya buta, tetapi satu-satunya tempat saya melihat Google Search favicon adalah dalam sprite: google.com/search?q=foo
Yahel
4
@yc google.com/favicon.ico adalah tempat di mana browser akan mencarinya secara otomatis
Pekka
3
@yc Anda tidak buta, Anda membuktikan diri Anda layak untuk jawaban yang sangat kreatif di sana ... seperti yang Pekka tunjukkan di /favicon.icosinilah browser akan otomatis terlihat. Sekarang datang berita buruk yang nyata: Jika favicon NON ada, itu berarti kesalahan 404 penalti yang akan menyebabkan sedikit penundaan juga !! Sepertinya tidak ada yang melarikan diri dari penjara bawah tanah favicon ini. Mereka sangat kecil tapi oh sangat perkasa ... sialan :)
Sam
Lihat jawaban saya stackoverflow.com/questions/5199902/… untuk cara yang tepat untuk mempercepat cara yang tepat.
Matt Joiner
8
Perlu dicatat bahwa ini harus, secara realistis, menjadi permintaan satu kali, cukup lama. Seperti yang lainnya, penghitung waktu cache yang lama dan 301 yang dikembalikan oleh server akan membuat favicon meminta titik diperdebatkan (kecuali jika tidak ada - ya!).
Kevin Peno
9

Apakah itu penting?

Banyak browser memuat favicon sebagai prioritas rendah sehingga tidak memblokir memuat halaman, jadi ya itu permintaan tambahan tetapi tidak di jalur kritis apa pun.

Solusi yang diterima mengerikan karena sampai JS telah diambil dan dieksekusi semua elemen DOM di bawah ini akan diblokir dari rendering dan tidak mengurangi jumlah permintaan!

Andy Davies
sumber
8

Solusi yang tepat adalah dengan menggunakan pipelining HTTP .

Pipelining HTTP adalah teknik di mana beberapa permintaan HTTP ditulis ke soket tunggal tanpa menunggu tanggapan yang sesuai. Pipelining hanya didukung di HTTP / 1.1, bukan di 1.0.

Diperlukan server mendukungnya, tetapi tidak harus berpartipasi.

Perpipaan HTTP membutuhkan klien dan server untuk mendukungnya. Diperlukan HTTP / 1.1 conforming server untuk mendukung pipelining. Ini tidak berarti bahwa server diharuskan untuk menanggapi pipeline, tetapi mereka diharuskan untuk tidak gagal jika klien memilih untuk permintaan pipeline.

Banyak klien browser yang tidak melakukannya, padahal seharusnya.

Pipelining HTTP dinonaktifkan di sebagian besar browser.

  • Opera telah mengaktifkan pipelining secara default. Ia menggunakan heuristik untuk mengontrol tingkat pemipaan yang digunakan tergantung pada server yang terhubung.
  • Internet Explorer 8 tidak menyalurkan permintaan, karena kekhawatiran mengenai proxy kereta dan pemblokiran head-of-line.
  • Browser Mozilla (seperti Mozilla Firefox, SeaMonkey dan Camino), mendukung pipelining namun dinonaktifkan secara default. Ia menggunakan beberapa heuristik, terutama untuk mematikan pipelining untuk server IIS.
  • Konqueror 2.0 mendukung pipelining, tetapi dinonaktifkan secara default. [Rujukan?]
  • Google Chrome tidak mendukung perpipaan.

Saya akan merekomendasikan Anda mencoba mengaktifkan pipelining di Firefox dan mencobanya di sana, atau cukup gunakan Opera (ngeri).

Matt Joiner
sumber
7
Pipelining optimasi yang dilakukan di layer transport. Itu masih melibatkan HTTP round-trip terpisah untuk favicon, yang merupakan pertanyaan yang ditanyakan.
Már Örlygsson
@ Már Örlygsson itu tidak benar. Perjalanan pulang pergi berarti bahwa klien harus mengajukan permintaan dan kemudian menunggu permintaan untuk diproses dan jawaban untuk didowload. Pipelining berarti bahwa permintaan sudah akan dikirim sambil masih menunggu permintaan sebelumnya selesai, jadi sementara langkah yang sama terjadi, penundaan yang ditimbulkannya tidak akan sama ...
Peter
1
Sam tidak dapat mengaktifkan pipelining di semua browser pengunjungnya, jadi dalam hal ini solusi ini tidak akan membuat situsnya memuat lebih cepat - kecuali dia secara pribadi.
Már Örlygsson
3
@Már Örlygsson dan para pendukungnya: Ini tidak dilakukan di lapisan tranport. Dalam model dunia nyata ini semua dilakukan di lapisan aplikasi. Secara teoritis pipelining harus pada lapisan sesi.
Matt Joiner
4
Saya tidak akan berdebat semantik dengan Anda. Faktanya masih menyatakan bahwa Sam tidak dapat "menggunakan pipeline" (rapi seperti itu) untuk membuat situsnya memuat lebih cepat bagi pengunjungnya, karena dukungan piplining adalah A) jerawatan saat Anda menunjukkan diri Anda, dan B) memilih oleh masing-masing pengguna individu.
Már Örlygsson
6

Bukan benar-benar jawaban untuk pertanyaan itu tetapi hanya untuk memuji jawaban yang diberikan oleh Marcel dan yahelc saya menawarkan solusi yang elegan untuk masalah 404 favicon.

Karena beberapa aplikasi dan browser dan yang lainnya memeriksa favicon.com dan jika ikon tidak ditemukan di root situs Anda dapat dengan mudah menanggapi permintaan dengan header respons 204 .

Contoh Apache:

Opsi Apache satu (dan favorit saya), satu liner sederhana di .htacces atau .conf Anda:

Redirect 204 /favicon.ico

Opsi Apache dua:

<Files "favicon.ico">
    ErrorDocument 204 ""
</Files>

Untuk bacaan lebih lanjut, ada posting blog yang bagus oleh Stoyan Stefanov di http://www.phpied.com/204-no-content/

Anthony Hatzopoulos
sumber
Ya tetapi karena permintaan sedang dibuat dan favicon sering digunakan dengan cara yang berarti saya rasa itu lebih baik memberikan ikon daripada respon kosong. Mengompresi ikon melalui gzip sering akan membuatnya ke ukuran paket TCP tunggal
Andy Davies
5

Maaf, tetapi Anda tidak dapat menggabungkan favicon dengan sumber lain.

Ini berarti pada dasarnya Anda memiliki dua opsi:

  1. Jika Anda merasa nyaman dengan situs Anda yang tidak memiliki favicon - Anda bisa langsung hrefmenunjuk ke sumber daya non-ikon yang sudah dimuat (mis., Style sheet, file skrip, atau bahkan beberapa sumber daya yang diuntungkan dari pre-fetched) .)
    (Pengujian singkat saya menunjukkan bahwa ini berfungsi di sebagian besar, jika tidak semua, browser utama.)

  2. Terima permintaan HTTP tambahan dan pastikan file favicon Anda memiliki header kontrol cache HTTP yang agresif.
    (Jika Anda memiliki situs web lain di bawah kendali Anda, Anda bahkan dapat membuatnya secara pramuat memuat favicon untuk situs web ini - bersama dengan sumber daya statis lainnya.)

Solusi kreatif PS yang tidak akan berfungsi :

  • Trik data-uri CSS yang aneh (ditautkan oleh komentator Felix Geenen) tidak berfungsi .
  • Menggunakan Javascript untuk melakukan injeksi <link>elemen favicon yang tertunda (seperti yang disarankan oleh pengguna @yc) kemungkinan akan memperburuk keadaan - dengan menghasilkan dua permintaan HTTP.
Már Örlygsson
sumber
1
solusi lain yang tidak akan berfungsi: beberapa ikon dalam .ico, dan menggunakan ico dalam tag gambar dengan harapan akan menampilkan gambar lain di sana, selain sebagai favicon. Catting bersama favicon dengan file lain.
markijbema
5

Itu ide yang bagus, tetapi jika Google belum melakukannya di beranda mereka, saya bertaruh itu tidak bisa (saat ini) dilakukan.

cusimar9
sumber
13
Google memang hebat, tetapi berpikir seperti itu tampaknya kontraproduktif dan menyesakkan. Selalu ada cara baru, lebih baik, dan sangat mungkin dalam melakukan sesuatu, dan Anda tidak harus bekerja untuk pemimpin industri untuk datang dengan mereka.
Sintaks Kesalahan
10
Jelas, Google mendapatkan ide-ide mereka dari SO, bukan sebaliknya;)
user123444555621
3
Jawaban bagus, jika google dapat membuat halaman mereka lebih cepat, mereka akan melakukannya.
David d C e Freitas
3

Anda dapat menggunakan PNG 8-bit sebagai ganti format ICO untuk jejak data yang lebih kecil. Satu-satunya hal yang harus Anda ubah adalah menggunakan "data: image / png" alih-alih "data: image / x-icon" header tipe MIME:

<link
  href="data:image/png;base64,your-base64-encoded-string-goes-here"
  rel="icon" type="image/png"
/>

"type" atribut dapat "image / png" atau "image / x-icon", keduanya bekerja untuk saya.

Anda dapat mengonversi ICO ke png 8-bit menggunakan gimp atau mengonversi:

convert favicon.ico -depth 8 -strip favicon.png

dan menyandikan PNG biner ke string base64 menggunakan perintah base64:

base64 favicon.png
andrej
sumber
2

Inilah cara termudah:

<!DOCTYPE html><html><head> 
<link rel="shortcut icon" href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAA
lwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4
OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3
JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9y
Zy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdG
lvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25z
LmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj
4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAg
PC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAABLJJREFUWAnFV+trW2UY/yVN0j
S32q6bnWunQ1e11k3YXMUy8AbDoSBDv4mfFPTj/gD9ug/7B/woqCCISnGItcyppbgN
Rhn2st5G2yxt1svSJe1yPYnP703fcs7JSZo4YS9Ncs57eX6/5/Y+T12fX7hYdAHy92
iG+1GCU2X3/6V3k9sNl8uFUqnUkMiHJkDfuQV4M7WFbC4Hr8fTEAlPQ3RtmwleFI0z
mQxO95/EQP8pLEaj+PaHQbS3RmAUi7YTla8PRYDGLhgGPnz/HI719Srp0VgMhszRHf
WM/+wC+jy1tY2zb72uwOl7WmPi1gwCfr887609CdZtAfpZa0XNc/k8nug8gBPHjylF
uTY7N4/JmVmEQkFlBbWwx9eeBNyiKbVLZ7IKlEAtomEmm0Vvz1G0tLQoiKXoHXzz/Y
9qX75QgM/jhb/ZB5KtlRk1CdDM2+k0SKLn6SM4KBoXRHhsOY6J2XmsbWxgdv42Jqdn
cH3sJo4c7sKhg50oFku4s7yMuYUleJqahEizzDm7pCoBgt8XH7/Q8wzOvPmamLtz1w
UMvPjdu1hYjIrPp9He9hjOf/oJ9rW37e5hBiwuRXFpaBjR5RWEgkFHEq4vLlysuDkI
nhTwV068hPfeOau0oJ21KXUsKNvbvux7suKq734axNT0nLhOLCHuNI8KC1B4Wg7RnO
++fUaB03x0gxlYA1EYZcoxta73cJ3PD8SFuWxOnbdCl2k4EuCN9sbpATT7fMpsBLcP
DcR5gpuHBk8mU/jyq6+xcW8TYckMpziwSKagvKTX4x0deOpwt5JpBjKD1PM8eu064q
vraI2EHcEpw0pAqnK+YODA/n3wS6pxNEpAa58TK05IdoQl+AyjoGQ5fVkI0JbFoqEi
tlFgu/C01IeM3B2UY4s7y1YrAbXUeEm1SNx58Un8sDJKiNbsdiwEaD6m4JakoFPAOA
HZ57TleFs+2d2lMsotl1G1YSHATR5PEzYSCXXt8p2kGh36zED/y+o8qyNridOwEOBB
j5htI7GJ1bU1p/11zZX9XkJ31yF89MG5nTpScAxoCwFKZ86z8NxeWKwLrNom7YrjL/
bh/GcfY39Hu2RYJYkKAvR9KBjAjZv/CJHMThQ37gYS066IhMNgWmpSZtIVBHio2euV
AhLH+OSU2qsFmQ828jx69Rpi8VX4vJX9YgUBCmbBCIsVhv8cQTKVKt/jDsFIYvpjJ0
RLUuPYygqujF5FG3tEo7IkOxKgUObwvcR9DF2+omRTmE5NDco5/dFzSoGd4sWaMvjL
kCJZJQmsV7FZC9bziBSQv2+M4Y+RUbWki5IGZXPC1oy/eo4buY9W/PnX3zC/uFTuEa
VJcRoV1dC8iSRawyFcGv4dqe1tvHrqpFS1EFbX1zE+dQvT0hVlpNSyzvc+exR9zz8n
zUmbVL8ELv81grHxSbTK/lrtuWNDYibBZ14iSSEQlP6PGbIpZTadzkg/6Fdr1PaBvI
cCLYgIYa7TKsFAYNdtdpn6vaYF9CYCREQTxkBS/gPySZb42SvIvDhYNQRsQBlkal3i
R/cSWka137oI8LAOQF7VDDiDwHrw3Si/l9eFl5CtZzhmQa2DZlynfXut28/8C/JOMz
7+5SRKAAAAAElFTkSuQmCC">
</head></html>

Ikon apa yang diwakilinya? Jawab dan angkat suara di bawah ini!

rjobidon
sumber
1
Ikon apel?
styfle
2

Solusi Pembunuh pada tahun 2020

Solusi ini tentu muncul sembilan tahun setelah pertanyaan awalnya diajukan, karena sampai saat ini, sebagian besar browser belum mampu menangani favicon dalam .svgformat.

Bukan itu masalahnya lagi.

Lihat: https://caniuse.com/#feat=link-icon-svg

1) Pilih SVG sebagai format Favicon

Saat ini, pada Juni 2020, browser ini dapat menangani Favicons SVG :

  • Chrome
  • Firefox
  • Tepi
  • Opera
  • Chrome untuk Android
  • KaiOS Browser

Perhatikan bahwa browser ini masih tidak dapat:

  • Safari
  • Safari iOS
  • Firefox untuk Android

Dengan pemikiran di atas, kita dapat dengan percaya diri menggunakan Favicon SVG .

2) Hadirkan SVG sebagai URI Data

Tujuan utama di sini adalah untuk menghindari Permintaan HTTP.

Seperti solusi lain telah disebutkan, cara yang cukup cerdas untuk melakukan ini adalah dengan menggunakan Data URI daripada URL HTTP .

SVG (terutama SVG kecil) cocok untuk URI Data, karena yang terakhir hanya teks biasa (dengan karakter yang berpotensi ambigu persentase-dikodekan) dan yang sebelumnya, menjadi XML, dapat ditulis sebagai garis panjang plaintext (dengan segelintir) kode persentase) dengan sangat mudah.

3) Seluruh SVG adalah Emoji

Pada bulan Desember 2019, Leandro Linares adalah salah satu yang pertama menyadari bahwa sejak Chrome bergabung dengan Firefox dalam mendukung SVG Favicons, layak untuk bereksperimen untuk melihat apakah favicon dapat dibuat dari emoji:

https://lean8086.com/articles/using-an-emoji-as-favicon-with-svg/

Firasat Linares benar.

Beberapa bulan kemudian (Maret 2020), Bajak Laut Code Lea Verou menyadari hal yang sama:

https://twitter.com/leaverou/status/1241619866475474946

Dan favicons tidak pernah sama lagi.

4) Menerapkan solusi sendiri:

Berikut SVG sederhana:

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 16 16">

  <text x="0" y="14">🦄</text>
</svg>

Dan inilah SVG yang sama dengan Data URI :

data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E

Dan, akhirnya, inilah Data URI sebagai Favicon:

<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />

5) Lebih banyak trik

Karena Favicon adalah SVG, sejumlah efek filter (baik SVG maupun CSS) dapat diterapkan padanya.

Misalnya, di samping White Unicorn Favicon di atas, kita dapat dengan mudah membuat Black Unicorn Favicon dengan menerapkan filter:

style="filter: invert(100%);"

Black Unicorn Favicon:

<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%20style='filter:%20invert(100%);'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />
Rounin
sumber