Favicon Nasıl Eklenir? Shopify

Shopify'a favicon eklemek basit bir tema özelleştirmesidir. Çoğu Shopify temasında tema kodunuzu düzenlemeden Shopify yöneticinizden bir görsel yükleyebilirsiniz. Bu eğitimde bir favicon hazırlamayı, Shopify mağazanıza eklemeyi, değiştirmeyi veya kaldırmayı, çalıştığını doğrulamayı ve favicon'un görünmediği durumları nasıl gidereceğinizi öğreneceksiniz. Ayrıca temanız site simgesi ayarını farklı bir konuma yerleştirirse ne yapmanız gerektiğini de öğreneceksiniz.

Başlamadan önce kare bir favicon görseli hazırlayın. Shopify, 32 × 32 piksellik bir favicon boyutunu önerir, ancak 16 × 16 piksellik bir resim de Shopify'ın belgelerinde ideal bir favicon boyutu olarak listelenir. 32×32 pikselden büyük görseller yüklendiğinde 32×32 piksele kadar küçültülebilir.

Shopify'a Favicon'u Nasıl Eklersiniz?

Shopify, uygun mağazalar için tema düzenleyici aracılığıyla bir site simgesi ayarı sağlar. Ayarın tam konumu tema sürümüne göre değişebilir. Shopify'ın mevcut talimatları, onu Favicon olarak veya Logo altında görünebileceği Tema ayarları altına yerleştirir.

1. Shopify'da oturum açın: Shopify yöneticinizde oturum açın. Favicon'unu değiştirmek istediğiniz mağazaya erişmeniz gerekiyor.
2. Çevrimiçi Mağazayı Aç > Temalar: Shopify yöneticisinden şuraya gidin: Çevrimiçi Mağaza > Temalar. Değiştirmek istediğiniz temayı bulun.
3. Tema düzenleyicisini açın: Tıklayın Özelleştir (veya Temayı düzenle) seçeneğini özelleştirmek istediğiniz temanın yanına tıklayın. Önemli olan değiştirmek istediğiniz temaya ait tema editörünü açmaktır.
4. Tema ayarlarını açın: Tema düzenleyicisinin içinde, Tema ayarları simgesi (sol paneldeki dişli simgesiyle temsil edilir).
5. Favicon ayarını bulun: Tema sürümünüze bağlı olarak, logo veya Site simgesi. Shopify, tema sürümüne bağlı olarak konumun farklılık gösterebileceğini özellikle belirtiyor. Her Shopify temasının aynı yerde aynı adlı ayarı görüntüleyeceğini varsaymayın.
6. Favicon resminizi seçin: Favicon görseli bölümünde, Resim seç. Daha sonra Shopify yöneticinize önceden yüklenmiş olan bir görseli seçebilir veya Resim ekle ve bilgisayarınızdan bir resim yükleyin. Hazırladığınız favicon'u seçin.
7. Bitti'yi tıklayın: Resmi seçtikten sonra tıklayın Bitti. Shopify sizi favicon ayarlarına döndürecektir.
8. Mümkün olduğunda alternatif metin ekleyin: Bazı temalar favicon'a alternatif metin eklemenizi sağlar. Bunu yapmak için tıklayın Düzenle Favicon görseli bölümüne tıklayın ve görselin kısa bir açıklamasını girin. Shopify, bazı temaların bu seçeneği sunduğunu belirtiyor. Açıklayıcı bir örnek şöyle olabilir: Siyah zemin üzerine beyaz markanın baş harfleri.
9. Değişikliklerinizi kaydedin: Tıklayın Kaydet sağ üstte. Bu, favicon'u düzenlediğiniz temaya uygular.
10. Canlı mağazayı kontrol edin: Yayınlanan Shopify mağazanızı normal bir tarayıcı penceresinde açın. Tarayıcı sekmesine bakın ve yeni favicon'unuzun sayfa başlığının yanında görünüp görünmediğini kontrol edin. Yalnızca Shopify tema düzenleyicisindeki önizlemeye güvenmeyin. Shopify, düzenleyicinin canlı vitrin yerine Shopify yöneticisinin bir parçası olması nedeniyle Tema Düzenleyici aracılığıyla bir temayı görüntülerken favicon'ların görüntülenmediğini belirtiyor.

Shopify'daki Favicon Ayarı Nerede?

Mevcut Shopify talimatlarında site simgesi ayarına tema düzenleyici aracılığıyla erişilir:

Shopify yöneticisi → Çevrimiçi Mağaza → Temalar → Temayı düzenle/Özelleştir → Tema ayarları

Buradan ayar şu şekilde görünebilir: Site simgesi veya altında logo, tema sürümüne bağlı olarak. Bu varyasyon önemlidir, çünkü daha eski bir eğitim size hemen Favicon'a tıklamanızı söyleyebilirken, temanız aynı seçeneği Logo'nun içine yerleştirebilir. Ayarı bulamazsanız yalnızca belirli bir etiketi aramak yerine Tema ayarları panelinin tamamını kontrol edin.

Shopify ayrıca Tema Mağazasına gönderilen temaların bir favicon ayarına sahip olmasını gerektirir; bu, Shopify'ın ekosistemi için tasarlanan temaların bu özelleştirme için destek sağlamasının beklendiği anlamına gelir.

Bir Favicon Ayarı Bulamıyorsanız Ne Olur?

Öncelikle doğru temayı düzenlediğinizi onaylayın. Ardından şunları kontrol edin:

• Git Çevrimiçi Mağaza > Temalar.
• Gerçekten yayınlamak istediğiniz temayı açın.
• Açık Tema ayarları.
• Her ikisini de kontrol edin Site simgesi ve logo.
• Tema ayarları panelinin tamamına bakın. Bazı temalar ayarlarını farklı şekilde düzenler.

Temanız gerçekten bir favicon ayarını göstermiyorsa tema kodu bir alternatif sağlayabilir. Shopify temaları, genel ayarları settings_schema.json aracılığıyla gösterebilir ve Shopify'ın geliştirici belgeleri, favicon ayarlarının temanın genel ayarlar nesnesi aracılığıyla oluşturulabileceğini gösterir. Tema zaten bir favicon ayarı sağladığında kod düzenleme ilk seçenek olmamalıdır.

Shopify Favicon'u Hangi Boyutta Olmalı?

Shopify, favicon için 32 × 32 piksel önerir. Yardım belgeleri aynı zamanda ideal favicon boyutu olarak 16 × 16 pikseli tanımlıyor ve daha büyük görsellerin yüklendiğinde 32 × 32 piksele düşürülebileceğini açıklıyor.

Pratik öncelik sadece bir sayı seçmek değildir. Görselin favicon boyutunda görüntülendikten sonra tanınabilir kalması gerekir. Örneğin, bir şirket adının tamamını içeren 32 × 32 piksellik bir simge teknik olarak sığabilir ancak yine de okunması imkansız olabilir. Güçlü kontrasta sahip basit bir sembol çok daha iyi sonuç verebilir.

Shopify için Favicon'u Nasıl Oluşturursunuz?

Halihazırda sahip olduğunuz marka varlıklarına bağlı olarak çeşitli seçenekleriniz vardır.

Logonuzdan bir favicon oluşturun

Logonuzun en tanınabilir kısmıyla başlayın. Bir sembol ve uzun bir şirket adı içeren yatay bir logo, metin okunamaz hale gelinceye kadar orantılı olarak küçültmek yerine genellikle basitleştirilmelidir. Sembolü tek başına kullanın veya bir veya iki tanınabilir baş harfi birleştirin.

Baş harflerden bir favicon oluşturun

Şirketinizin belirgin bir simgesi yoksa bir veya iki harf kullanarak basit bir favicon oluşturun. Örneğin, NS North Star adında bir markayı temsil edebilir. Net bir yazı tipi, yeterli boşluk ve güçlü bir kontrast kullanın.

Mevcut bir PNG'yi favicon'a dönüştürün

Zaten kare bir PNG görseliniz varsa, yüklemeden önce onu favicon'a hazır resme dönüştürebilirsiniz. Şöyle bir araç PNGtoFavicon.com PNG'yi site simgesi haline dönüştürebilirsiniz; bu, zaten bir marka görseliniz olduğu halde özel bir site simgesi sürümüne ihtiyaç duyduğunuzda kullanışlıdır.

Dönüştürmeden sonra ortaya çıkan simgeyi Shopify'a yüklemeden önce küçük boyutta inceleyin.

Özellikle küçük ekran gösterimi için bir favicon oluşturun

Sonucu kontrol etmeden tam boyutlu logonuzu küçültmeyin. Gereksiz öğeleri kaldırın, gerektiğinde kontrastı artırın ve simgenin önemli kısmının görünür kaldığından emin olun. Bir ziyaretçi markanızı yakınlaştırmaya gerek kalmadan küçük simgeden tanıyabildiğinde favicon başarılı olur.

Shopify Favicon'unuzun Çalışıp Çalışmadığını Nasıl Kontrol Edebilirsiniz?

Favicon'u kaydettikten sonra canlı vitrinde doğrulayın.

• Tarayıcı sekmesini kontrol edin: Yayınlanan mağazayı açın ve tarayıcı sekmenizdeki sayfa başlığının yanına bakın. Shopify, tarayıcı sekmesini favicon'un göründüğü ana yerlerden biri olarak tanımlar.
• Tarayıcı geçmişini kontrol edin: Başka bir sayfayı ziyaret edin, mağazanıza dönün ve tarayıcının geçmiş girişlerini kontrol edin. Shopify, tarayıcı geçmişini favicon'un görünebileceği başka bir konum olarak listeler.
• Bir yer imini kontrol edin: Mağazayı yer imlerine ekleyin ve sık kullanılan simgesinin yer iminin yanında görünüp görünmediğini kontrol edin. Shopify, favori simgenin görüntülenebileceği başka bir konum olarak yer imlerine eklenmiş mağazaları özellikle tanımlar.
• Özel veya gizli bir pencereyi test edin: Eski site simgesi normal tarayıcınızda hâlâ görünüyorsa özel veya gizli bir pencere açın ve canlı mağazayı ziyaret edin. Bu, tarayıcı önbelleği sorununu Shopify yapılandırma sorunundan ayırmaya yardımcı olur.
• Başka bir tarayıcıyı test edin: Mağazayı başka bir masaüstü tarayıcısında açın. Yeni simge bir tarayıcıda görünüyor ancak diğerinde görünmüyorsa, tarayıcı önbelleğe alma veya tarayıcıya özgü davranış, başarısız bir Shopify yüklemesinden daha olası bir açıklamadır.
• Mobil davranışı kontrol edin: Masaüstü ve mobil tarayıcıların favicon'u aynı şekilde görüntüleyeceğini varsaymayın. Daha da önemlisi, canlı vitrini Shopify'ın yönetici arayüzlerinden ayırın. Shopify, favicon'ların Tema Düzenleyici önizlemesinde görünmediğini belirtiyor.

Shopify Favicon'um Neden Gösterilmiyor?

Birkaç farklı sorun aynı semptomu üretebilir.

Güncellenmeyen Shopify Favicon'unu Nasıl Düzeltirsiniz?

Bu kontrolleri sırayla gerçekleştirin:

1. Açık Çevrimiçi Mağaza > Temalar.
2. Doğru temayı düzenlediğinizi onaylayın.
3. Açık Tema ayarları.
4. Kontrol edin Site simgesi veya logo Ayar.
5. Doğru görüntünün seçildiğini onaylayın.
6. Tıklayın Kaydet.
7. Tema Düzenleyiciyi değil, yayınlanan vitrini açın.
8. Siteyi özel veya gizli bir tarayıcı penceresinde test edin.
9. Başka bir tarayıcıyı test edin.
10. Tarayıcı sekmesinde favicon'u tekrar kontrol edin.

Bu sıra, sorunun Shopify ayarlarından mı, se��ilen temadan mı yoksa tarayıcı önbelleğinden mi kaynaklandığını belirlemeye yardımcı olur.

Shopify Favicon'unu Nasıl Değiştirirsiniz veya Değiştirirsiniz?

Bir site simgesini değiştirmek, ilk yüklemeyle aynı tema ayarlarını kullanır.

• Shopify yöneticinizde oturum açın.
• Çevrimiçi Mağaza > Temalar'a gidin.
• Güncellemek istediğiniz temayı bulun.
• Temayı düzenle/Özelleştir'e tıklayın.
• Tema ayarlarını açın.
• Temanıza bağlı olarak Logo veya Favicon'a tıklayın.
• Favicon görseli bölümünde Görsel seç'e tıklayın.
• Yedek site simgesini seçin veya yeni bir resim yükleyin.
• Bitti'yi tıklayın.
• Kaydet'i tıklayın.
• Canlı mağazayı açın ve yeni simgeyi doğrulayın.

Shopify'ın mevcut belgeleri bu iş akışını ve temaya bağlı Logo/Favicon varyasyonunu doğrulamaktadır.

Shopify Favicon'unu Nasıl Kaldırırsınız?

Kaldırma işlemi, temanızın sunduğu kontrollere bağlıdır.

Açık:

Çevrimiçi Mağaza → Temalar → Temayı düzenle/Özelleştir → Tema ayarları

Ardından Favicon veya Logo alanını açın ve o anda seçili olan favicon görüntüsüyle ilişkili kontrolü arayın.

Temanız kaldırma veya temizleme seçeneği sunuyorsa bunu kullanın ve temayı kaydedin. Temanız zaten onu yönetmek için bir ayar sağladığında, bir sık ​​kullanılan simgeyi kaldırmak için özel kod eklemeyin.

Özel Kodlu Shopify Favicon'u Ekleyebilir misiniz?

Evet, ancak çoğu mağaza öncelikle yerleşik tema ayarını kullanmalıdır.

Shopify'ın tema mimarisi, settings_schema.json aracılığıyla genel ayarları destekler. Bir tema, bir favicon görüntü ayarını tanımlayabilir ve Liquid ayarları nesnesi aracılığıyla bu ayara erişebilir. Shopify'ın geliştirici belgeleri, settings.favicon'dan PNG favicon'u oluşturan bir örnek içerir.

Bu nedenle, özel bir tema için kod uygulamanın bir parçası olabilir. Ancak normal bir Shopify mağazası için, tema zaten ayarı sağladığında Liquid'i yalnızca site simgesi eklemek için düzenlemek gereksizdir.

Kod Yerine Ne Zaman Tema Ayarlarını Kullanmalısınız?

Kullanılabilir olduğunda yerleşik tema ayarını kullanın. Yönetilmesi daha kolaydır, tema hatalarına neden olma olasılığı daha düşüktür ve daha sonra Liquid dosyalarında değişiklik yapılmadan değiştirilebilir.

Tema Kodunu Düzenlemeden Önce Neleri Kontrol Etmelisiniz?

Kodu düzenlemeniz gerekiyorsa öncelikle yayınlanan temayı, temanın favicon uygulamasını, ilgili düzen dosyasını, global bir favicon ayarının mevcut olup olmadığını ve temanın başka bir geliştirici tarafından güncellenip güncellenmediğini veya bakımının yapılıp yapılmadığını tanımlayın. Temanın genel ayarları nasıl işlediğini anlamadan favicon kodunu rastgele bir tema dosyasına yapıştırmayın.

Kaçınılması Gereken Yaygın Shopify Favicon Hataları

• Logonuzun tamamını kullanma: Uzun bir logo favicon boyutlarına küçültüldüğünde okunmaz hale gelebilir.
• Küçük metin kullanma: Bir veya iki baş harf işe yarayabilir. Tam bir slogan genellikle işe yaramaz.
• Karmaşık bir resim kullanma: Basit bir marka işaretinin tanınması, ayrıntılı bir illüstrasyondan daha kolaydır.
• Kare olmayan bir görsel kullanma: Favicon'un agresif kırpma veya ölçeklendirmeye dayanmaması için kare resimlerle başlayın.
• Düşük kaliteli bir kaynak kullanma: Bulanık bir kaynak görüntü, yeniden boyutlandırma sonrasında bile zayıf bir favicon üretecektir.
• Kaydetmeyi unutmak: Bir görselin seçilmesi yeterli değildir. Tema değişikliklerini kaydedin.
• Yalnızca Tema Düzenleyiciyi kontrol etme: Favicon, Shopify'ın Tema Düzenleyici önizlemesinde görünmeyebilir. Bunun yerine yayınlanan vitrini test edin.
• Yalnızca bir tarayıcı kontrol ediliyor: Bir tarayıcıdaki eski favicon, otomatik olarak Shopify yapılandırmasının yanlış olduğu anlamına gelmez.
• Yayınlanmamış bir temayı test etme: Şu anda yayında olmayan ancak ziyaretçilerin yayınlanan vitrininizde gördüğü site simgesini değiştirmeyen bir temayı özelleştirebilirsiniz.
• Kodu gereksiz yere düzenlemek: Temanın zaten bir favicon ayarı varsa Liquid'i değiştirmek yerine onu kullanın.

Shopify Favicon SSS'leri

Shopify'a Yüklemeden Önce Favicon Nasıl Oluşturulur

Zaten bir sık kullanılan simgeniz yoksa bu basit iş akışını kullanın:

1. Logonuz, marka sembolünüz veya baş harflerinizle başlayın.
2. Tasarımın kare bir versiyonunu oluşturun.
3. Küçük boyutlarda kaybolacak detayları kaldırın.
4. Simge ile arka plan arasında güçlü bir kontrast kullanın.
5. Görüntüyü Shopify'ın önerdiği 32 × 32 piksel boyutunda hazırlayın veya Shopify'ın küçültebileceği daha büyük ve temiz bir kaynak kullanın.
6. Gerektiğinde mevcut bir PNG'yi favicon aracıyla dönüştürün.
7. Bitmiş görüntüyü Tema ayarları aracılığıyla yükleyin.
8. Temayı kaydedin.
9. Favicon'u canlı vitrinde test edin.

Çözüm

Shopify'a favicon eklemek öncelikle bir tema düzenleyici görevidir. Çevrimiçi Mağaza > Temalar'ı açın, ilgili temayı düzenleyin, Tema ayarlarını açın, Favicon veya Logo'yu bulun, görselinizi seçin ve temayı kaydedin. Çok küçük boyutta tanınabilen basit bir kare simge kullanın. Yeni site simgesi hemen görünmediğinde Shopify ayarlarını tekrar değiştirmeden önce yayınlanan mağazayı özel bir pencerede veya başka bir tarayıcıda kontrol edin. Tarayıcı önbelleğe alma, başarıyla güncellenen bir favicon'un değişmeden görünmesini sağlayabilir.