Shopify Logo ve Favicon Ekleme Nedir? Shopify logo ve favicon ekleme, mağazanın header, sekme ikonu ve sosyal medya paylaşım kartlarında görünecek marka görsellerini Theme settings panelinden yükleyerek mağazayı görsel olarak tanımlama işlemidir.
Logo (marka amblemi) ve favicon (tarayıcı sekmesi ikonu), bir e-ticaret mağazasının kurumsal kimliğinin ilk fark edilen iki unsurudur. Shopify, bu görselleri tema koduna dokunmadan Theme settings üzerinden merkezi olarak yönetir; bu sayede tema değiştirildiğinde bile logo ve favicon ayarları yeniden yapılandırılabilir (Shopify Help Center, 2025). Tema kurulumunu henüz tamamlamadıysanız önce Dawn teması özelleştirme rehberini takip edip header yapısını netleştirmeniz, logo yerleşimini daha tutarlı hale getirir.
Marka kimliği kurulumu genellikle tema kurulumundan sonra, ürün yükleme ve ödeme entegrasyonundan önce yapılır çünkü logo ve renk paleti, sonraki tüm görsel kararların (ürün fotoğrafı kırpma oranı, banner tasarımı) referans noktasını oluşturur. Bu sırayı tersine çevirip önce ürün eklemeye başlayan mağazalar, marka kimliğini sonradan uyguladıklarında banner ve ürün görsellerini genellikle yeniden düzenlemek zorunda kalır.
Shopify’da Logo Nasıl Yüklenir?
Logo yükleme, Online Store > Themes > Customize > Theme settings > Logo menüsünden birkaç tıkla tamamlanır. Yüklenen logo, mağazanın kullandığı temadan bağımsız olarak tüm sayfalarda header’da görünür.
Logo yükleme adımları şu sırayla ilerler:
- Shopify admin panelinde Online Store > Themes sekmesine gidin.
- Yayındaki temanın yanındaki Customize butonuna tıklayın.
- Sol paneldeki Theme settings sekmesini açın ve Logo bölümünü bulun.
- Select image butonuyla logo dosyanızı bilgisayarınızdan yükleyin.
- Logo genişliğini (desktop logo width) piksel cinsinden ayarlayın; Dawn’da varsayılan değer 100 pikseldir.
- Mobil için ayrı bir logo genişliği tanımlayın, masaüstü değeriyle aynı olması gerekmez.
- Save butonuna basıp header’da logonun göründüğünü önizleme ekranından doğrulayın.
| Ayar | Konum | Varsayılan Değer |
|---|---|---|
| Logo Görseli | Theme settings > Logo | Boş (metin logo gösterilir) |
| Masaüstü Logo Genişliği | Theme settings > Logo > Desktop logo width | 100px |
| Mobil Logo Genişliği | Theme settings > Logo > Mobile logo width | 70px |
| Favicon Görseli | Theme settings > Favicon | Boş (Shopify varsayılan ikonu) |
[İPUCU] Logo yüklemeden önce farklı header renk şemalarında (koyu ve açık arka plan) nasıl göründüğünü kontrol edin. Şeffaf arka planlı logo, koyu temada beyaz metinle karışıp görünmez hale gelebilir.
Önerilen Logo Boyutu ve Format Nedir?
Önerilen logo formatı, kalite kaybı yaşamadan her ekran çözünürlüğünde net görünmesi için PNG (şeffaf arka planlı) veya SVG (vektörel) formatıdır. JPEG formatı, şeffaflık desteklemediği için header arka planıyla logonun kendi arka planı arasında görünür bir dikdörtgen sınır bırakır.
Shopify dokümantasyonuna göre logo dosyasının önerilen boyutu 450 x 130 piksel civarındadır ve dosya boyutu 100 KB’ı geçmemelidir; büyük dosyalar sayfa yükleme süresini gereksiz yere uzatır. SVG formatı, logo basit geometrik şekillerden oluşuyorsa (tek renk, az detay) PNG’den daha küçük dosya boyutuyla aynı netliği sağlar.
| Format | Şeffaflık Desteği | Önerilen Kullanım |
|---|---|---|
| SVG | Evet | Basit/vektörel logolar, her boyutta net kalır |
| PNG | Evet | Gradyan veya detaylı logolar |
| JPEG | Hayır | Önerilmez arka plan sınırı görünür |
| WebP | Evet | Küçük dosya boyutu önceliğiyse alternatif |
[KRİTİK NOT] Logo dosyasını yüksek çözünürzünlüklü (retina ekran için 2x boyut) hazırlayın ama Theme settings’teki genişlik değerini görüntülenecek gerçek boyuta göre ayarlayın. Dosya büyük, görüntülenen genişlik küçük olduğunda logo net görünür; tersi durumda bulanıklaşır.
Bir mağaza sahibi 3000x800 piksellik ham logo dosyasını doğrudan yüklediğinde, header’da genişlik 100px’e sıkıştığı için logo netliğini korudu ama dosya boyutu 1.2 MB olduğu için sayfa yükleme süresi fark edilir şekilde uzadı. Bu örnek, logo hazırlarken hem çözünürlük hem dosya boyutu dengesinin ayrı ayrı optimize edilmesi gerektiğini gösterir; çözüm, görseli 450px genişliğe sıkıştırıp ardından TinyPNG gibi bir araçla sıkıştırmaktı.
Favicon Nasıl Eklenir?
Favicon ekleme, aynı Theme settings panelinde Favicon bölümünden logo yüklemeyle neredeyse aynı adımlarla yapılır. Favicon, tarayıcı sekmesinde ve yer imlerinde (bookmark) görünen küçük ikondur.
Shopify, favicon için minimum 32 x 32 piksel boyutunda kare (1:1 oranlı) bir görsel talep eder; bu boyutun altındaki görseller otomatik olarak büyütülür ve bulanıklaşır (Shopify dokümantasyonuna göre). Favicon, logo dosyasından farklı olarak genellikle markanın simge (ikon) versiyonudur tam logo değil, logonun sadeleştirilmiş bir amblemi kullanılır.
Favicon ekleme adımları:
- Theme settings > Favicon bölümüne gidin.
- Kare formatlı, minimum 32x32 piksel bir görsel yükleyin.
- Görselin arka planının şeffaf değil, dolu (solid) renkte olmasına dikkat edin bazı tarayıcılar şeffaf faviconu düz gri gösterir.
- Save butonuna basın ve tarayıcı sekmesini yenileyerek favicon değişikliğini doğrulayın.
[UYARI] Favicon değişikliği tarayıcı önbelleğinde (cache) gecikmeli görünebilir. Değişikliği hemen görmek için tarayıcı sekmesini tamamen kapatıp yeniden açın veya gizli sekmede test edin.
Bağlamsal bir geçiş olarak, logo ve favicon ayarları tamamlandıktan sonra header’ın genel genişlik dengesi kontrol edilmelidir; çünkü favicon görünürlüğü doğru olsa da header’da logo oranı bozuksa marka algısı yine de zayıflar.
Header’da Logo Genişlik Ayarı Nasıl Optimize Edilir?
Header logo genişliği, mağazanın diğer header öğeleriyle (menü, arama ikonu, sepet ikonu) orantılı görünmesi için piksel bazında ince ayar gerektirir. Çok büyük bir logo menüyü sıkıştırır, çok küçük bir logo marka görünürlüğünü zayıflatır.
Dawn temasında logo genişliği Theme settings > Logo > Desktop/Mobile logo width kaydırıcılarıyla 50 ile 300 piksel arasında ayarlanabilir. Genel kural olarak header yüksekliğinin yaklaşık %60-70’ini kaplayan bir logo genişliği, görsel dengeyi bozmadan marka görünürlüğünü artırır.
- Menü öğesi sayısı fazlaysa (7’den fazla) logo genişliğini 80-100px aralığında tutmak menüyle çakışmayı önler.
- Tek sayfalık (one-page) veya minimal menülü mağazalarda logo 120-150px aralığına çıkarılabilir.
- Mobilde logo genişliği masaüstünün genellikle %60-70’i kadar ayarlanır çünkü ekran genişliği menü ikonlarıyla paylaşılır.
| Header Yapısı | Önerilen Masaüstü Logo Genişliği | Önerilen Mobil Logo Genişliği |
|---|---|---|
| Yoğun menü (7+ öğe) | 80-100px | 50-70px |
| Standart menü (4-6 öğe) | 100-140px | 70-90px |
| Minimal menü (1-3 öğe) | 140-180px | 90-110px |
Marka Renk Paleti Nasıl Tanımlanır?
Marka renk paleti tanımlama, Theme settings > Colors sekmesinde her renk şemasına markanın hex kodlarını girmekle yapılır. Bu ayar, logo ve favicon dışında mağazanın bütün görsel kimliğini tek bir merkezden yönetir.
Renk paleti tanımlarken üç renk kategorisi öncelik taşır: birincil renk (buton ve vurgu), ikincil renk (arka plan) ve nötr renk (metin). Bu üçlü, Dawn’ın 5 renk şemasına dağıtılarak farklı section’larda tutarlı bir görünüm oluşturur.
- Marka kılavuzunuzdaki (varsa) hex kodları hazırlayın; yoksa logonuzdaki baskın rengi bir renk seçici (color picker) aracıyla tespit edin.
- Theme settings > Colors sekmesinde her şemanın arka plan, metin ve buton renklerini bu kodlarla güncelleyin.
- Buton renginin arka planla yeterli kontrastta olduğunu WCAG 4.5:1 oranıyla test edin.
- Değişikliği hem masaüstü hem mobil önizlemede kontrol edin, bazı renkler küçük ekranda farklı algılanır.
[İPUCU] Marka renginizin tonunu %10 açık ve %10 koyu versiyonlarıyla birlikte tanımlayın. Bu, hover (üzerine gelme) durumları ve ikincil butonlar için hazır bir varyasyon seti oluşturur.
Sosyal Medya Paylaşım Görseli Nasıl Ayarlanır?
Sosyal medya paylaşım görseli (social sharing image), mağaza linki Facebook, WhatsApp veya X gibi platformlarda paylaşıldığında görünen önizleme görselidir ve Online Store > Preferences sayfasından ayarlanır. Bu görsel logo değildir; genellikle mağazanın genel görünümünü temsil eden geniş formatlı bir kompozisyondur.
Shopify, sosyal paylaşım görseli için 1200 x 630 piksel boyutunu önerir; bu oran Facebook ve X gibi platformların önizleme kartı standardıyla uyumludur (Shopify Help Center, 2025). Görsel, Open Graph (og:image) etiketi aracılığıyla otomatik olarak paylaşım linkine eklenir.
- Online Store > Preferences sayfasına gidin.
- Social sharing image bölümünde Select image butonuna tıklayın.
- 1200x630 piksel oranında, marka renklerini ve varsa logo/ürün görselini içeren bir kompozisyon yükleyin.
- Save butonuna basın ve Facebook Sharing Debugger gibi bir araçla önizlemeyi test edin.
[KRİTİK NOT] Sosyal paylaşım görseline metin eklerken kenarlardan en az 60 piksel boşluk bırakın. Bazı platformlar görselin kenarlarını kırparak gösterir ve kenara yakın metinler kesilebilir.
| Görsel Tipi | Önerilen Boyut | Kullanım Alanı |
|---|---|---|
| Logo | 450 x 130px | Header, footer |
| Favicon | 32 x 32px (kare) | Tarayıcı sekmesi |
| Sosyal Paylaşım Görseli | 1200 x 630px | Sosyal medya link önizlemesi |
Marka kimliği unsurları tamamlandıktan sonra, bu görsellerin hangi temayla en uyumlu şekilde sergilendiğini karşılaştırmak isterseniz ücretsiz ve ücretli tema karşılaştırmasına dönüp bazı ücretli temaların logo yerleşimi için sunduğu ek section seçeneklerini inceleyebilirsiniz.
Checkout Sayfasında Marka Kimliği Nasıl Korunur?
Checkout sayfasında marka kimliği, ana temadan ayrı bir ayar grubu üzerinden yönetilir çünkü Shopify checkout, tema motorundan bağımsız bir sistemdir. Logo ve renk ayarları burada tekrar tanımlanmadığı sürece checkout varsayılan görünümde kalır.
Checkout marka ayarları Online Store > Themes yerine Settings > Checkout > Customize menüsünden yapılır. Shopify Plus dışındaki planlarda checkout özelleştirme seçenekleri sınırlıdır ancak logo, renk ve font gibi temel unsurlar her planda değiştirilebilir (Shopify Help Center, 2025).
- Admin panelinde Settings > Checkout sayfasına gidin.
- Customize butonuyla checkout düzenleyicisini açın.
- Sol panelde Header bölümünden logonuzu ayrı olarak yükleyin ana temadaki logo buraya otomatik yansımaz.
- Colors sekmesinde birincil buton rengini ve arka plan rengini marka paletinizle eşleştirin.
- Değişiklikleri kaydedip test siparişiyle checkout akışını uçtan uca kontrol edin.
[UYARI] Ana temada logo güncellediğinizde checkout sayfasındaki logo otomatik değişmez. İki ayarı da güncellemezseniz müşteri, ürün sayfasında gördüğü logodan farklı bir logoyla checkout’a girer; bu tutarsızlık güven algısını zayıflatır.
Bir mağaza sahibi tema logosunu yeni marka lansmanıyla güncellediğinde checkout ayarını atladı; sonuç olarak müşteriler iki hafta boyunca eski logoyla ödeme ekranına yönlendirildi. Bu örnek, marka kimliği güncellemesinin tek bir ekranda değil, en az iki ayrı panelde (tema + checkout) yapılması gerektiğini gösterir.
Marka Kimliği Tutarlılığı İçin Kontrol Listesi
Marka kimliği tutarlılığı, logo ve renklerin mağazanın her temas noktasında (header, checkout, favicon, sosyal paylaşım, e-posta bildirimleri) aynı görünmesiyle sağlanır. Tek bir noktanın atlanması, profesyonel algıyı zayıflatan bir tutarsızlık yaratır.
Aşağıdaki kontrol listesi, marka kimliği kurulumunu tamamlamadan önce gözden geçirilmelidir:
- Header logosu hem masaüstü hem mobilde net görünüyor mu?
- Favicon, tarayıcı sekmesinde bulanıklaşmadan görünüyor mu?
- Checkout sayfasındaki logo, ana temadaki logoyla aynı mı?
- Sosyal medya paylaşım görseli 1200x630 oranında ve marka renklerini yansıtıyor mu?
- E-posta bildirim şablonlarında (Settings > Notifications) logo ayrıca yüklendi mi?
- Renk paleti, tüm renk şemalarında (Scheme 1-5) tutarlı mı yoksa sadece birinde mi güncellendi?
| Temas Noktası | Ayar Konumu | Sık Atlanan Hata |
|---|---|---|
| Header/Footer | Theme settings > Logo | Mobil genişlik ayrı yapılmıyor |
| Checkout | Settings > Checkout > Customize | Ana temadan bağımsız olduğu unutuluyor |
| E-posta Bildirimleri | Settings > Notifications | Logo hiç yüklenmiyor, varsayılan metin kalıyor |
| Sosyal Paylaşım | Online Store > Preferences | Görsel oranı yanlış, kenarlar kırpılıyor |
E-posta bildirim şablonlarındaki logo ayarı, çoğu mağaza sahibinin gözden kaçırdığı bir alandır. Settings > Notifications sayfasının en üstünde bulunan logo yükleme alanı, sipariş onayı ve kargo bildirimi gibi otomatik e-postalarda görünen logoyu kontrol eder; bu alan boş bırakıldığında e-postalar markasız bir görünümle müşteriye ulaşır.
[İPUCU] Marka kimliği kurulumunu tamamladıktan sonra kendinize test siparişi verin ve sipariş onay e-postasını, checkout ekranını ve mobil site görünümünü aynı oturumda karşılaştırın. Tutarsızlıklar yan yana bakıldığında çok daha kolay fark edilir.
Retina Ekranlar İçin Görsel Hazırlama
Retina ekranlar için görsel hazırlama, standart çözünürlüklü bir görselin yüksek yoğunluklu ekranlarda bulanık görünmesini önlemek amacıyla görselleri 2 kat büyük boyutta export etmeyi gerektirir. Bu teknik, özellikle logo ve favicon gibi küçük ama sürekli görünür unsurlarda netliği korur.
Bir logo header’da 150 piksel genişlikte gösterilecekse, dosyanın 300 piksel genişliğinde hazırlanıp Theme settings’te görüntülenecek genişliğin 150px olarak ayarlanması, retina ekranlarda (MacBook, iPhone gibi cihazlar) netliği korur. Aynı mantık favicon için de geçerlidir ancak favicon boyutu zaten küçük olduğundan 64x64 piksel gibi bir kaynak dosya yeterlidir.
- Logo tasarım dosyasını (Figma, Illustrator) hedef genişliğin 2 katı olarak export edin.
- PNG için “2x” veya SVG için orijinal vektör formatını tercih edin SVG çözünürlükten bağımsız çalışır.
- Theme settings’teki genişlik alanına gerçek görüntülenecek boyutu (2 katı değil) girin.
- Retina bir cihazda (veya tarayıcı zoom %200 ile) netliği test edin.
[KRİTİK NOT] SVG formatı kullanabiliyorsanız retina sorununu tamamen ortadan kaldırır çünkü vektör grafikler çözünürlükten bağımsızdır. Logonuz karmaşık gradyan veya doku içermiyorsa SVG’yi varsayılan tercih yapın.
Sık Sorulan Sorular
Shopify’a logo yüklemek ücretli mi? Hayır, logo yükleme Theme settings panelinin standart bir parçasıdır ve herhangi bir ek ücret gerektirmez. Sadece logonuzu tasarım aracıyla hazırlamanız veya bir tasarımcıya yaptırmanız gerekir.
Favicon neden bulanık görünüyor? Favicon genellikle 32x32 pikselden küçük bir görsel yüklendiğinde bulanık görünür. Kare formatlı ve en az 32x32 piksel boyutunda bir dosya yükleyerek bu sorunu çözebilirsiniz.
Logo ve favicon aynı görsel olabilir mi? Teknik olarak olabilir ama önerilmez. Favicon çok küçük gösterildiği için detaylı bir logo yerine logonun sadeleştirilmiş amblemi favicon olarak daha net görünür.
Şeffaf arka planlı logo hangi formatta olmalı? Şeffaf arka plan için PNG veya SVG formatı kullanılmalıdır. JPEG formatı şeffaflığı desteklemediği için logonun arka planı beyaz veya gri bir dikdörtgen olarak görünür.
Sosyal medya paylaşım görselini değiştirdim ama Facebook’ta eski görsel çıkıyor, neden? Bu durum Facebook’un önbelleğe aldığı Open Graph verisinden kaynaklanır. Facebook Sharing Debugger aracına linki yapıştırıp “Scrape Again” butonuna basarak önbelleği temizleyebilirsiniz.
Logo yüklerken hangi dosya boyutu sınırını aşmamalıyım? Shopify dokümantasyonuna göre logo dosyası 100 KB civarında tutulmalı, sayfa yükleme hızını korumak için. Daha büyük dosyalar sıkıştırma aracıyla küçültülmeden yüklenmemeli.
Checkout sayfasındaki logo neden ana temadan farklı görünüyor, bunu nasıl düzeltirim? Checkout, tema motorundan bağımsız ayrı bir sistem olduğu için ana temadaki logo değişikliği checkout’a otomatik yansımaz. Düzeltmek için Settings > Checkout > Customize menüsünden logonuzu ayrıca yüklemeniz gerekir.
Marka renklerimi değiştirdiğimde e-posta bildirimlerindeki renkler de otomatik güncellenir mi? Hayır, e-posta bildirim şablonlarının renk ve logo ayarı Settings > Notifications sayfasında ayrı olarak yönetilir. Tema renklerini güncelledikten sonra bu sayfayı da elle güncellemeniz gerekir.
Sonraki Adım
Logo, favicon ve marka renk paleti tamamlandıktan sonra mağazanın genel tema yapısını tekrar gözden geçirmek faydalıdır. Shopify Dawn teması özelleştirme rehberine dönerek header ve section düzeninin marka kimliğiyle uyumlu kalıp kalmadığını kontrol edebilir, farklı bir tema arıyorsanız ücretsiz ve ücretli tema karşılaştırmasını inceleyerek alternatifleri değerlendirebilirsiniz. Marka kimliği sadece mağaza vitrininde değil, müşterinin aldığı sipariş bildirimi e-postalarında da tutarlı olmalıdır.