Favicon Nedir ve Hangi Boyutlarda Hazırlanmalı? Favicon Ölçüleri

Favicon için yalnızca tek bir boyut kullanmak yerine farklı cihaz ve kullanım alanlarına uygun birkaç boyut hazırlamak daha sağlıklı bir yöntemdir.

En temel favicon boyutlarından biri:

ölçüsüdür.

Ancak modern web sitelerinde yalnızca 16 × 16 px dosya hazırlamak yeterli olmayabilir.

Sık kullanılan favicon ve site ikonu ölçüleri arasında:

- 16 × 16 px

- 32 × 32 px

- 48 × 48 px

- 180 × 180 px

- 192 × 192 px

- 512 × 512 px

bulunur.

Bu ölçülerin tamamı aynı amaç için kullanılmaz. Bazıları klasik tarayıcı favicon'u, bazıları mobil cihaz veya web uygulaması ikonları için tercih edilir.

16 × 16 px klasik favicon ölçülerinden biridir.

Tarayıcı sekmesi gibi oldukça küçük alanlarda kullanılabileceği için tasarımın bu ölçüde de anlaşılabilir olması önemlidir.

Detaylı bir logonun 16 × 16 px boyutuna küçültülmesi çoğu zaman iyi sonuç vermez.

Bu nedenle favicon için markanın basitleştirilmiş sembolü kullanılabilir.

32 × 32 px sürüm hazırlamak da yaygın bir uygulamadır.

16 × 16 px sürüme göre daha fazla ayrıntı gösterebilir ve farklı tarayıcı veya ekran koşullarında kullanılabilir.

Basit bir web sitesi favicon setinde 16 × 16 ve 32 × 32 px sürümlerinin bulunması faydalıdır.

48 × 48 px ölçüsü de bazı favicon ve platform kullanım senaryolarında karşınıza çıkabilir.

Özellikle favicon altyapısı hazırlanırken daha yüksek çözünürlüklü kare sürümlerin bulunması farklı ortamlarla uyumluluğu artırabilir.

Apple cihazlarında ana ekrana eklenen web siteleri için özel bir ikon tanımlanabilir.

Yaygın kullanılan ölçülerden biri:

boyutundaki Apple Touch Icon'dur.

HTML içerisinde uygun apple-touch-icon tanımlamasıyla kullanılabilir.

Bu daha büyük ölçüler özellikle web uygulamalarında ve web app manifest yapılandırmalarında kullanılabilir.

Örneğin manifest içerisinde:

- 192 × 192 px

- 512 × 512 px

ikonlar tanımlanabilir.

Bunları klasik tarayıcı sekmesinde görünen 16 × 16 favicon ile aynı kullanım alanı olarak düşünmemek gerekir.

Standart bir web sitesi için ihtiyaca göre şöyle bir yapı hazırlanabilir:

ve web uygulaması kullanılıyorsa:

Bu dosyaların tamamının her projede zorunlu olduğu anlamına gelmez. Kullanılan site altyapısına ve hedeflenen cihazlara göre gerekli olanlar seçilebilir.

Her iki format da kullanılabilir.

ICO formatı favicon kullanımında uzun süredir kullanılan klasik formattır ve tek dosya içerisinde birden fazla boyut barındırabilir.

PNG ise:

- Şeffaflığı destekler

- Hazırlaması kolaydır

- Farklı boyutlarda ayrı dosyalar oluşturulabilir

Modern web projelerinde PNG ve ICO birlikte kullanılabilir.

Uygun tarayıcı desteği hedefleniyorsa SVG favicon da kullanılabilir.

SVG'nin avantajı vektörel olması nedeniyle farklı çözünürlüklerde net kalabilmesidir.

Ancak tarayıcı ve platform uyumluluğu düşünülerek PNG veya ICO gibi alternatiflerin de sağlanması tercih edilebilir.

Favicon çok küçük gösterildiği için normal logodan daha sade hazırlanmalıdır.

İyi bir favicon:

- Basit

- Kolay ayırt edilebilir

- Kare alana uygun

- Küçük boyutta anlaşılır

- Markayla ilişkili

olmalıdır.

Örneğin marka logosunda sembol ve uzun bir marka adı bulunuyorsa favicon için yalnızca sembol kullanılabilir.

Uzun kelimeler genellikle favicon için uygun değildir.

Örneğin:

ifadesinin tamamını 16 × 16 px alana yerleştirmek okunabilir olmayacaktır.

Bunun yerine:

- Marka sembolü

- Tek harf

- Kısa monogram

- Basitleştirilmiş ikon

kullanılabilir.

Örneğin bir markanın tanınabilir M sembolü varsa favicon içerisinde yalnızca bu sembol tercih edilebilir.

Favicon dosyaları genellikle kare tuval üzerinde hazırlanır.

Ana grafik kare alanın tamamını doldurmak zorunda değildir. Simgenin etrafında uygun boşluk bırakılabilir.

Önemli olan farklı platformlarda kırpılma veya aşırı sıkışma yaşanmamasıdır.

PNG ve SVG gibi uygun formatlarda şeffaf arka plan kullanılabilir.

Ancak favicon'un hem açık hem koyu tarayıcı temalarında nasıl göründüğünü kontrol etmek önemlidir.

Örneğin tamamen siyah bir sembol koyu arka planda fark edilmeyebilir.

Tasarımın farklı arka planlarda yeterli kontrasta sahip olması gerekir.

Evet, favicon da web sitesinin yüklediği dosyalardan biridir.

Dosya küçük olduğu için etkisi genellikle büyük hero görselleri kadar yüksek değildir ancak yine de gereksiz veri içeren aşırı büyük dosyalar kullanılmamalıdır.

İkonlar uygun şekilde optimize edilmelidir.

Bulanıklığın birkaç nedeni olabilir:

- Düşük çözünürlüklü kaynak görsel kullanılması

- Yanlış ölçeklendirme

- Çok detaylı tasarım

- Küçük görselin büyütülmesi

- Uygun boyut sürümünün bulunmaması

Favicon'u büyük bir logoyu rastgele küçülterek oluşturmak yerine kare alana özel olarak düzenlemek daha iyi sonuç verebilir.

Yeni favicon yüklediğiniz halde eski simge görünmeye devam edebilir.

Bunun nedenlerinden biri önbellek olabilir.

Tarayıcılar favicon dosyalarını önbellekte tutabilir.

Bu durumda:

- Dosya yolunu kontrol edin

- HTML tanımlamalarını kontrol edin

- Sunucudaki dosyanın gerçekten değiştiğini doğrulayın

- Tarayıcı önbelleğini temizleyin

- Farklı tarayıcı veya cihazdan kontrol edin

Gerekirse dosya sürümleme yöntemleri kullanılabilir.

Web sitesindeki favicon'u değiştirmek Google arama sonuçlarındaki simgenin anında değişeceği anlamına gelmez.

Google'ın sayfayı tekrar taraması ve değişikliği işlemesi gerekebilir.

Bu nedenle web sitesinde yeni favicon görünürken Google sonuçlarında bir süre eski favicon görülebilir.

Google'ın favicon'u göstermesi ve güncellemesi kendi tarama ve işleme süreçlerine bağlıdır.

Google arama sonuçlarında kullanılmasını istediğiniz favicon:

- Siteyi temsil etmeli

- Geçerli ve erişilebilir bir dosya olmalı

- Google tarafından taranabilir olmalı

- Kare biçimde hazırlanmalı

- Çok küçük görüntülendiğinde anlaşılabilir olmalı

Google'ın teknik gereksinimleri zaman içinde güncellenebileceğinden Search Central üzerindeki güncel favicon belgelerinin esas alınması gerekir.

Favicon tanımlamak Google'ın arama sonuçlarında mutlaka istediğiniz simgeyi göstereceği anlamına gelmez.

Yaygın bir kullanım örneği şu şekildedir:

Apple Touch Icon için ise:

kullanılabilir.

Site yapısına göre dosya yolları farklı olabilir.

Favicon'u yalnızca 16 × 16 px olarak hazırlayıp ana dosyayı silmeyin.

Örneğin:

veya vektörel bir ana tasarım saklanabilir.

Daha sonra ihtiyaç duyulan:

- 16 × 16

- 32 × 32

- 48 × 48

- 180 × 180

- 192 × 192

- 512 × 512

gibi sürümler bu ana kaynaktan üretilebilir.

Bu yöntem küçük bir görseli daha sonra büyütmeye çalışmaktan daha sağlıklıdır.

En sık görülen hatalar:

- Uzun marka adını favicon'a sıkıştırmak

- Çok fazla detay kullanmak

- Yalnızca tek küçük dosya saklamak

- En-boy oranını bozmak

- Koyu ve açık temayı test etmemek

- Yanlış dosya yolunu kullanmak

- Eski favicon önbelleğini hesaba katmamak

- Ana kaynak dosyayı saklamamak

şeklinde sıralanabilir.

Basit bir web sitesi için başlangıç noktası olarak:

- 16 × 16 px

- 32 × 32 px

- favicon.ico

- 180 × 180 px Apple Touch Icon

hazırlanabilir.

Web uygulaması özellikleri kullanılıyorsa buna:

- 192 × 192 px

- 512 × 512 px

ikonlar eklenebilir.

Projenin ihtiyaçlarına göre daha farklı boyutlar da kullanılabilir.

Kısacası: Favicon, web sitesinin küçük ama önemli marka öğelerinden biridir. Yalnızca büyük logoyu küçültmek yerine küçük boyutlarda kolay tanınabilecek sade bir sembol hazırlanmalıdır. 16 × 16 ve 32 × 32 px klasik favicon kullanımları için önemli ölçülerken, 180 × 180, 192 × 192 ve 512 × 512 px gibi daha büyük sürümler mobil cihazlar ve web uygulamaları gibi farklı kullanım alanları için hazırlanabilir.