Webflow için site simgesi

Webflow'in favicon yüklemesi, Tasarımcı tuvalinden ayrı olan Proje Ayarları panelinin bir parçasıdır. Webflow kontrol panelinde proje adına tıklayın ve ardından Proje Ayarları > Genel'e gidin. Favicon ve Uygulama Simgesi bölümüne ilerleyin, yükleme alanına tıklayın ve görsel dosyanızı seçin. Webflow, PNG, ICO ve GIF formatlarını kabul eder.

Webflow'in favicon yükleyicisi için gereken minimum boyut 32×32 piksel PNG'tir, ancak 512×512'den başlamak çok daha keskin bir sonuç üretir. Webflow, sekme ekranı ve CDN tarafından oluşturulan tüm değişkenler için görüntünüzün alt örneğini oluşturur. Her zaman sahip olduğunuz en büyük temiz kaynağı sağlayın; oluşturucu herhangi bir logodan 512×512 PNG oluşturmayı kolaylaştırır.

Webflow, favicon'u otomatik olarak oluşturulan bir URL ile (genellikle uploads-ssl.webflow.com/... biçiminde) kendi CDN'sinde barındırır. Manuel olarak bir CDN yolu sağlamanıza gerek yoktur. Yükledikten sonra Kaydet'e ve ardından projenizi yayınlayın'a tıklayın. Favicon yalnızca kaydetme sırasında değil, yayınlama sırasında da eklenir; yayınlanmamış değişiklikler canlı alanınızda görünmez.

Şeffaf arka planlar Webflow favicon yüklemeleriyle doğru şekilde çalışır. CDN, PNG alfa kanallarını korur, böylece şeffaf arka plan simgesi, karanlık mod tarayıcı temalarında temiz bir şekilde görüntülenir. Logonuzun düz beyaz veya renkli bir arka planı varsa, tarayıcı sekmelerinde kare bir kutu olarak görünecektir. Yüklemeden önce logonuzu arka plan dolgusu olmadan dışa aktarın.

Webflow'in yerleşik favicon yükleyicisi SVG dosyalarını desteklemez. Herhangi bir ölçekte net görüntü oluşturma ve karanlık mod desteği için bir vektör SVG favicon istiyorsanız, bunu özel kod ekleme yoluyla ekleyin. Proje Ayarları > Özel Kod > Başlık Kodu'na gidin ve şunu ekleyin: `<link rel='icon' type='image/svg+xml' href='https://yourdomain.com/favicon.svg'>`. SVG dosyasını kendi sunucunuzda veya bir CDN hizmetinde barındırın.

iOS ana ekran yüklemeleri için bir apple-touch-icon eklemek, yerleşik yükleyici yalnızca standart favicon'u işlediğinden, Webflow'te özel kod da gerektirir. 180×180 apple-touch-icon.png dosyanızı bir dosya ana bilgisayarına (veya planınız destekliyorsa Webflow Assets'e) yükleyin, ardından Proje Ayarları > Özel Kod > Başlık Kodu alanına `<link rel='apple-touch-icon'size='180x180' href='URL_TO_YOUR_FILE'>` enjekte edin.

Webflow'in PWA simge desteği, Next.js gibi çerçevelerle karşılaştırıldığında sınırlıdır. Webflow'te yerel web manifest oluşturucu yoktur. Tam PWA yükleme desteği için manuel olarak bir site.webmanifest JSON dosyası oluşturun, bu dosyayı harici olarak barındırın ve manifest bağlantı etiketini özel kod aracılığıyla enjekte edin. Bildirim simgeleri dizisine 192×192 ve 512×512 PNG girişlerini ekleyin.

Bir müşteri için Webflow sitesi oluşturuyorsanız favicon genellikle projenin sonlarında ayarlanır ve daha sonra unutulur. Yararlı bir iş akışı, projenin başlarında bir yer tutucu favicon ayarlamak ve bunu devirden önce değiştirmektir. Webflow, favicon geçmişini sürümlendirmez; yeni bir favicon kaydettiğinizde eskisi Proje Ayarlarından silinir, ancak bir süreliğine CDN URL'si aracılığıyla erişilebilir durumda kalabilir.

Aynı projenin birden fazla özel alan adına yayınlandığı çok alanlı Webflow siteleri, tek bir Proje Ayarları sık kullanılan simgesini paylaşır. Yerel Webflow'te etki alanı başına favicon geçersiz kılma yoktur. Yayınlanan tüm etki alanlarında aynı simge görünür. Alan başına simgelere ihtiyacınız varsa simge bağlantı etiketini koşullu olarak geçersiz kılmak için özel kod eklemeyi kullanın (bu, Webflow CMS veya özel mantık gerektirir).

Webflow'teki site simgesi güncellemelerinin yayılması, CDN önbelleğe alma nedeniyle zaman alabilir. Yeni bir favicon yayınlandıktan sonra eskisi 24-48 saat boyunca tarayıcılarda görünebilir. Güncellenen simgeyi yerel tarayıcı önbelleği müdahalesi olmadan görmek için canlı sitenizi özel/gizli bir pencerede açın. Hedef kitleniz CDN önbelleğe alınmış sayfalar kullanıyorsa yayılma gecikmesi Webflow'in CDN TTL ayarlarına bağlıdır.

Webflow Düzenleyici kullanıcıları için (Tasarımcı erişimi olmayan içeriği düzenleyen istemciler), site simgesi Düzenleyici aracılığıyla değiştirilemez; Proje Ayarlarında kilitlidir. Yalnızca Tasarımcı erişimine sahip ortak çalışanlar veya hesap sahipleri site simgesini güncelleyebilir. Gelecekteki favicon güncellemelerini nereden talep edeceklerini bilmeleri için bunu müşterilerinize açıkça iletin.

Webflow site simgenizi yayınladıktan sonra, üretim alanınızda çözümlendiğini onaylamak için favicon tester'i kullanın. Sonucu beklenen boyutla karşılaştırın: sekmeler için 32×32, apple-touch-icon'i eklediyseniz iOS için 180×180. Ayrıca hangi boyutların sitenizin simge bütünlük puanını iyileştirdiğini anlamak için best favicon size kılavuzunu da inceleyin.