Türkçe
Bir görsel, metin veya emojiden favicon oluşturun — tüm boyutlar ve yapıştırılacak HTML.
Son güncelleme
#5B8DEF#FFFFFF<link rel="icon" href="/favicon.ico" sizes="any" /> <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="application-name" content="Coddy" />
Bir *favicon*, biri sitene yer imi eklediğinde veya iOS / Android ana ekranına kaydettiğinde tarayıcı sekmelerinde, yer imlerinde ve geçmiş listelerinde görünen küçük simgedir. Küçük bir şey gibi görünse de bir projenin nasıl hissettirdiği üzerinde şaşırtıcı derecede büyük bir etkisi vardır: gerçek bir favicon yayınlamak, yer tutucu bir kare ile bitmiş bir ürün arasındaki farktır.
Modern tarayıcılar favicon'u birkaç farklı boyut ve formatta ister. Sekme ve yer imi simgeleri 16×16 veya 32×32 bir PNG ister. iOS Safari 180×180 bir apple-touch-icon.png ister. Android'in Ana Ekrana Ekle özelliği bir web manifest içinde 192×192 ve 512×512 ister. Eski tarayıcılar ve bazı entegrasyonlar hâlâ çok çözünürlüklü bir favicon.ico bekler. Bunların hepsini tek tek elle kırpmak ciddi bir uğraştır — favicon oluşturucu bunu tek tıkla yapar.
Bu oluşturucu tamamen tarayıcında çalışır. Yüklediğin görsel yerel olarak bir <canvas> üzerinde çözülür, her çıktı boyutu onun yanında render edilir ve tüm paket (PNG'ler, ICO, web manifest, README ve HTML kod parçası) hiçbir şey yüklemeden bir .zip haline getirilir.
favicon.ico, birkaç boyutu (16, 32, 48) bir araya getirebilen bir konteyner formatıdır; böylece eski çağıranlar her zaman ihtiyaç duydukları boyutu bulur.apple-touch-icon.png ve manifest.webmanifest içindeki girdiler) — ikisinin de mevcut olması gerekir.1-3 karakterlik bir monogram için **Metin**, tek glyph'lik bir simge için **Emoji**, bir PNG, JPEG veya SVG bırakmak için **Görsel** kullan. Zaten bir logon varsa Görsel modu en iyi başlangıç noktasıdır.
Bir arka plan rengi seç (monogramlar için bir de metin rengi). **Kare**, **Yuvarlatılmış** veya **Daire** seç — yuvarlatılmış kareler, iOS'un ana ekran simgelerini nasıl kırptığıyla eşleşir, bu yüzden doğal hissedilir.
Site adı, application-name meta etiketi ve PWA manifest.webmanifest short_name değeri haline gelir. Kullanıcıların bir tarayıcı yer iminde göreceği marka adını kullan.
Önizleme satırını kaydırarak simgenin 16px ve 32px'te (sekmelerin yaşadığı yerde) hâlâ okunabilir olduğundan emin ol. Tasarım o kadar küçükte okunaklılığını kaybediyorsa kaynağı sadeleştir — daha az karakter veya daha sıkı bir kırpma kullan.
Her çıktı dosyasını bir kerede almak için **Favicon paketini indir (.zip)** butonuna tıkla. Dosyaları sitenin kök dizinine bırak, ardından HTML kod parçasını <head> içine yapıştır — işin bitti.
Her indirme aşağıdaki dosyaları içerir. HTML kod parçası bunları birbirine bağlar — yalnızca bir alt kümeye ihtiyacın varsa desteklediğin platformlarla eşleşenleri tut.
| Dosya | Boyut | Kullanan | Notlar |
|---|---|---|---|
favicon.ico | 16, 32, 48 | Tarayıcı sekmeleri (eski sistem yedeği) | Çok çözünürlüklü ICO konteyneri — her tarayıcı hâlâ bu URL'i ister. |
favicon-16x16.png | 16×16 | Tarayıcı sekme simgesi | <link rel="icon" sizes="16x16"> aracılığıyla yüksek DPI ekranlarda kullanılır. |
favicon-32x32.png | 32×32 | Tarayıcı sekmesi + yer imleri | Retina ekranlardaki ana sekme simgesi. |
favicon-48x48.png | 48×48 | Windows site tile'ı, görev çubuğu | Eski çağıranlar için favicon.ico içine de paketlenir. |
apple-touch-icon.png | 180×180 | iOS Safari Ana Ekrana Ekle | Bu yoksa iOS, sayfanın bir ekran görüntüsüne fallback yapar — bunu mutlaka yayınla. |
android-chrome-192x192.png | 192×192 | Android ana ekranı | manifest.webmanifest üzerinden referans verilir. |
android-chrome-512x512.png | 512×512 | PWA yükleme isteği + splash | Yüklenebilir PWA'lar için zorunludur. |
site.webmanifest | — | PWA yükleme metadata'sı | Simgeleri, adı, tema rengini listeler. <link rel="manifest"> ile bağlanır. |
1-3 harf yaz (örneğin **Co**, **C** veya **JS**), bir marka rengi seç ve iOS'a uygun bir silüet için **Yuvarlatılmış**'ı seç.
Monogramlar 16px'te en okunaklı olanlardır çünkü kaybedilecek detay yoktur. Kalın, büyük bir harf ya da sıkı iki harfli bir ikili kullan; metin ve arka plan renklerini yüksek kontrastta tut.
Projenin tarzına uygun bir emoji seç — bir lansman için 🚀, bir deney için 🧪, dokümanlar için 📚. Nötr bir arka plan ayarla.
Emoji favicon'lar kişisel siteler, hackathon'lar ve yan projeler için samimi bir his verir. Aynı emoji'nin macOS'ta (Apple) ve Windows'ta (Segoe) farklı göründüğünü unutma — dışa aktardıktan sonra paket, önizlemede gördüğün macOS / Linux / Chrome görünümünü dondurur.
Logonun bir PNG veya SVG'sini bırak, sanat eserinin kenarlara değmemesi için **Padding** kaydırıcısını artır ve logonda şeffaf kenarlar varsa **Arka plan rengini doldur** seçeneğini aç.
SVG girdiler her boyutta net şekilde render edilir. PNG girdiler de işe yarar, ama kendi çözünürlüklerinin ötesinde bulanıklaşırlar — en az 512×512 olan bir kaynaktan başla.
apple-touch-icon.png'yi unutmak. Apple touch icon tanımlı değilse iOS, sayfanın bir ekran görüntüsüne fallback yapar — ki bu genelde berbat görünür.<link rel="icon" href="/images/favicon.ico"> ile bağlamak. Bu çalışır, ama tarayıcılar yine de sitenin kökünde /favicon.ico'yu ararlar. Ya kök dizine de bir kopya koy ya da erişim loglarındaki 404'leri kabullen.favicon.ico (16/32/48), 32×32 bir PNG, iOS için 180×180 apple-touch-icon.png ve Android ile yüklenebilir PWA'lar için bir site.webmanifest'te bildirilen 192×192 ve 512×512 PNG'ler. Bu aracın indirdiği paket bunların hepsini içerir.<link rel="icon" type="image/png"> ile PNG favicon'ları destekler. Hepsi ayrıca eski sistem /favicon.ico URL'sini de destekler. SVG favicon'lar modern tarayıcılarda desteklenir ve tek bir dosyanın her boyutta net şekilde ölçeklenmesine olanak tanır — logon zaten vektörse harikadırlar, ama iOS Safari hâlâ PNG fallback'e ihtiyaç duyar.Cmd/Ctrl + Shift + R), DevTools'ta site verilerini temizle veya favicon URL'sine bir query string ekle (/favicon.ico?v=2). Sitenin önünde bir CDN varsa onun da temizlenmesi gerekir genelde./apple-touch-icon.png adresinde bulunur. Paket onu içerir.<canvas> kullanılarak çözülür ve her çıktı (PNG'ler, ICO, ZIP, manifest) yerel olarak üretilir. Hiçbir şey makinenden çıkmaz.