Küçük Boyutta Logo: Favicon, Uygulama İkonu, Profil Fotoğrafı

Bir logo çoğunlukla geniş bir ekranda ya da A4 bir sayfada onaylanır. Oysa en sık göründüğü yerler çok daha küçüktür: tarayıcı sekmesi, arama sonucundaki küçük simge, telefonun ana ekranı, bir mesajlaşma uygulamasındaki yuvarlak profil fotoğrafı. Bu yazı, bu küçük alanların her birinin ne istediğini ve logonun küçük boyut sürümünün nasıl hazırlanacağını anlatıyor.

Küçük boyut neden ayrı bir tasarım problemi?

Logo küçüldükçe üç şey olur. İnce çizgiler kaybolur ya da tek piksel genişliğinde titrer. Birbirine yakın şekiller birleşir ve harflerin iç boşlukları kapanır. Yatay bir logo kare bir alana sığdırıldığında oransal olarak daha da küçülür ve yazı okunmaz hâle gelir.

Apple'ın uygulama ikonu rehberi aynı sorunu ikonlar için açıkça söylüyor: ince detaylar küçük ölçülerde zor seçilir, çok ince çizgi kalınlıklarından ve sivri köşelerden kaçınılmalıdır; metin ise yalnız deneyim ya da marka için gerçekten gerekliyse kullanılmalıdır 5. Bu yüzden küçük boyut için çoğu zaman logonun kendisi değil, sembolü, baş harfi ya da detayları azaltılmış bir sürümü kullanılır.

Küçük sürüm hazırlamak logoyu değiştirmek anlamına gelmez. Tipografide uzun süredir bilinen bir yaklaşım burada da geçerlidir: küçük puntoda kullanılacak harfler biraz daha kalın, iç boşlukları biraz daha açık ve harf aralıkları biraz daha geniş çizilir. Logo için de aynısı yapılır. Ana logodaki ince bir kontur küçük sürümde kalınlaşır, birbirine yaklaşan iki şeklin arası açılır, ikincil süslemeler çıkarılır. Amaç, küçük sürümü gören birinin onu ana logonun akrabası olarak hemen tanımasıdır. Bu dengeyi kurmanın en güvenilir yolu, sürümü bilgisayar ekranında büyütülmüş hâlde değil, gerçek ölçüsünde ve gerçek cihazda değerlendirmektir.

Kullanım yerleri ve ölçüler

Favicon: tarayıcı sekmesi ve arama sonuçları

Favicon, HTML'de icon türünde bir bağlantıyla tanımlanır. WHATWG'nin HTML standardına göre birden fazla ikon verildiğinde tarayıcı türe, medya koşuluna ve ölçü bilgisine bakarak en uygun olanı seçer; ölçüler ham piksel olarak yazılır ve ölçeklenebilir bir ikon, örneğin SVG, any anahtar kelimesiyle belirtilir 1. Sayfada hiç ikon tanımlanmamışsa tarayıcılar sitenin kök dizinindeki favicon.ico dosyasını deneyebilir 1.

Tipik bir tanım şöyle görünür:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Arama sonuçları ayrı bir kural setine sahiptir. Google Arama'nın güncel yönergelerine göre favicon kare (1:1) olmalı ve en az 8x8 piksel olmalı; farklı yüzeylerde iyi görünmesi için 48x48 pikselden büyük bir dosya öneriliyor 2. Desteklenen formatlar BMP, GIF, ICO, PNG, JPEG, PPM ve TIFF olarak listeleniyor; SVG bu listede yok 2. Aynı sayfa favicon adresinin sabit kalmasını, sık değiştirilmemesini de istiyor. Pratikte bu, SVG favicon kullanan bir sitenin yanında kare bir PNG ya da ICO sürümü de sunması gerektiği anlamına gelir.

Google'ın aynı sayfası, site simgesini belirtmek için icon değerinin yanında apple-touch-icon değerini de desteklediğini belirtiyor 2. Bu dosya, bir iPhone ya da iPad kullanıcısı sitenizi ana ekrana eklediğinde kullanılan kare görseldir. Saydam zemin yerine düz bir arka plan rengiyle hazırlanması, köşeleri sistem tarafından yuvarlatıldığında da düzgün görünmesini sağlar.

Favicon'un tasarım tarafı ölçüden daha zordur. Çok küçük bir karede yalnızca birkaç belirgin şekil ve az sayıda renk işe yarar. Sekme açık ya da koyu temada görüntülenebileceği için simgenin her iki zeminde de seçilebilmesi gerekir. Açık zeminde iyi görünen koyu bir sembol, koyu temada sekme arka planıyla birleşip kaybolabilir; bu durumda simgenin etrafına ince bir açık kontur ya da düz renkli bir kare zemin eklemek çözüm olabilir.

Web uygulaması ikonları ve maskelenebilir ikon

Siteniz ana ekrana eklenebilen bir web uygulaması olarak çalışıyorsa, ikonlar web uygulaması manifestinde tanımlanır. MDN'ye göre her ikonun bir kullanım amacı olabilir: any varsayılan değerdir; maskable, ikonun maske ve güvenli alan düşünülerek hazırlandığını; monochrome ise tarayıcının renk bilgisini atıp yalnız saydamlık kanalını düz bir dolgu için maske olarak kullanacağını belirtir 3.

Maskelenebilir ikonda sistem ikonu daire, yuvarlak kare ya da başka bir şekle kırpar. web.dev'in açıklamasına göre logo gibi önemli parçalar, yarıçapı ikon genişliğinin yüzde 40'ı olan merkezdeki dairenin içinde kalmalıdır 4. Yani 512 piksellik bir ikonda logo, ortadaki yaklaşık 410 piksel çapındaki dairenin dışına taşmamalıdır; geri kalan alan arka plan rengiyle doldurulur.

iOS ve iPadOS uygulama ikonu

Apple'ın insan arayüzü rehberi, uygulama ikonlarını 2025'te Liquid Glass görünümüne göre güncelledi ve son olarak Haziran 2026'da yeniden düzenledi 5. Rehberin logo açısından önemli noktaları şunlar:

• Kare ve maskesiz katmanlar: iOS, iPadOS ve macOS ikonları 1024x1024 piksel kare olarak hazırlanır; köşeleri sistem yuvarlatır. Önceden maskelenmiş katmanlar ışık efektlerini bozar ve kenarları tırtıklı gösterir 5.
• Katmanlı yapı: İkon bir arka plan ve bir ya da daha fazla ön katmandan oluşur; katmanlar Xcode ile gelen Icon Composer aracında birleştirilir. Ön katmanlar için vektör (SVG ya da PDF) tercih edilmesi, yazıların eğriye çevrilmesi öneriliyor 5.
• Görünüm seçenekleri: Kullanıcı ana ekran ikonlarını varsayılan, koyu, şeffaf (clear) ya da renklendirilmiş (tinted) görünümde seçebilir. Spesifikasyon tablosunda varsayılan, koyu, açık ve koyu şeffaf, açık ve koyu renklendirilmiş görünümler listeleniyor; sağlanmayan varyantları sistem kendisi üretiyor 5.

Bu son madde logo tasarımı için önemlidir: ikonunuz, renkleri sistem tarafından değiştirildiğinde de tanınabilir kalmalıdır. Tek renkte çalışan bir sembol burada büyük avantaj sağlar; konuyu logo tek renkte çalışıyor mu yazısında ayrıca ele aldık.

Android uyarlanabilir ikon

Android'de uygulama ikonları uyarlanabilir (adaptive) ikon olarak hazırlanır. Android geliştirici belgelerine göre ikon bir ön ve bir arka plan katmanından oluşur, her iki katman 108x108 dp ölçüsündedir 6. Cihaz üreticisinin maskesi hiçbir zaman ortadaki 66x66 dp'lik güvenli alanı kesmez; dört kenardaki 18 dp'lik pay maskeleme ve hareket efektleri için ayrılmıştır. Logonun en az 48x48 dp olması ve 66x66 dp'yi aşmaması isteniyor 6.

Android 13 ile gelen temalı ikonlar için tek renkli bir katman da eklenebilir; kullanıcı bu özelliği açtığında sistem duvar kâğıdı ve temaya göre ikonu renklendirir 6. Yine tek renk bir sembol gerekir.

Yuvarlak profil fotoğrafı

Sosyal medya, mesajlaşma ve iş platformlarının çoğu profil görselini daire şeklinde gösterir. Önerilen piksel ölçüleri platformdan platforma değişir ve zaman içinde güncellenir; bu yüzden ölçü için her platformun kendi yardım sayfasına bakmak gerekir. Ölçüden bağımsız kurallar ise şöyledir:

• Kare bir görsel hazırlayın, logoyu ya da sembolü tam ortaya yerleştirin.
• Logo, karenin içine çizilen dairenin içinde ve kenarlarından pay bırakarak dursun.
• Yatay logolar daire içinde çok küçülür; profil görselinde sembol ya da baş harf sürümü daha iyi okunur.
• Zemin düz bir renk olsun; logonun tek renk ya da negatif sürümü burada sıkça işe yarar.

Küçük boyut sürümü nasıl hazırlanır?

1. Sembolü ayırın. Logonun yazısız parçası ya da baş harfi tek başına tanınabiliyor mu, bakın.
2. Detayı azaltın. İnce çizgileri kalınlaştırın, küçük iç boşlukları açın, birbirine çok yakın şekilleri ayırın.
3. Kare yerleşim kurun. Sembolü kare bir alanın ortasına, güvenli alanları dikkate alarak yerleştirin.
4. Gerçek ölçüde test edin. 16, 32 ve 48 piksel ile telefon ana ekranında, açık ve koyu zeminde bakın.
5. Tek renk sürümünü üretin. Sistemlerin renklendirdiği ikonlar ve temalı ikonlar için gereklidir.
6. Dosyaları ayrı adlandırın. Favicon, uygulama ikonu katmanları ve profil görseli için ayrı dosyalar hazırlayın.

Logonuzu bu ölçülerde hızlıca görmek için logo dayanıklılık testi aracımızı kullanabilirsiniz; araç logonuzu favicon, uygulama ikonu ve yuvarlak profil kırpması üzerinde gösterir.

Dosya formatlarının genel düzeni için logo dosya formatları yazısına bakabilirsiniz. Sembol, favicon ve uygulama ikonu setini birlikte tasarladığımız işi amblem ve ikon sayfamızda anlatıyoruz.