<link rel="icon" href="/favicon.ico" sizes="48x48"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#00805b">
Favicon ayarları
Önizleme anında güncellenir
Kaynak
Zemin
Şekil
Site adı (manifest için)
Tema rengi
favicon.ico (16/32/48), 16 ve 32 px PNG, apple-touch-icon, Android 192/512, site.webmanifest, HTML etiketleri.
Nasıl Yapılır?
- 1
Kaynağı seçin
Logonuzu ya da bir görseli yükleyin (PNG, JPG, WebP, SVG) veya 1-3 harf ya da bir emoji seçin.
- 2
Görünümü ayarlayın
Zemin rengi ya da saydam zemin, kare/yuvarlak köşe/daire şekil ve kenar boşluğunu seçin; sekme ve ana ekran önizlemesi anında güncellenir.
- 3
Paketi indirin
favicon.ico, PNG faviconlar, Apple ve Android ikonları ile site.webmanifest dosyasını tek ZIP olarak indirin.
- 4
Sitenize ekleyin
Dosyaları sitenizin kök klasörüne yükleyin ve kopyaladığınız HTML etiketlerini sayfanın <head> bölümüne yapıştırın.
Özellikler
- ✓Görselden, logodan (SVG dahil), metinden ya da emojiden favicon
- ✓favicon.ico içinde 16, 32 ve 48 px (her okuyucuda açılan klasik biçim)
- ✓favicon-16x16 ve favicon-32x32 PNG
- ✓apple-touch-icon (180 px, iOS için dolu zemin)
- ✓Android 192 ve 512 px ikonlar + site.webmanifest
- ✓Kopyalanabilir HTML etiketleri
- ✓Kare, yuvarlak köşe ya da daire şekil, kenar boşluğu, saydam ya da renkli zemin
- ✓Açık/koyu tarayıcı sekmesi ve ana ekran önizlemesi
- ✓Görseliniz cihazınızda kalır
Sıkça Sorulan Sorular
Pakette hangi dosyalar var?
favicon.ico (16, 32 ve 48 px bir arada), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest ve HTML etiketlerini içeren favicon-html.txt.
Favicon'u siteme nasıl eklerim?
ZIP'teki dosyaları sitenizin kök klasörüne (alan adınızın hemen altına) yükleyin, ardından 'HTML'i kopyala' ile aldığınız etiketleri her sayfanın <head> bölümüne yapıştırın. WordPress gibi sistemlerde genellikle 'Site simgesi' ayarından 512 px PNG'yi yüklemeniz yeterlidir.
PNG'yi ICO'ya çevirmek için de kullanabilir miyim?
Evet. Görseli yükleyip 'Yalnızca ICO' düğmesine basmanız yeterli; 16, 32 ve 48 px boyutları tek bir favicon.ico dosyasında toplanır. Kenar boşluğunu sıfıra, zemini saydama alırsanız görsel olduğu gibi kullanılır.
Logom kare değilse ne olur?
'Sığdır' logonun tamamını kareye yerleştirir ve kalan alanı zeminle doldurur; 'Kapla' kareyi tamamen doldurur ve taşan kenarları kırpar. Küçük boyutlarda okunabilirlik için yalnızca logonun simge kısmını kullanmak genellikle daha iyi sonuç verir.
Neden iPhone ikonu saydam değil?
iOS ana ekran ikonlarında saydam alanları siyah gösterir ve köşeleri kendisi yuvarlar. Bu yüzden apple-touch-icon her zaman kare ve dolu zeminle üretilir; saydam zemin seçtiyseniz beyaz kullanılır.
16 px'te favicon'um bulanık görünüyor, ne yapmalıyım?
16 px çok küçük bir alan; ince çizgiler ve uzun yazılar kaybolur. Kenar boşluğunu azaltın, tek harf ya da sade bir simge kullanın ve zeminle yazı arasında güçlü kontrast seçin. Önizlemedeki tarayıcı sekmesi gerçek boyutu gösterir.