React için site simgesi

Hem Vite hem de Create React Uygulamasında (CRA), /public dizinine yerleştirilen statik dosyalar, herhangi bir paketleyici işlemine gerek kalmadan doğrudan kök URL'den sunulur. Bu, /public/favicon.ico'e https://alaniniz.com/favicon.ico adresinden erişilebildiği anlamına gelir; bu, tarayıcıların bir favicon için ilk önce denediği yolun tam olarak yoludur. Temel .ico kurulumu için web paketi yükleyicisine, Vite eklentisine veya derleme yapılandırmasına gerek yoktur.

`npm create vite@latest` ile yeni bir Vite React projesi oluşturduğunuzda, iskele zaten /public'e bir favicon.svg yerleştirir ve buna index.html'te referans verir. Bu iyi bir başlangıç ​​noktasıdır ancak varsayılan SVG genel bir Vite simgesidir. Bunu kendi SVG'inizle değiştirin ve SVG favicon'larını desteklemeyen tarayıcılar için çok boyutlu bir .ico yedek ekleyin.

React Oluştur Uygulama iskeleleri, varsayılan olarak /public'te bir favicon.ico içerir. Değiştirmek için kendi çok boyutlu .ico dosyanızı dosyanın üzerine yazmanız yeterlidir. CRA ayrıca /public'te manifest.json'u da içerir; `icons` dizisi girişlerini kendi PNG dosyalarınızı (192×192 ve 512×512) işaret edecek şekilde güncelleyin. /public'teki index.html, zaten CRA tarafından eklenen manifest bağlantı etiketine sahip.

Çok boyutlu .ico hala en önemli dosyadır. SVG favori simgelerini desteklemeyen tarayıcılar (eski Safari sürümleri, bazı yerleştirme araçları ve Windows kısayol oluşturma) otomatik olarak /favicon.ico'e geri döner. Tek bir .ico dosyası 16×16, 32×32, 48×48 ve 64×64 kareleri bir araya getirir, böylece tarayıcı herhangi bir ekstra bağlantı etiketi olmadan doğru çözünürlüğü seçer.

Yüksek DPI (Retina) ekranlar için .ico'ya ek olarak açık bir PNG bağlantı etiketi ekleyin. "<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>", tarayıcıya, 2x simgenin aynı çözünürlüklü .ico çerçevesinden daha keskin görüntülendiği retina ekranlarda PNG'i kullanmasını söyler. Hem .ico'yu hem de PNG'i /public'e yerleştirin.

SVG site simgeleri, React uygulamaları için geleceğe yönelik en iyi çözümü sunar. Tek bir SVG dosyası, herhangi bir sekme boyutunda net bir şekilde oluşturulur ve renklerini kullanıcının renk şemasına göre uyarlayabilir. index.html'e `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` ekleyin. SVG favicon'larını destekleyen tarayıcılar .ico'ya tercih eder; Bir sonraki bağlantı etiketine kolayca geçmeyen tarayıcılar.

Karanlık mod SVG site simgeleri, React uygulamalarında güçlüdür çünkü hedef kitle genellikle geliştirici araçlarını ve karanlık mod masaüstü bilgisayarları kullanır. `@media (prefers-color-scheme: dark) { :root { fill: white; } }` ile (simgenizin yapısına göre ayarlanmış) SVG'inizin içine bir `<style>` bloğu yerleştirin. Bu tek dosya, JavaScript veya ekstra etiket olmadan hem açık hem de koyu temalar sunar.

Herhangi bir mobil kullanıcı React uygulamanızı ana ekranına kaydedecekse apple-touch-icon gereklidir. apple-touch-icon.png'yi (180×180) /public'e yerleştirin ve index.html'e `<link rel='apple-touch-icon'size='180x180' href='/apple-touch-icon.png'>` ekleyin. Bu olmadan iOS, ana ekranda marka simgeniz yerine uygulamanın düşük çözünürlüklü bir ekran görüntüsünü gösterir.

PWA olarak dağıtılan React uygulamaları için, /public/manifest.json (veya site.webmanifest) dosyanız 192×192 ve 512×512 boyutunda simge girişleri içermelidir. Bu boyutlar, Android ana ekran kurulum istemini ve Chrome PWA kurulum iletişim kutusunu yönlendirir. favicon generator, hem PNG'lerin hem de doğrudan /public'e bırakabileceğiniz önceden doldurulmuş bir bildirim şablonunun çıktısını verir.

React SPA dağıtımlarında favicon'lar için yönlendirme önemlidir. /favicon.ico yolu, React yönlendiricisi tarafından kesilmemeli, doğrudan ana makineniz tarafından sunulmalıdır. Vercel, Netlify ve GitHub Sayfalarının tümü, SPA'ya geçmeden önce kökte /public içerikleri sunar. Özel bir sunucuda barındırıyorsanız, statik dosya ara yazılımınızın index.html'e hizmet veren tümünü yakalama yolundan önce çalıştığını doğrulayın.

`npm run dev` ile geliştirme sırasında Vite çoğu değişikliği otomatik olarak otomatik olarak yeniden yükler, ancak favicon değişiklikleri bazen tarayıcının manuel olarak yenilenmesini gerektirir. Tarayıcılar, geliştirme sunucusu yeniden yüklemelerinde bile kaynak başına /favicon.ico önbelleğe alır. Geliştirme sırasında yenilemeyi zorlamak için, kalıcı olarak yenileyin (Ctrl+Shift+R) veya bağlantı etiketinize geçici olarak `/favicon.svg?v=2` gibi bir sorgu dizesi ekleyin.

Sunucu tarafı işleme kurulumlarında (örneğin, özel bir Express sunucusuyla React), express.static() ara yazılımının React SSR işleyicisinden önce /public'e hizmet verdiğini doğrulamanız gerekir. SSR işleyicisi önce tüm istekleri yakalarsa, /favicon.ico, React tarafından işlenecek ve ikili ICO dosyası yerine HTML döndürerek favicon'u tamamen bozacaktır.

Birden fazla React uygulaması içeren Monorepo kurulumları, dikkatli site simgesi yönetimi gerektirir. Her uygulamanın /public klasörünün kendi favicon'u vardır. Simgeleri uygulamalar arasında paylaşıyorsanız, monorepo kökünde tek bir doğruluk kaynağı simgeleri dizinini tutmayı ve oluşturma adımı sırasında dosyaları her /public'e kopyalamayı düşünün. Derleme komut dosyasındaki `cp` gibi araçlar veya özel bir varlık senkronizasyon eklentisi, bunları senkronize tutar.

Dağıtımdan sonra, tüm site simgesi çeşitlerinin herkese açık olarak erişilebilir olduğunu doğrulamak için favicon tester'i kullanın. Üretim URL'nizi girin ve favicon.ico, favicon.svg, apple-touch-icon.png ve bildirim PNG'lerinizin tamamının doğru şekilde çözülüp çözülmediğini kontrol edin. Bu, yanlış yapılandırılmış statik dosya sunumunu veya geliştirmede çalışan ancak üretimde kesintiye uğrayan yolları ortadan kaldırır.