Web siteniz için favicon nasıl oluşturulur

Favicon; tarayıcı sekmesindeki, yer imleri çubuğundaki, geçmiş listesindeki, iPhone ana ekranındaki ve arama sonuçlarında sitenizin adının yanındaki küçük ikondur. Yirmi sekme açık olan bir ziyaretçinin markanızdan gördüğü tek parça çoğu zaman odur. Bunu doğru yapmak eskiden düzinelerce boyutla uğraşmak demekti. Bugün bir avuç dosya önemli olan tüm platformları kapsıyor.

Bu rehber ne üretmeniz gerektiğini, 16 piksele dayanan bir ikonun nasıl tasarlanacağını, nasıl kurulacağını ve en yaygın sorunların nasıl teşhis edileceğini anlatıyor.

Modern bir sitenin ihtiyaç duyduğu dosyalar

• favicon.ico, içinde 16, 32 ve 48 px görüntülerle. Tarayıcılar hiçbir HTML olmasa da /favicon.ico dosyasını kendiliğinden ister, Windows onu kısayollar için kullanır ve en güvenli yedektir.
• apple-touch-icon.png, 180×180 boyutunda. Biri siteyi iPhone ya da iPad'de ana ekrana eklediğinde kullanılır.
• icon-192.png ve icon-512.png. Android ana ekran ikonları ve yüklenmiş bir web uygulamasının açılış ekranı.
• site.webmanifest. İki Android ikonunu gösteren ve siteyi yüklenebilir yapmak istiyorsanız onu tanımlayan küçük bir JSON dosyası.
• İsteğe bağlı olarak icon.svg. SVG faviconları destekleyen tarayıcıların her boyutta keskin çizdiği ve karanlık mod için renk değiştirebilen tek bir vektör ikon.

Eski eğitimlerde görebileceğiniz diğer her şeye, örneğin düzinelerce PNG boyutuna ve tarayıcıya özel karo görsellerine, tipik bir site için artık gerek yok.

Seti tek bir logodan üretin

1. Kare bir kaynak hazırlayın. SVG idealdir; değilse en az 512×512 bir PNG.
2. Favicon oluşturucu'yu açın ve dosyayı bırakın. 20 MB'a kadar PNG, JPG, WebP ve SVG kabul edilir.
3. ZIP'i indirin. İçinde favicon.ico (16, 32 ve 48 px içerir), apple-touch-icon.png, icon-192.png, icon-512.png ve site.webmanifest bulunur.
4. Dosyaları sitenizin köküne, ana sayfanın yanına kopyalayın.

Her boyut doğrudan orijinalden çizilir; yani bir SVG büyük bir bitmap'ten küçültülmek yerine 16 px'de doğal olarak rasterleştirilir. Çizim tarayıcınızda yapılır; logo yüklenmez. Kare olmayan bir kaynak sığacak şekilde ölçeklenir ve ortalanır, kısa kenarlarda şeffaf boşluk kalır.

Oluşturucu icon.svg üretmez. SVG favicon istiyorsanız kendi SVG logonuzu bu adla site köküne kopyalayın.

HTML'i ekleyin

Bu satırları her sayfanın <head> bölümüne ya da ortak düzen şablonuna koyun:

<link rel="icon" href="/favicon.ico" sizes="32x32">

<link rel="icon" href="/icon.svg" type="image/svg+xml">

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="manifest" href="/site.webmanifest">

SVG'niz yoksa SVG satırını çıkarın. ICO satırındaki sizes="32x32" özniteliği bir SVG varken önemlidir: bazı tarayıcıların daha keskin SVG yerine ICO'yu seçmesini engeller.

Üretilen manifest ikonları /icon-192.png gibi mutlak yollarla listeler. Siteniz alan adının kökünde değil de bir alt klasörde duruyorsa bu yolları ona göre düzenleyin.

16 piksele dayanan bir ikon tasarlamak

16×16'da toplam 256 piksel vardır. Bundan fazlasına ihtiyaç duyan bir tasarımı hiçbir dışa aktarma ayarı kurtaramaz.

• Logoyu değil, işareti kullanın. Tek bir harf, bir monogram ya da yazı kısmı olmadan sembol. Kelimeler 32 px'in altında gri bir lekeye dönüşür.
• Kalın şekiller, az renk. İkon genişliğinin yaklaşık 1/16'sından ince çizgiler en küçük boyutta kaybolur. Güçlü kontrastlı iki renk en iyi okunur.
• Kareyi doldurun. Kaynaktaki boş kenar boşluklarını kırpın. Şeffaf boşlukta yüzen bir logo sekmede minicik kalır.
• İki sekme temasını da test edin. Sekme çubukları açık ya da koyu olabilir. Şeffaf arka plan üzerindeki siyah bir işaret koyu temada kaybolur. İşaretin arkasında yuvarlatılmış kare gibi düz renkli bir şekil her ikisinde de çalışır.

Logo genişse, üretmeden önce Resim kırp online ile 1:1 oranında sembolüne kadar kesin. Raster bir logo yalnızca küçük boyutta varsa, onu Yapay zeka ile görsel büyütme ile büyütmek 512 px'lik ikona düz germeye göre daha temiz kenarlar verir.

SVG favicon ile karanlık mod

Bir SVG favicon, prefers-color-scheme: dark için bir CSS medya sorgusu içerebilir ve tarayıcı koyu tema kullandığında dolgu rengini değiştirebilir. Bu, koyu sekmelerde kaybolan koyu bir işaret için en temiz çözümdür. Her tarayıcı SVG favicon kullanmadığı için ICO'yu yedek olarak tutun.

Başka boyutlarda PNG gerekiyorsa

Bazı platformlar, eklentiler ve uygulama mağazaları setin içermediği belirli bir PNG boyutu ister. SVG'yi PNG'ye dönüştür online, vektör logonuzu yazdığınız herhangi bir genişlikte, şeffaf arka planla çizer.

Bilinmesi gereken platform ayrıntıları

iPhone ana ekranı

iOS ana ekran ikonlarında şeffaflığı göstermez; şeffaf alanlar genellikle siyahla doldurulur ve köşeleri sistem yuvarlatır. Oluşturucu şeffaflığı koruduğu için Apple touch icon için düz arka plan renkli bir kaynak kullanın. Köşeleri kendiniz yuvarlatmayın.

Android ve yüklenebilir siteler

Android başlatıcıları ikonları daire ya da başka bir şekle kırpabilir. Siteyi bir uygulama olarak yüklenebilir yapmak için site.webmanifest dosyasını bir metin düzenleyicide açın ve en azından name, short_name, start_url, display (örneğin standalone) ve theme_color ekleyin. Bir ikonu "purpose": "maskable" olarak işaretlerseniz, kenarlar kesilebileceği için tasarımın önemli kısmını karenin ortadaki %80'lik alanında tutun.

Arama sonuçları

Google sonuçların yanında bir site ikonu gösterir. Yönergeleri, boyutu 48 px'in katı olan, ana sayfadan referans verilen ve taranabilir kare bir ikon ister. ICO'daki 48 px katmanı da 192 px'lik PNG de bu koşulu karşılar. İkon ana sayfa yeniden tarandığında yenilendiği için arama sonuçlarındaki değişikliklerin görünmesi günler ya da haftalar sürebilir.

Sorun giderme

• Eski favicon görünmeye devam ediyor. Tarayıcılar faviconları sayfadan ayrı olarak, agresif biçimde önbelleğe alır. /favicon.ico adresini doğrudan açıp yeniden yükleyin ya da ikon bağlantılarına ?v=2 gibi bir sürüm parametresi ekleyin.
• İkon boş ya da bozuk. Her dosyanın URL'sini tarayıcıda açın. 404 genellikle dosyaların site kökü yerine bir alt klasöre gittiği ya da sunucunun .webmanifest için doğru türe ihtiyaç duyduğu anlamına gelir.
• İkon sekmede bulanık görünüyor. 16 ve 32 px'lik sürümler detaylı bir kaynaktan geldi. Küçük boyutlar için sadeleştirilmiş bir sürüm hazırlayın.
• iPhone ana ekranında siyah bir kare. Kaynağın arka planı şeffaftı. Düz arka planlı bir sürümden yeniden üretin.
• Karenin ortasında ince bir çizgi. Kaynak geniş bir yazı logosuydu. Önce sembole kadar kırpın.

Kontrol listesi

1. Logoyu 16 px'de okunan ve açık ile koyu sekmelerde çalışan bir işarete sadeleştirin.
2. Kare yapın, ideal olarak SVG, değilse 512×512 veya daha büyük PNG.
3. Seti üretin ve tüm dosyaları site köküne kopyalayın.
4. Dört link etiketini head bölümüne ekleyin; icon.svg satırını yalnızca böyle bir dosyanız varsa ekleyin.
5. Site yüklenebilir olacaksa manifest'i tamamlayın.
6. Her dosyanın URL'sini doğrudan kontrol edin, ardından bir telefonun ana ekranında test edin.