Framer Web Sitenize Favicon Nasıl Eklenir

Framer'da favicon eklemek için: Site Ayarları'nı (⌘ + ,) açın, "Site Images" → "Favicon" bölümüne gidin, 64x64 boyutunda bir PNG dosyası yükleyin ve sitenizi yayınlayın. Bu kadar.

Şimdi detaylara bakalım ve karşılaşabileceğiniz sorunları ele alalım.

Framer Favicon Özellikleri

Framer belirli favicon özelliklerine ihtiyaç duyar:

• Boyut: 64 x 64 piksel
• Format: PNG (önerilen)
• Arka Plan: Saydam

Adım 1: Site Ayarlarını Açın

Ayarlara erişmenin iki yolu vardır:

• Klavye: ⌘ + , (Mac) veya Ctrl + , (Windows) tuşlarına basın
• Menü: Framer simgesi → Site Settings → Open Settings yolunu izleyin

Adım 2: Favicon Bölümünü Bulun

• "Site Images" bölümüne kaydırın
• "Favicon" yükleme alanını bulun

Adım 3: Faviconunuzu Yükleyin

Framer iki yükleme alanı sunar:

• Light Theme Favicon: Açık modda tarayıcılarda görüntülenir
• Dark Theme Favicon: Koyu modda tarayıcılarda görüntülenir

Tek bir sürümünüz varsa aynı görseli her iki alana da yükleyin.

Adım 4: Sitenizi Yayınlayın

• Publish düğmesine tıklayın
• Favicon yalnızca yayınlanmış sitede görünür, önizlemede görünmez

Açık ve Koyu Mod Desteği

Neden İki Sürüm Kullanmalısınız?

• Koyu logolar koyu tarayıcı sekmelerinde kaybolur
• Açık logolar açık tarayıcı sekmelerinde kaybolur
• Ayrı sürümler tüm modlarda görünürlüğü sağlar

Sürümler Nasıl Oluşturulur

1. Normal faviconunuzla başlayın
2. Alternatif sürüm için renkleri ters çevirin
3. Aynı şekli ve tasarımı koruyun
4. Her ikisi için de saydam arka plan kullanın

Apple Touch İkon Ayarları

Eylül 2024'ten itibaren Framer, Apple touch ikonlarını desteklemektedir:

• Konum: Aynı Site Images bölümü
• Boyut: 180 x 180 piksel
• Amaç: iOS cihazlarda ana ekran simgesi

Sorun Giderme: Favicon Görünmüyor

Temel Kontrolleri Yapın

• Siteyi yayınladınız mı?
• Zorla yenileme: Cmd+Shift+R veya Ctrl+Shift+R
• Gizli pencere deneyin

Yükleme Konumunu Doğrulayın

• Site Settings'te olmalı, sayfa ayarlarında değil
• Dosya geçerli PNG formatında olmalı

Sorun Giderme: Google Eski Faviconu Gösteriyor

Google faviconları yavaş günceller (günler veya haftalar sürebilir).

Güncellemeyi Hızlandırma Adımları

1. Faviconun sitenizde yayında olduğundan emin olun
2. Google Search Console'u açın
3. Ana sayfa için URL Inspection aracını kullanın
4. Dizine eklemeyi talep edin

Sorun Giderme: Safari Sorunları

Safari faviconları agresif bir şekilde önbelleğe alır.

Çözüm Adımları

1. Safari önbelleğini tamamen temizleyin
2. Favicon önbelleğini silin: ~/Library/Safari/Favicon Cache/
3. Safari'yi kapatıp yeniden açın

Sorun Giderme: Framer Logosu Hâlâ Görünüyor

Yaygın nedenler:

• Favicon yüklemesinden sonra site yayınlanmamış
• Tarayıcı önbellek sorunu
• Yayınlanmış site yerine önizleme görüntüleniyor

Çözüm: Siteyi yayınlayın ve tarayıcı önbelleğini temizleyin.

En İyi Uygulamalar

• Dosyaları yedekleyin: Orijinal favicon dosyalarını saklayın
• Her yerde test edin: Mac, Windows, iOS, Android'de kontrol edin
• Doğrulama araçları kullanın: Favicon.im kurulumunuzu doğrular
• Renkleri kaydedin: Marka tutarlılığı için tam hex kodlarını takip edin

SSS

Framer'da favicon nasıl eklenir?

⌘ + , ile Site Ayarları'nı açın, "Site Images" bölümüne gidin, "Favicon"a tıklayın, 64x64 boyutunda bir PNG dosyası yükleyin ve sitenizi yayınlayın.

Framer faviconu hangi boyutta olmalıdır?

Framer, saydam arka planlı PNG formatında 64 x 64 piksel önerir.

Framer faviconum neden görünmüyor?

En yaygın nedenler: site yayınlanmamış, tarayıcı önbelleği veya yanlış yükleme konumu. Sitenizi yayınlayın, sayfayı zorla yenileyin veya gizli pencere deneyin.

Google bir faviconu güncellemek için ne kadar bekler?

Google faviconları yavaş günceller — genellikle günler veya haftalar sürer. Süreci hızlandırmak için Google Search Console üzerinden yeniden dizine ekleme talebinde bulunun.

Framer koyu mod faviconlarını destekliyor mu?

Evet. Eylül 2024'ten itibaren Framer, Site Images ayarlarında açık ve koyu temalar için ayrı faviconlar yüklemenize olanak tanır.

Kaynaklar

1. How to set up a favicon in Framer - Framer Resmi Yardım
2. September 2024 Update: Apple Touch Icon and Favicons - Framer Güncellemeleri
3. Why isn't Safari displaying the favicon? - Framer Sorun Giderme
4. Favicon.im - Favicon test ve doğrulama aracı