Favicon ve Apple Touch Icon
Tarayıcı sekmelerinde ve ana ekranlarda görünen simgeler ekleyin
Favicon ve Apple Touch Icon, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
Site Simgesi Nedir
Site simgesi, şu yerlerde görünen küçük simgedir:
- Tarayıcı sekmeleri
- Yer imi listeleri
- Tarayıcı geçmişi
- Arama sonuçları (bazen)
Birden fazla açık sekme arasından sitenizi bir bakışta tanımanıza yardımcı olur.
Temel Site Simgesi Bağlantısı
head bölümündeki bir bağlantı öğesiyle site simgesi ekleyin:
<head>
<!-- SVG favicon (modern, scales at any size) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- Legacy ICO for Internet Explorer -->
<link rel="shortcut icon" href="/favicon.ico">
</head>Site Simgesi Biçimleri
Önerilen site simgesi biçimi stratejisi:
- SVG — vektörel, kusursuz ölçeklenir, dosya boyutu küçüktür (ilk olarak kullanın)
- PNG 32x32 — SVG'yi desteklemeyen tarayıcılar için yedek seçenek
- ICO — 16x16 ve 32x32 boyutlarını içeren eski biçim
ICO Dosyasının Konumu
Alan adının kökündeki favicon.ico dosyası otomatik olarak alınır:
<!-- Browsers request /favicon.ico automatically -->
<!-- Placing it at the domain root means no link tag is needed:
/favicon.ico -- served without any HTML link tag
-->
<!-- But: specifying it explicitly is better: -->
<link rel="icon" href="/favicon.ico" sizes="32x32">Boyutlar Özniteliği
sizes özniteliği simge boyutlarını belirtir:
<link rel="icon" href="/icon-16.png" sizes="16x16">
<link rel="icon" href="/icon-32.png" sizes="32x32">
<link rel="icon" href="/icon-64.png" sizes="64x64">Apple Touch Simgesi
Apple Touch simgesi, kullanıcılar sitenizi iOS ana ekranına eklediğinde görünür:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Recommended size: 180x180 px -->
<!-- Used by: iOS Safari, some Android browsers -->
<!-- Apple applies rounded corners and gloss effect automatically -->
<!-- Pre-composited icon (no transparency) looks best -->Android için Maskelenebilir Simgeler
Android PWA'leri, simge şeklini dolduran maskelenebilir simgeler kullanır:
<link rel="manifest" href="/manifest.json">
<!-- In manifest.json: -->
<!--
{
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
}
]
}
-->Karanlık Mod Site Simgesi
Karanlık moda uyum sağlayan bir SVG site simgesi sağlayın:
<!-- SVG favicon with dark mode support: -->
<!-- In /favicon.svg: -->
<!--
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
@media (prefers-color-scheme: dark) {
.icon-bg { fill: white; }
.icon-mark { fill: black; }
}
.icon-bg { fill: #0070f3; }
.icon-mark { fill: white; }
</style>
<circle class="icon-bg" cx="16" cy="16" r="16"/>
<text class="icon-mark" x="50%" y="60%">C</text>
</svg>
-->PWA Simgeleri için Web Uygulaması Bildirimi
Aşamalı Web Uygulamaları için eksiksiz simge kurulumu:
<link rel="manifest" href="/manifest.json">
<!-- manifest.json icons array: -->
<!--
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
-->Eksiksiz Site Simgesi Kurulumu
Eksiksiz ve modern bir site simgesi yapılandırması:
<head>
<!-- SVG: scales to any size, supports dark mode -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
<!-- Apple home screen -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- PWA manifest (for Android home screen) -->
<link rel="manifest" href="/manifest.json">
</head>Site Simgelerini Sınama
Site simgesi kurulumunu doğrulama:
- Önbelleğe alınmış site simgesini temizlemek için tam yeniden yükleme yapın (Ctrl+Shift+R / Cmd+Shift+R)
- Favicon Checker aracını kullanın (realfavicongenerator.net)
- Apple Touch simgesi için gerçek bir iOS cihazında sınayın
- Lighthouse → PWA denetimi ile PWA bildirimini denetleyin
Hızlı Kontrol
Apple Touch simgesi görselleri için önerilen boyut nedir?
Özet: site simgeleri
Site simgesinin temel özellikleri:
- SVG site simgesi — modern, ölçeklenebilir, karanlık moda uyumlu
- PNG 32x32 — SVG desteği olmayan tarayıcılar için yedek seçenek
- Kök dizindeki ICO — eski IE yedek seçeneği
apple-touch-icon180×180 — iOS ana ekranı- Web uygulaması bildirimi — Android PWA simgeleri (192px ve 512px)
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 40
- Dersler
- 159
Sıkça Sorulan Sorular
“Favicon ve Apple Touch Icon” dersi ücretsiz mi?
Evet — “Favicon ve Apple Touch Icon” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“Favicon ve Apple Touch Icon” dersinde ne öğreneceğim?
Tarayıcı sekmelerinde ve ana ekranlarda görünen simgeler ekleyin HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Favicon ve Apple Touch Icon” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- title ve SEO'daki Rolü
- meta charset viewport author ve description
- Kanonik URL'ler ve robots Metası
- Favicon ve Apple Touch Icon