Küçük bir favicon'un başka bir HTTP isteği gerektirmesi saçma değil mi? Favicon'u bir hareketli grafiğe nasıl yerleştirebilirim?

305

Herkes HTML'de favicon.ico bağlantısının nasıl kurulacağını biliyor:

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

Ama bence birkaç baytlık küçük bir simge için başka bir HTTP isteğine ihtiyacınız var . Bu yüzden, background-position=0px -200px;bu değerli HTTP isteğini hızlandırmak ve kaydetmek için bu görüntüyü bir hareketli grafiğin (ör. ) Nasıl bir parçası haline getirebileceğimi merak ettim . Bunu logom ve diğer sanat eserleriyle mevcut bir hareketli grafiğe nasıl ekleyebilirim?

favicon.icoŞelale grafiğinde 31 numaralı maddeyi işaret eden robot benim evcil hayvanım ZAM. Genellikle daha mutludur ve bana web'de bazı yaratıcı güncellemelerin zamanı geldiğini bildirmek için iyi bir noktaya sahiptir, ancak o ve ben bugün biraz aptal olduğunu düşündüğüm kıyafetine katılmıyorum ...

resim açıklamasını buraya girin

javascript  html  css  performance  favicon 
— Sam
kaynak
47
Henüz .css / .js / .png / .html dosyasını tek bir optimize edilmiş akışta birleştirmenin bir yolu olmadığı saçma değil mi? Şimdiye kadar birinin bu fikri ortaya çıkaracağını düşünürdünüz
— RichardTheKiwi
9
@Richard ile ilgili: Çok parçalı yanıtlar ve Google'ın bunu çözen yeni, optimize edilmiş bir web protokolü için bir girişimi var, adını unuttum ... Düzenleme : SPDY olarak adlandırıldı . Ama bu açık bir gelecekte.
— Pekka
9
@Richard aka cyberkiwi, her şeyi bir html dosyasına data:görüntüler ve komut dosyaları satır içi olarak koyabilirsiniz .
— zzzzBov
39
btw, güzel kroki adam :)
— Fatih Acet
18
Kroki için +1 :)
— Giuliano

Yanıtlar:

140

@ Yc'nin cevabındaki küçük bir iyileştirme , normalde yine de kullanılacak ve önbelleğe alınacak bir JavaScript dosyasından base64 kodlu favicon'u enjekte etmek ve ayrıca favicon.icoilgili metaetikette bir veri URI'sı besleyerek istemenin standart tarayıcı davranışını bastırmaktır .

Bu teknik fazladan http isteğini önler ve Windows 7'de Chrome, Firefox ve Opera'nın son sürümlerinde çalıştığı onaylanmıştır. Ancak en azından Internet Explorer 9'da çalıştığı görülmemektedir .

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
kaynak
3
+1Marcel önbelleğe alınmış güzel atılım. PS HTTP Headers Response.ico dosyasındaki karakterler simgemin neredeyse aynı boyutunda !! Bunu nasıl buldun?
— Sam
2
@Sam: Stack Overflow favicon.ico dosyasının PNG eşdeğerinin base64 boyutunun yarısı olduğunu fark ettim . Güzel ve kompakt.
— Marcel
1
eeehm Ne demek istediğinizi anladığımdan emin değilim: 'dosya ...' nın yarısı büyüklüğündeydi? İcon.png gibi PNG dosyası? veya png biçimlendirilmiş simge veya gif yerine png biçimlendirildiğinde base64 eşdeğeri daha küçük mü demek istediniz? Meraklı. Şerefe arkadaşlar!
— Sam
1
@Sam: Ben base64 karşılaştırıyordum bu PNG bunun base64 için ICO dosyası . Yukarıdaki örnek kodumda kullanılan PNG sürümü, boyutun yarısıdır.
— Marcel
1
ooh, görüyorum ki, bu taban 64 cevap verir ve base64 PNG formatının genel kullanımı tercih edilen seçim değil mi?
— Sam
149

Çoğunlukla bu genellikle ilk erişimden sonra tarayıcının önbelleğine dökülür gibi başka bir HTTP isteği ile sonuçlanmaz düşünüyorum.

Bu aslında önerilen "çözümlerden" herhangi birinden daha verimlidir.

— James Anderson
kaynak
53
Bu tek mantıklı cevap. Bu, düzeltilmesi gerektirmeyen bir sorun değildir.
— JoDG
1
James, benim çözümüm gerçekten sadece bir olasılık, ama birisine asla tavsiye etmeyeceğim bir olasılık. Ancak, çoğu tarayıcı yeni bir tarayıcı oturumunun başlangıcında favicon için yeni bir HTTP isteği yayınlayacak gibi görünüyor. Ve her zaman bir 304 döndürmez.
— Yahel
4
Tarayıcı, tarayıcı önbelleğinde olsa bile bir HEAD çağrısı yapar, böylece bir HTTP isteğinin ek yüküne sahip olursunuz.
— dietbuddha
3
Aslında her şey tarayıcıya bağlıdır. Sayfadan bahsetmese ve çoğu her yenileme için bir HEAD çağrısı yapsa bile, çoğu her yerde bazı yerlerde bir favicon arayacaktır.
— David Costa
14
Favicon, iyi bir statik kaynak gibi uzun süren bir üstbilgiye ihtiyaç duyar. Bununla birlikte, HEAD çağrıları bile bastırılır.
— Paul Alexander
102

Bir veri URI'sini deneyebilirsiniz. HTTP isteği yok!

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

Sayfalarınız statik önbelleğe almadığı sürece, favicon'unuz önbelleğe alınamaz ve favicon resminizin boyutuna bağlı olarak, kaynak kodunuz bir şekilde şişebilir.

Veri URI favicons çoğu modern tarayıcıda çalışıyor gibi görünüyor; Mac'te Chrome, Firefox ve Safari'nin son sürümlerinde çalışıyorum. Internet Explorer'da ve muhtemelen bazı Opera sürümlerinde çalışmıyor gibi görünüyor.

Eski IE hakkında endişeleniyorsanız (ve muhtemelen bu günlerde olmamalısınız), eski Internet Explorer'ın görünmediği için gerçek favicon.ico'yu geleneksel şekilde yükleyecek bir IE koşullu yorumu ekleyebilirsiniz. Veri URI Favicons desteği

`<!--[if IE ]><link rel="shortcut icon" href="http://example.com/favicon.ico"  type="image/x-icon" /><![endif]--> `
  1. Her iki şekilde de isteyen tarayıcıları kapsayacak şekilde kök dizininize favicon.ico dosyasını ekleyin; .

Ayrıca, kendi önbelleklerini önbelleğe alması için önbelleğe alınması muhtemel olan başka bir popüler sitenin favicon'unu da kullanabilirsiniz http://google.com/favicon.ico.

Yorum yapanların işaret ettiği gibi , bunu yapabilmeniz gerektiği anlamına gelmez, çünkü bazı tarayıcılar tasarladığımız hilelerden bağımsız olarak favicon.ico isteyecektir. Bunu yaparak tasarruf edeceğiniz ek yük miktarı, gzipping, uzak gelecekte kullanım süresi üstbilgilerini statik içerik için sona erme, JavaScript dosyalarını küçültme, arka plan resimlerini sprite veya veri URI'lerine ekleme gibi tasarruflardan elde ettiğiniz tasarrufla karşılaştırıldığında çok küçük olacaktır. , statik dosyaları CDN dışında sunma vb.

— Yahel
kaynak
1
@Pekka evet, bu gerçekten pratik bir çözüm değil, çünkü önbelleğe alınmamış sayfalardaki veri URI fazladan bayt ağırlığı muhtemelen HTTP isteğinin ağırlığına ağır basacaktır. Belki OP favicon'u DOM'a eşzamansız olarak enjekte edebilir.
— Yahel
4
@Sam özür dilerim, @ yc'nin şimdi ne anlama geldiğini anlıyorum, hatam. Tabii ki <link rel>tarayıcıdaki öğeye JavaScript aracılığıyla mükemmel bir şekilde erişebilirsiniz , bu mümkün olmalıdır. Hatta bu şekilde programlanmış bir oyun gördüm ... ancak IE'de de çalışmıyor gibi görünüyor ve muhtemelen varsayılan /favicon.icoarama isteğini engellemeyecek
— Pekka
2
@Pekka, anlıyorum. PS bu inanılmaz bir oyun! İhtiyacınız olan tek şey 16x16 piksel haha ​​olduğu için tüm ekran rölemi utandırıyor. Bu köprü, bu favicon ile gerçekten mümkün olan bazı olasılıklar açar.
— Sam
3
Favicon bildirimi eksik olduğunda, tüm tarayıcılar otomatik olarak varsayılan URL'yi /favicon.icobulmak için kör bir girişimde bulunacaktır. Bu yüzden favicon'u <link>(daha sonra Javascript ile eklemek için) dışarıda bırakırsanız , muhtemelen işleri daha da kötüleştirirsiniz.
— Már Örlygsson
2
Sadece şeffaf gif saklamak için favicon.ico kullanın :)
— markijbema
21

Base64 kodlu favicon'u kullanabilirsiniz, örneğin:

<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
kaynak
1
İpucu: Bu cevapta kullanılan base64 kodlu dize bir PNG dosyasıdır ve IE10 veya daha eski sürümlerle çalışmaz.
— sibbl
2
Herkes bilmek istiyorsa Bu linux penguen.
— Martlark
17

Bu sayfada ilginç bir çözüm buldum . Almanca ama kodu anlayabileceksiniz.

Simgenin base64 verilerini harici bir stil sayfasına yerleştirirsiniz, böylece önbelleğe alınır. Web sitenizin başında favicon'u bir kimlikle tanımlamanız gerekir ve favicon background-imageo kimlik için stil sayfasında bir olarak ayarlanır .

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

ve 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
kaynak
8
74.947 şöhretli bir kişi bu sayfada bir yer söyledi: " Yapamazsın !" ... Sonra 50'den az itibarı olan başka bir kişi şöyle dedi: "Yapabilirsin!" Bu, çözüm arayışının ve somut yenilikçi gücün kazanılmış itibar ile hiçbir ilişkisi veya ilişkisi olmadığı anlamına mı geliyor? ... Peki o zaman bu harika!
— Sam
4
Bu çözümün işe yaramadığını doğruladım - en azından Windows'ta Chrome 10 ve Firefox 3.6'da
— Már Örlygsson 15:11
13
Bu çözümün işe yaradığını doğruladım - en azından W7 64 bit üzerinde Chrome 10.0.648 ve W7 64bit üzerinde FF 4.0
— Sam
4
LOL, yukarıdaki iki ifadenin çelişkili göründüğünü doğruladım, biraz farklı sürüm numaralarına rağmen Chrome'un davranışının bu kadar değiştiğinden şüpheliyim. Firefox belki 3.6'dan 4'e kadar yaptı, ancak Chrome 10'un küçük bir güncellemede bu kadar değişmedi.
— dyasta
Bu teyit edebiliriz çalışır Chrome 83 ve Ubuntu 20.04 Firefox ESR 68 üzerinde ve bunu teyit edebiliriz çalışmıyor /favicon.ico üzerine isabet önlemek için. Böylece görüntüyü alırsınız, ancak ekstra SSL bağlantısını engellemezsiniz. Amaç bu olduğundan, bu bir başarısızlıktır.
— Wil
14

İyi bir nokta ve güzel bir fikir, ama imkansız. Bir favicon'un tek, ayrı bir kaynak olması gerekir. Başka bir görüntü dosyasıyla birleştirmenin bir yolu yoktur.

— Pekka
kaynak
1
Belki körüm, ancak Google Arama favicon'unu gördüğüm tek yer bir hareketli grafikte: google.com/search?q=foo
— Yahel
4
@yc google.com/favicon.ico , tarayıcıların otomatik olarak arayacağı yerdir
— Pekka
3
@yc kör değilsin, orada çok yaratıcı bir cevaba layık olduğunu kanıtladın ... Pekka'nın işaret /favicon.icoettiği gibi tarayıcıların otomatik olarak bakacağı yer. Şimdi gerçek kötü haber geliyor: Eğer favicon YOK ise, bu da hafif bir gecikmeye neden olacak bir hata 404 ceza anlamına gelir! Bu favicon zindanından kaçış yok gibi görünüyor. Onlar çok küçük ama oh çok güçlü ... kahretsin :)
— Sam
Doğru şekilde hızlandırmanın uygun yolu için yanıtım stackoverflow.com/questions/5199902/… adresine bakın .
— Matt Joiner
8
Bunun, gerçekçi bir şekilde, hemen hemen sonsuza dek bir kerelik bir talep olması gerektiği unutulmamalıdır. Diğer her şeyde olduğu gibi, uzun önbellek zamanlayıcıları ve sunucu tarafından döndürülen uygun 301'ler, favicon'un bir tartışma noktası olmasını sağlayacaktır (yoksa - yikes!).
— Kevin Peno
9

Gerçekten önemli mi?

Birçok tarayıcı favicon'u düşük öncelikli olarak yükler, böylece sayfa yükünü yine de engellemez, bu nedenle evet ekstra bir istektir ancak herhangi bir kritik yolda değildir.

Kabul edilen çözüm, JS alınana ve yürütülene kadar korkunçtur.Aşağıdaki tüm DOM öğelerinin oluşturulması engellenir ve istek sayısını azaltmaz!

— Andy Davies
kaynak
8

Uygun çözüm HTTP boru hattını kullanmaktır .

HTTP ardışık düzenleri, karşılık gelen yanıtları beklemeden birden çok HTTP isteğinin tek bir sokete yazıldığı bir tekniktir. Ardışık düzen 1.0'da değil, yalnızca HTTP / 1.1'de desteklenir.

Sunucuların bunu desteklemesi gerekir, ancak zorunlu olarak bölünmez.

HTTP ardışık düzeninin hem istemcinin hem de sunucunun bunu desteklemesi gerekir. Boru hattını desteklemek için HTTP / 1.1 uyumlu sunucular gereklidir. Bu, sunucuların yanıtları kanalize etmesi gerektiği anlamına gelmez, ancak bir istemci boru hattı isteklerini seçerse başarısız olmaları gerektiği anlamına gelmez.

Birçok tarayıcı istemcisi, ne zaman yapmaları gerektiği konusunda bunu yapmaz.

HTTP boru hattı çoğu tarayıcıda devre dışı bırakılmıştır.

  • Opera'da varsayılan olarak boru hattı etkin. Bağlı sunucuya bağlı olarak kullanılan boru hattı seviyesini kontrol etmek için sezgisel tarama kullanır.
  • Internet Explorer 8, buggy proxy'leri ve satır başı engelleme ile ilgili endişeler nedeniyle istekleri sıraya koymaz.
  • Mozilla tarayıcıları (Mozilla Firefox, SeaMonkey ve Camino gibi), boru hattını destekler, ancak varsayılan olarak devre dışıdır. Özellikle IIS sunucuları için boru hattını kapatmak için bazı sezgisel tarama kullanır.
  • Konqueror 2.0 boru hattını destekler, ancak varsayılan olarak devre dışıdır.
  • Google Chrome, boru hattını desteklemiyor.

Firefox'ta boru hattını etkinleştirmeyi denemenizi ve orada denemenizi veya sadece Opera (shudder) kullanmanızı öneririm.

— Matt Marangoz
kaynak
7
Taşıma katmanında yapılan bir optimizasyonun boru hatları. Hala favicon için ayrı bir HTTP gidiş-dönüşü içeriyor, bu da sorunun sorduğu şey.
— Már Örlygsson
@ Már Örlygsson bu doğru değil. Gidiş dönüş, müşterinin bir talepte bulunması ve ardından talebin işlenmesini ve cevabın indirilmesini beklemesi gerektiği anlamına gelir. Boru hattı oluşturma, önceki isteğin bitmesini beklerken isteğin zaten gönderileceği anlamına gelir, bu nedenle aynı adımlar gerçekleşirken, neden olacağı gecikme aynı olmayacaktır ...
— Peter
1
Sam, ziyaretçilerinin tüm tarayıcılarında boru hattını açamaz, bu nedenle bu çözüm, sitenin daha hızlı yüklenmesini sağlamaz - kişisel olarak hariç.
— Már Örlygsson
3
@ Már Örlygsson ve upvoters: Taşıma katmanında yapılmadı. Gerçek dünya modellerinde bunların hepsi uygulama katmanında yapılır. Teorik olarak boru hattı oturum katmanında olmalıdır.
— Matt Joiner
4
Bu anlambilimi seninle tartışmayacağım. Gerçek şu ki, Sam'in sitenizi ziyaretçileri için daha hızlı yüklemesini sağlamak için "boru hattını" kullanamayacağı (boru hattı desteği A olduğu için) sivilceli ve B) her biri tarafından tercih edildiğini iddia ediyor bireysel kullanıcı.
— Már Örlygsson
6

Soruya gerçekten bir cevap değil, sadece Marcel ve yahelc tarafından verilen cevapları iltifat etmek için 404 favicon sorununa zarif bir çözüm sunuyoruz.

Bazı uygulamalar ve tarayıcılar ve bir favicon.com için ne kontrol etmediğinden ve simge site kökünde bulunmuyorsa, isteğe 204 yanıt üstbilgisi ile yanıt verebilirsiniz .

Apache Örnekleri:

Apache birinci seçenek (ve benim favorim), .htacces veya .conf dosyalarınızda basit bir astar:

Redirect 204 /favicon.ico

Apache ikinci seçenek:

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

Daha fazla okumak için, Stoyan Stefanov'un http://www.phpied.com/204-no-content/ adresinde güzel bir blog yazısı var.

— Anthony Hatzopoulos
kaynak
Evet ama istek yapıldıkça ve favicon genellikle anlamlı bir şekilde kullanıldığına göre boş bir yanıt yerine simge sağlamanın değerli olduğunu düşünüyorum. Simgeyi gzip ile sıkıştırmak genellikle onu tek bir TCP paket boyutuna getirecektir
— Andy Davies
5

Harika bir fikir, ancak Google bunu ana sayfasında yapmadıysa, bahse girerim (şu anda) yapılamaz

— cusimar9
kaynak
13
Google harika, ancak böyle düşünmek verimsiz ve boğucu görünüyor. Her zaman yeni, daha iyi ve çok olası şeyler yapmanın yolları vardır ve bir endüstri liderinin onlarla gelmesi için çalışmak zorunda değilsiniz.
— Sözdizimi Hatası
9
Açıkçası, Google fikirlerini diğer taraftan değil
— SO'dan alır
3
İyi yanıt, eğer google sayfalarını daha hızlı yapabilirse, yapardı.
— David d C e Freitas
5

Üzgünüm, ancak favicon'u başka bir kaynakla birleştiremezsiniz.

Bu, temel olarak iki seçeneğiniz olduğu anlamına gelir:

  1. Sitenizde favicon bulunmadığından memnunsanız - hrefzaten yüklenmiş olan simge dışı bir kaynağa (örneğin bir stil sayfası, komut dosyası veya hatta önceden getirilmekten yararlanan bir kaynağa) işaret edebilirsiniz. .)
    (My kısa test bu, çoğu karşısında hepsi değilse, büyük tarayıcılar çalışır gösterir.)

  2. Ek HTTP isteğini kabul edin ve favicon dosyanızda agresif HTTP önbellek kontrolü üstbilgileri ayarlandığından emin olun.
    (Kontrolünüz altında başka web siteleriniz varsa, bu web sitesinin favicon'unu diğer statik kaynaklarla birlikte kolayca yüklemelerini sağlayabilirsiniz.)

Çalışmayacak PS Creative çözümleri :

  • Garip CSS data-uri hilesi (yorumcu Felix Geenen ile bağlantılı) çalışmıyor .
  • <link>Favicon öğesine (user @yc tarafından önerildiği gibi) gecikmeli enjeksiyon yapmak için Javascript kullanmak , muhtemelen iki şey daha da kötüleştirir - iki HTTP isteği ile sonuçlanır .
— Már Örlygsson
kaynak
1
işe yaramayacak diğer çözümler: .ico'da birden çok simge ve favicon yerine başka bir resim görüntülemesi umuduyla ico'yu bir resim etiketinde kullanmak. Favicon'u başka bir dosyayla birlikte oluşturuyoruz.
— markijbema
3

Daha küçük veri ayak izi için ICO formatı yerine 8 bit PNG kullanabilirsiniz. Değiştirmeniz gereken tek şey "data: image / x-icon" yerine "data: image / png" kullanmaktır MIME türü üstbilgisi:

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

"type" özelliği "image / png" veya "image / x-icon" olabilir, her ikisi de benim için çalışır.

Gimp kullanarak ICO'yu 8-bit png'ye dönüştürebilir veya dönüştürebilirsiniz:

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

ve base64 komutunu kullanarak PNG binary'den base64 dizesine kodlanır:

base64 favicon.png
— andrej
kaynak
2

İşte en kolay yol:

<!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>

Hangi simgeyi temsil ediyor? Aşağıdaki cevap ve oy verin!

— rjobidon
kaynak
1
Elma simgesi?
— 17'de styfle
2

2020'de Katil Çözümü

Bu çözüm, sorunun asıl sorulmasından dokuz yıl sonra gelmelidir, çünkü oldukça yakın zamana kadar çoğu tarayıcı, faviconsları .svgformatta işleyememiştir .

Artık durum böyle değil.

Bkz. Https://caniuse.com/#feat=link-icon-svg

1) Favicon formatı olarak SVG'yi seçin

Şu anda, Haziran 2020'de, bu tarayıcılar SVG Favicons'u işleyebilir :

  • Krom
  • Firefox
  • kenar
  • Opera
  • Android için Chrome
  • KaiOS Tarayıcı

Not olduğunu bu tarayıcılar hala olamaz:

  • Safari
  • iOS Safari
  • Android için Firefox

Yukarıdakileri akılda tutarak, bir SVG Favicon'u güvenle kullanabiliriz .

2) SVG'yi Veri URI'si olarak sunma

Buradaki temel amaç HTTP İsteklerinden kaçınmaktır.

Diğer çözümlerin de belirttiği gibi, bunu yapmanın oldukça akıllı bir yolu bir HTTP URL'si yerine bir Veri URI'si kullanmaktır .

SVG'ler (özellikle küçük SVG'ler) kendilerini Veri URI'lerine mükemmel bir şekilde ödünç verir , çünkü ikincisi sadece düz metindir (potansiyel olarak belirsiz karakterler yüzde kodlamalı) ve ilki XML olan uzun bir düz metin satırı olarak (bir saçılma ile) yazılabilir yüzde kodları) inanılmaz derecede basit.

3) Tüm SVG bir Emoji'dir

Aralık 2019'da Leandro Linares, Chrome'un SVG Favicons'u desteklemek için Firefox'a katıldığından beri, bir emojiden bir favicon yaratıp yaratılamayacağını görmek için denemeye değer:

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

Linares'ın önsezi haklıydı.

Birkaç ay sonra (Mart 2020), Kod Korsan Lea Verou da aynı şeyi fark etti:

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

Ve favicons bir daha asla aynı değildi.

4) Çözümü kendiniz uygulamak:

İşte basit bir SVG:

<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>

Ve burada Veri URI'sı ile aynı SVG :

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

Ve son olarak, burada bir Favicon olarak Veri URI'si :

<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) Daha hileler

Favicon bir SVG olduğundan, ona herhangi bir sayıda filtre efekti (SVG ve CSS) uygulanabilir.

Örneğin, yukarıdaki Beyaz Unicorn Favicon ile birlikte , filtreyi uygulayarak kolayca bir Black Unicorn Favicon yapabiliriz :

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

Siyah Tek Boynuzlu 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
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.