Her Yerde Çalışan Bir Favicon Seti 2026'da
Altı boyut, bir .ico, bir manifest — 2026'da her tarayıcıda, iOS ana ekranında ve Windows görev çubuğunda doğru görünen bir favicon göndermek için gerçekten ihtiyacınız olan her şey.
Favicon'lar önemsiz görünüyor. Bir tane gönderin ve yüzlerce uç durum ortaya çıkar: iOS ana ekran ikonu bulanık, Android chrome sekmesi yanlış renk, Windows pinler bulanık 16×16 gösterir. Bu kılavuz gürültüyü temizler ve 2026'da tam olarak ihtiyacınız olanı açıklar — ne daha fazla ne daha az.
Minimum Uygun Set
Altı varlık sitenizin ikonunu gösterecek her yüzeyi kapsar:
favicon.ico— içinde 16×16, 32×32, 48×48 bulunan çok boyutlu konteyner (eski tarayıcılar, Windows Explorer, sabitlenmiş sekmeler).favicon-16x16.png,favicon-32x32.png— modern tarayıcı sekmeleri.apple-touch-icon.png(180×180) — iOS ana ekran, Safari okuma listesi.android-chrome-192x192.png,android-chrome-512x512.png— Android ana ekran, PWA kurulum istemleri.site.webmanifest— Android ikonlarını işaret eden ve tema rengini tanımlayan PWA yapılandırması.
Hepsi bu. Geri kalan her şey (Safari sabitlenmiş sekme SVG, eski Apple dokunma varyantları, Windows karo görüntüleri) mirastır. Modern tarayıcılar 192 veya 512 PNG'ye zarif bir şekilde geri döner.
Neden .ico 2026'da Hala Gönderiliyor
.ico dosyası, farklı boyutlarda birden fazla PNG görüntüsünü tutabilen bir ikili konteynerdir. Bir tarayıcı /favicon.ico istediğinde (bazıları hala varsayılan olarak bunu yapar), bir istekte üç boyutu da alır. Renderer mevcut yüzey için en uygun olanını seçer — Windows Explorer için 48×48, bir tarayıcı sekmesi için 16×16.
.ico olarak yeniden adlandırılan bir PNG yalnızca bir boyut içerir. Tarayıcılar hoşgörülü olduğu için çoğunlukla çalışır, ancak Windows Explorer ve bazı e-posta istemcileri ya bulanık olarak işler ya da görüntülemeyi reddederler. Tutarlılık istiyorsanız gerçek bir .ico gönderin.
site.webmanifest Ne Yapar
Bir kullanıcı sitenizi Android ana ekranına eklediğinde veya bunu bir PWA olarak yüklediğinde, tarayıcı yüklenen uygulamanın nasıl görünmesi gerektiğini bilmek için site.webmanifest okur. Şu özellikleri tanımlar:
name/short_name— ikonun altındaki etiket.icons— hangi PNG'lerin hangi boyutta kullanılacağı.theme_color— uygulama açıkken durum çubuğunun rengi.background_color— başlatma sırasında açılış ekranı arka planı.display— genellikle uygulamanın tarayıcı araç çubuğu olmadan açılması içinstandalone.
Manifest olmadan, Android apple-touch-icon öğesine geri döner ve sitenizi bir tarayıcı penceresi içinde gösterir. Onunla birlikte, yerel bir uygulamaya benzer.
HTML Kod Parçacığı
Her dosya web kök dizininde gider. Her site <head> içinde bu bloğa ihtiyaç duyar:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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="#YOUR_HEX">16×16 için Tasarım
Güzel ayrıntılı logonuz 16 piksel de ölür. O boyutta açık şekilde okunan bir favicon yapmak için kurallar:
- Bir şekil. Bir daire, bir kare veya güçlü bir monogram. Bileşik formlardan kaçının.
- Yüksek kontrast. Ön plan ve arka plan en az WCAG AA ayrılmış olmalıdır. Hafif degradeler kaybolur.
- Güvenli kenar boşluğu. %10–20 dolgu bırakın. Tarayıcılar genellikle kendi %1px kenarlıklarını eklerler.
- Metin? 16px'te tam bir sözcükten daha iyi tek kalın bir harf.
aukimi Favicon Oluşturucu, 30 saniyeden kısa bir sürede bir görüntü veya bir harften altı dosya ve HTML kod parçacığını oluşturur. Yeniden adlandırılan PNG değil, Microsoft ICONDIR spec'ine göre gerçek çok boyutlu .ico oluşturur. Yükleyin, boyutlarınızı seçin, zip'siz bir paketi indirin, kod parçacığını yapıştırın — bitti.
Sık Yapılan Hatalar
- Önbellek başlıkları olmadan CDN'den
.icosunmak. Tarayıcılar favicon'ları agresif bir şekilde önbelleğe alır. Yeniden tasarımdan sonra bir yenilemeyi zorlamak için sürümlü bir URL kullanın (?v=2). - Alt etki alanı başına farklı ikonlar. Tek bir
favicon.icoapeks'te, kullanıcıların genellikle beklediği şeydir — kimliğinizi bölmeyin. theme-colormeta'sını unutmak. Mobile Chrome, tarayıcı araç çubuğunu bu değerle eşleştirmek için tintler. Bunu atlamak sizi varsayılan gri ile bırakır.
İyi bir favicon en iyi şekilde sıkıcıdır — kullanıcılar eksik veya yanlış olduğunda fark ederler, doğru olduğunda asla fark etmezler. Altı dosyayı gönderin ve devam edin.
Bu makaleyi beğendiniz mi?
İlgili Makaleler
Yaratıcı Yığın Çöktü: Nisan Ayının Son Haftası, 2026 Yılı İçinde Sekiz Günlük AI Araçları
27 Nisan ile 4 Mayıs 2026 arasında, Adobe, Luma, Novi, fal, Figma, Canva, HeyGen ve Anthropic sekiz gün içinde aynı eşiği aştı. İşte neler yayınlandı, bunun anlamı ve tarayıcı tabanlı yaratıcı paketleri konsolide etmeye çalışan araçlar nereye kaldı.
2026'da AI Müzik ve SFX: İndie Oyun Sesinde Gerçekte Ne İşe Yarar
Üç yıl önce indie oyun sesi ya telif ücretsiz kütüphaneler (ucuz, jenerik, her oyun aynı ses) ya da besteci kiralama (harika, pahalı) anlamına geliyordu. 2026'da AI müzik üretir ve yayına gider. Hangi araçlar gerçekten işe yarar — ve insan bestecinin hala nerede kazandığını öğrenin.
2026'da Yapay Zeka Mesh Üretimi: Oyun Pipeline'larında Gerçekte Ne Yayınlanıyor
Image-to-3D, on sekiz ayda "tuhaf demo"dan "bağımsız projelerde yayınlanıyor" haline geldi. Tripo, Meshy, Rodin ve Hyper3D'nin üretimde gerçekte ne yaptığı — ve 3D sanatçısının her zaman modeli yendiği yerler.