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

Favicon, tarayıcı sekmesindeki, yer imlerindeki, iPhone ana ekranındaki ve Google arama sonuçlarındaki küçük ikondur. Bunu doğru yapmak eskiden düzinelerce boyutla uğraşmak demekti; bugün dört dosya tüm platformları kapsıyor.

Gerçekten ihtiyacınız olan dosyalar

favicon.ico — 16, 32 ve 48 px içerir; eski tarayıcılar, Windows kısayolları, Google'ın tarayıcı robotu için.
apple-touch-icon.png — 180 px; iOS ana ekranı için.
icon-192.png ve icon-512.png — Android ve web uygulama manifestosu için (yüklenebilir siteler, açılış ekranları).
site.webmanifest — bu iki PNG'ye işaret eder.

Hepsini üretin

Kare bir logo çizin. Basit şekiller ve bir-iki renk 16 px'te en iyi okunur; yazı okunmaz.
Favicon oluşturucu'yu açın ve logoyu bırakın — SVG idealdir çünkü her boyut keskin şekilde rasterize edilir; 512 px'lik bir PNG de işe yarar.
ZIP'i indirin ve dosyaları sitenizin köküne kopyalayın.

Favicon oluşturucuPNG, JPG, WebP veya SVG'den favicon.ico (16/32/48), apple-touch-icon ve PNG simgeler oluşturun. Tüm boyutlar tek ZIP'te, tarayıcınızda üretilir.

Bunu <head> etiketinize ekleyin:

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

<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">

Sık karşılaşılan sorunlar

Logo kare değil. Oluşturucu onu saydam boşlukla ortalar; daha sıkı bir ikon için önce Resim kırp ile kareye kırpın.
Eski favicon hâlâ görünüyor. Tarayıcılar favicon'ları agresif şekilde önbelleğe alır. Dosya adını değiştirin veya linke ?v=2 ekleyin.
Koyu sekmeler. Siyah bir logo koyu tarayıcı temasında kaybolur. Ona dolu bir arka plan şekli verin.

SVG'yi PNG'ye dönüştür onlineSVG vektör dosyalarını tarayıcınızda istediğiniz boyutta PNG'ye dönüştürün. Genişliği ayarlayın, saydamlığı koruyun, toplu çevirin, ZIP indirin.

Yayınlandı: 2026-09-21