Shopify için site simgesi
Shopify, tema düzenleyicisinden saniyeler içinde bir favicon yüklemenize olanak tanır. Her modern Shopify teması, Tema Ayarları altında bir Favicon alanı gösterir ve Shopify'in CDN'si, simgeyi vitrininizin her sayfasında sunar. Önce 512×512 PNG boyutunda bir kare oluşturmak için favicon generator'i kullanın; Shopify, bunu otomatik olarak gereken 32×32 ekran boyutuna göre yeniden boyutlandıracaktır.
Favicon, potansiyel bir müşterinin birden fazla sekme açtığında gördüğü ilk marka sinyallerinden biridir. Shopify mağazalarında favicon tarayıcı sekmesinde, yer işareti çubuğunda ve adres çubuğunda görünür. Net, tanınabilir bir favicon, marka güvenini güçlendirir ve alışveriş yapanların düzinelerce açık sekme arasında mağaza sekmenizi hızlı bir şekilde bulmasına yardımcı olur.
Her modern Shopify teması (Şafak, Yenileme ve premium temaların çoğu), Tema Ayarları altında Theme Editor'te bir Favicon alanı içerir. Erişmek için Shopify yöneticinizde oturum açın, Çevrimiçi Mağaza > Temalar'a gidin ve canlı temanızın yanındaki Özelleştir'e tıklayın. Sol kenar çubuğunda Tema Ayarları'nı (veya dişli simgesini) tıklayın ve ardından Favicon bölümünü arayın.
Shopify, site simgesi alanı için 32×32 piksel boyutunda bir kare PNG yüklenmesini önerir. Uygulamada, 512×512 PNG yüklemek daha keskin bir sonuç üretir çünkü Shopify, 32×32 orijinalden başlamanıza kıyasla daha iyi kalitede 32×32'ye altörnekler. Daima sahip olduğunuz en büyük kare kaynaktan başlayın; jeneratör bunu kolaylaştırır.
Favicon'unuzu yükledikten sonra Theme Editor'in sağ üst köşesindeki Kaydet'e tıklayın. Shopify görüntüyü işler, CDN'sine yükler ve birkaç dakika içinde tüm vitrin sayfalarına yayar. Temanızı yeniden yayınlamanıza veya başka herhangi bir kod değişikliği yapmanıza gerek yoktur.
Daha eski veya yoğun şekilde özelleştirilmiş Shopify temaları, Tema Ayarlarında Favicon alanını göstermeyebilir. Bu durumda temanın Liquid kodunu doğrudan düzenlemeniz gerekir. Tema dosyası düzenleyicisini açın (Çevrimiçi Mağaza > Temalar > Kodu Düzenle), theme.liquid dosyasını bulun ve '<head>' bölümünü bulun. Favicon.png dosyanızı temanın Varlıklar klasörüne yükledikten sonra `<link rel='icon' type='image/png' href='{{ 'favicon.png' | asset_url }}'>` ekleyin.
2.0 tema çerçevesindeki Shopify mağazaları için favicon, Shopify'in tema ayarlarınızdan otomatik olarak oluşturduğu site.webmanifest aracılığıyla yönetilir. Mağazanız Progresif Web Uygulaması kabuğu kullanıyorsa Shopify'in bildirimi, uygulama simgesi olarak site simgesini içerir. Tema favicon'unun güncellenmesi manifest simgesini de otomatik olarak günceller; fazladan JSON düzenlemesine gerek yoktur.
Şeffaf arka planlar Shopify site simgelerinde düzgün çalışır. Tema düzenleyicisi, CDN'ye yükleme yaparken PNG alfa kanalını korur. Ancak logonuzun arka planı beyazsa karanlık mod tarayıcı sekmelerinde beyaz bir kutuyla görünecektir. Bunu önlemek için yüklemeden önce logonuzu arka plan dolgusu olmadan dışa aktarın.
Birden fazla Shopify mağazası işletiyorsanız (uluslararası vitrinler için ortak bir kurulum), her mağazanın favicon'unun bağımsız olarak ayarlanması gerekir. Favicon, Shopify İş Ortağı veya kuruluş düzeyinde bir ayar değil, mağaza başına bir ayardır. Her mağazanın yöneticisine giriş yapın ve Theme Editor adımlarını tekrarlayın.
Önbelleğin geçersiz kılınması, Shopify'teki favicon güncellemelerini geciktirebilir. Shopify'in CDN'si uzun TTL'lere sahip varlıkları önbelleğe alır. Favicon değiştirildikten sonra tarayıcılar saatlerce eski ikonu göstermeye devam edebilir. Güncellenen simgeyi önbellek müdahalesi olmadan görmek için özel/gizli bir pencere açın. Alternatif olarak, tarayıcınıza donanımsal yenileme talimatı verin (Windows'te Ctrl+Shift+R, Mac'te Cmd+Shift+R).
Shopify, tema şablonunuz bunları içermediği sürece yerel olarak bir apple-touch-icon veya web uygulaması bildirim bağlantı etiketi eklemez. iOS ana ekran yüklemelerinin sayfa ekran görüntüsü yerine logonuzu göstermesini istiyorsanız apple-touch-icon etiketini Çevrimiçi Mağaza > Temalar > Kodu Düzenle > theme.liquid yoluyla manuel olarak ekleyin. `<link rel='apple-touch-icon' size='180x180' href='{{ 'apple-touch-icon.png' | `<head>` bölümüne asset_url }}'>` yazın ve 180×180 PNG dosyasını Varlıklar'a yükleyin.
Shopify Plus mağazaları için, ödeme akışındaki site simgesini ana vitrin site simgesinden ayrı olarak özelleştirmek için ödeme markalamayı kullanabilirsiniz. Ödeme markası oluşturma, Ayarlar > Ödeme ve hesaplar > Özelleştir altında yapılandırılır. Bu, ödeme sayfalarınızın ana mağazadan farklı bir site simgesi göstermesine olanak tanır; bu, çok markalı kurulumlar için kullanışlıdır.
Shopify site simgenizin çalıştığını doğrulamak için live favicon tester'i kullanın ve mağazanızın URL'sini girin. Test cihazı, simgenin herkesin erişimine açık olduğunu doğrular ve size simgenin 16, 32 ve 48 pikselde nasıl oluşturulduğunu gösterir. Ayrıca hangi ek boyutların PWA yükleme deneyiminizi iyileştireceğini anlamak için best favicon size'i de kontrol edin.
Yaygın Shopify favicon hataları arasında önce kareye kırpmadan dikdörtgen bir logo yüklemek (ezilmiş bir simge oluşturur), çok küçük bir resim yüklemek (retina ekranlarda bulanıklaşır) ve yükleme sonrasında Kaydet'e tıklamayı unutmak (değişiklik siz açıkça kaydedene kadar gerçekleştirilmez) yer alır. favicon generator, doğrudan Shopify yüklemesine hazır, 512×512'de düzgün kare şeklinde bir PNG'i dışa aktarır.
Nasıl çalışır
- 1
512×512 karelik bir PNG oluşturun
[favicon generator](tool:favicon-generator)'i logonuz veya marka işaretinizle kullanın. 512×512 PNG'i indirme paketinden dışa aktarın — bu, Shopify için doğru giriş boyutudur.
- 2
Temanızı Theme Editor'te açın
Shopify yöneticinizde Online Mağaza > Temalar'a gidin ve canlı temanızın yanındaki Özelleştir'e tıklayın.
- 3
Tema Ayarları > Favicon'a gidin
Sol kenar çubuğunda Tema Ayarları'nı (çoğu temanın alt kısmındaki dişli simgesi) tıklayın ve Favicon veya Marka bölümünü arayın. Tam etiket temaya göre değişir.
- 4
PNG'inizi yükleyin ve kaydedin
Favicon yükleme alanına tıklayın, 512×512 PNG'inizi seçin ve onaylayın. Sağ üst köşedeki Kaydet'i tıklayın. Shopify, simgeyi CDN'sine yükler ve tüm sayfalara yayar.
- 5
Gizli pencerede doğrulama
Özel/gizli bir tarayıcı penceresi açın ve mağaza URL'nize gidin. Yeni site simgesinin tarayıcı sekmesinde göründüğünü doğrulayın. Hızlı bir harici kontrol için [favicon tester](utility:favicon-tester)'i kullanın.
Hemen deneyin
Shopify'e hazır bir sık kullanılan simgesi oluşturun
Favicon OluşturucuSSS
Shopify'te sık kullanılan simgeyi nereye eklerim?+
Çevrimiçi Mağaza > Temalar > Özelleştir > Tema Ayarları > Favicon. Kare bir PNG yükleyin (512×512 önerilir), Kaydet'e tıklayın; Shopify, simgeyi her vitrin sayfasına otomatik olarak yerleştirir.
Shopify hangi boyuttaki favicon'u kullanıyor?+
Shopify, favicon'u tarayıcı sekmelerinde 32×32 piksel boyutunda görüntüler. En keskin sonuç için 512×512 yükleyin — Shopify, 32×32'ye alt örnekler. Asla 32×32'den küçük bir kaynağı yüklemeyin, aksi takdirde bulanık görünecektir.
Shopify site ikonum neden bulanık veya uzamış görünüyor?+
Muhtemelen kare olmayan bir resim veya çok küçük bir kaynak yüklediniz. Yüklemeden önce logonuzu tam bir kareye kırpın ve en az 256×256 pikselden başlayın. [favicon generator](tool:favicon-generator) otomatik olarak Shopify'e hazır bir 512×512 PNG karesi üretir.
Yeni Shopify site ikonum neden gösterilmiyor?+
Tarayıcılar ve CDN önbellekleri güncellemeleri geciktirir. Gizli/özel bir pencere açın ve güncellenen favicon'u önbellek müdahalesi olmadan görmek için mağaza URL'nize gidin. Normal tarama sırasında hala eski simgeyi gösteriyorsa CDN önbelleğinin süresinin dolması için birkaç saat bekleyin.
Shopify mağazama apple-touch-icon ekleyebilir miyim?+
Evet, ancak manuel kod düzenlemesi gerektirir. Tema Varlıklar klasörünüze 180×180 apple-touch-icon.png yükleyin ve ardından `<link rel='apple-touch-icon' href='{{ "apple-touch-icon.png" | asset_url }}'>`, `<head>` bölümünün içindeki theme.liquid'te.
Shopify, SVG site simgelerini destekliyor mu?+
Yerleşik Theme Editor favicon yüklemesi SVG'i kabul etmez. Bir SVG favicon kullanmak için bağlantı etiketini theme.liquid'e manuel olarak ekleyin: `<link rel='icon' type='image/svg+xml' href='{{ "favicon.svg" | SVG'i Varlıklar klasörüne yükledikten sonra asset_url }}'>`.
Shopify site simgemi değiştirmek için bir geliştiriciye ihtiyacım var mı?+
Hayır. Theme Editor'i (Çevrimiçi Mağaza > Temalar > Özelleştir > Tema Ayarları > Sık Kullanılan Simgesi) kullanarak, kod kullanmadan iki dakikadan kısa sürede yeni bir sık kullanılan simgesi yükleyebilir ve kaydedebilirsiniz. Geliştirici erişimi yalnızca SVG veya apple-touch-icon eklemeleri için gereklidir.