Favicon oluşturma: resimden, metinden veya emojiden
Favicon oluşturma doğrudan tarayıcıda: harf, emoji veya logonuzu seçin, renk ve şekli ayarlayın, hepsini ZIP olarak indirin: favicon.ico, tüm PNG boyutları, site.webmanifest ve uygun HTML kodu. Her şey tarayıcınızda oluşturulur.
Nasıl hesaplanır?
Favicon; tarayıcı sekmesinde, yer imlerinde, geçmişte ve Google arama sonuçlarında sitenizin yanında görünen küçük simgedir. Bu favicon oluşturma aracı bir resmi, bir ila üç harfi veya bir emojiyi bugün bir web sitesinin ihtiyaç duyduğu tüm dosyalara – ve bunlara uygun HTML koduna – dönüştürür.
Hangi dosyalar ve boyutlar?
| Dosya | Boyut | Kullanım |
|---|---|---|
| favicon.ico | 16, 32, 48 px | klasik favicon; tarayıcılar HTML etiketi olmasa bile /favicon.ico dosyasını ister |
| favicon-16x16.png, favicon-32x32.png | 16 ve 32 px | tarayıcı sekmesi, normal ve yüksek çözünürlük |
| apple-touch-icon.png | 180 px | siteniz iPhone veya iPad ana ekranına eklendiğinde görünen simge |
| android-chrome-192x192.png, -512x512.png | 192 ve 512 px | web uygulaması manifesti: Android/Chrome’da ana ekran ve açılış ekranı |
| site.webmanifest | – | yüklenebilir web uygulaması olarak sitenizin adı, renkleri ve simgeleri |
Arama sonuçlarındaki favicon için Google en az 8 × 8 piksel boyutunda kare bir resim ister ve 48 × 48 pikselden büyük olmasını önerir. Chrome manifestte 192 ve 512 piksellik simgeler bekler, Apple ise iPhone ana ekran simgesi için 180 × 180 piksel belirtir.
Favicon siteye nasıl eklenir?
- ZIP dosyasını indirin ve açın.
- Tüm dosyaları web sitenizin kök klasörüne (ana sayfanın bulunduğu yere) yükleyin.
- HTML kodunu her sayfanın
<head>bölümüne yapıştırın (WordPress, Wix, Squarespace ve benzerlerinde bunun yerine genellikle bir „Site simgesi” ayarı vardır).
Dosyalar bir alt klasördeyse bunu „Sunucudaki klasör” alanına yazın – manifest ve HTML otomatik olarak uyarlanır. Tarayıcılar faviconları inatla önbellekte tutar; yeni simge çoğu zaman ancak önbellek temizlenince veya gizli pencerede görünür.
İyi bir favicon nasıl olmalı?
- Sade: 16 × 16 pikselde ayrıntılar kaybolur. Bir harf, bir sembol veya logonuzun simge kısmı, tam bir yazı logosundan daha iyi sonuç verir.
- Kontrastlı: simge açık ve koyu tarayıcı sekmelerinde tanınabilir olmalı. Renkli arka plan üzerinde açık renkli bir karakter güvenli seçimdir.
- Kare: kare olmayan logolar burada ya ortadan kırpılır ya da kenar boşluğuyla sığdırılır.
Favicon olarak emoji – lisansa dikkat
Emoji, cihazınızda yüklü emoji yazı tipiyle çizilir – bu yüzden iPhone’da Windows veya Android’dekinden farklı görünür. Unicode standardı yalnızca hangi karakterin kastedildiğini belirler, nasıl göründüğünü değil. Çizimler yazı tipi üreticisine (ör. Apple, Microsoft, Google) aittir ve lisansları bu görsellerin bir web sitesinde logo veya favicon olarak kullanılmasına doğrudan izin vermez.
Kişisel bir sayfa için risk düşüktür; ticari bir web sitesi için açık lisanslı bir emoji seti kullanın ve koşullarına uyun:
- Twemoji (aslen Twitter’a ait): grafikler CC BY 4.0 lisanslı – kaynak gösterilmesi gerekir. Kaynak: github.com/jdecked/twemoji
- Noto Emoji (Google): yazı tipi SIL Open Font License 1.1, görseller ve araçlar Apache 2.0 lisanslı. Kaynak: github.com/googlefonts/noto-emoji
İstediğiniz emojiyi oradan PNG veya SVG olarak indirin ve burada „Resim / logo”yu seçin. Bu genel bir bilgidir, hukuki tavsiye değildir.
Gizlilik
Tüm dosyalar tarayıcınızda oluşturulur. Resminiz yüklenmez ve hiçbir şey kaydedilmez. Logoyu hazırlamak için resim formatı değiştirme ve resim boyutu değiştirme araçları işinize yarar.
Sıkça sorulan sorular
Favicon boyutu kaç piksel olmalı?
Tarayıcı sekmesi için 16 × 16 ve 32 × 32 piksel, Google için en az 48 × 48 (kare), Apple cihazları için 180 × 180, Android ve web uygulamaları için 192 × 192 ile 512 × 512 piksel. Araç tüm boyutları tek seferde oluşturur.
favicon.ico hâlâ gerekli mi?
Bulundurmaya değer: birçok tarayıcı, RSS okuyucu ve araç HTML etiketi olmadan doğrudan /favicon.ico dosyasını ister. Buradaki ICO dosyası 16, 32 ve 48 piksellik PNG görüntüler içerir.
Favicon web sitesine nasıl eklenir?
Dosyaları sitenizin kök klasörüne yükleyin ve HTML kodunu <head> bölümüne yapıştırın. WordPress’te „Görünüm → Özelleştir → Site Kimliği → Site Simgesi” üzerinden 512 px PNG dosyasını da kullanabilirsiniz.
Emoji favicon olarak kullanılabilir mi?
Apple, Microsoft veya Google’ın emoji çizimleri bu şirketlere aittir. Ticari siteler için Twemoji (CC BY 4.0, kaynak göstererek) veya Noto Emoji (OFL 1.1) gibi açık lisanslı bir set kullanın ve o resmi buraya yükleyin.
Yeni faviconumu neden göremiyorum?
Tarayıcılar faviconları uzun süre önbellekte tutar. Sayfayı gizli pencerede açın veya önbelleği temizleyin. Google arama sonuçlarında güncelleme günler ile haftalar sürebilir.
Logom bir yere yükleniyor mu?
Hayır. Tüm dosyalar tarayıcınızda oluşturulur; resminiz cihazınızdan hiç çıkmaz.
Kaynaklar ve yasal dayanak
- Google Search Central – Define a favicon to show in search results
- web.dev – Add a web app manifest (icons 192 × 192 and 512 × 512)
- MDN – Web app manifest: icons
- W3C – Web Application Manifest
- Apple – Human Interface Guidelines: App icons (iPhone 180 × 180 px)
- Apple – Safari Web Content Guide: Configuring Web Applications (apple-touch-icon)
- Microsoft Learn – Icons (ICO file format: ICONDIR, ICONDIRENTRY)
- Unicode Technical Standard #51 – Unicode Emoji
- Twemoji – graphics licensed CC BY 4.0
- Noto Emoji – font licensed SIL OFL 1.1
- Open-source licenses of the libraries used (MIT, LGPL-3.0)
Güncelleme:
Benzer araçlar
- Resim boyutu değiştirmeResim boyutu değiştirme: fotoğrafları piksel veya yüzdeyle yeniden boyutlandırın, oranı koruyun veya kırpın; Instagram ve YouTube şablonları. Yükleme yok.
- Resim formatı değiştirme: JPG, PNG, WebP, AVIFResimleri yüklemeden dönüştürün: PNG’den JPG’ye, JPG’den PNG’ye, WebP’den JPG’ye, HEIC’ten JPG’ye veya AVIF’e – tek seferde 20 resim, ZIP indirme. Ücretsiz.
- QR kod oluşturucu – ücretsiz ve süresizLink, Wi-Fi, kişi kartı (vCard), e-posta, telefon veya SMS için QR kod oluşturun. Renk seçin, PNG veya SVG indirin. Ücretsiz, üyeliksiz, süresi dolmaz.
- Fotoğrafa filigran eklemeFotoğrafa online filigran ekleme: yazı veya logo, opaklık, döndürme, 9 konum ya da döşeme. Tek seferde 20 görsel, ZIP indirme, yükleme yok. Ücretsiz.
- Renk paleti oluşturucuRenk paleti oluşturucu: tek bir ana renkten uyumlu renkler bulun – tamamlayıcı, analog, üçlü, kare, ayrık tamamlayıcı, tek renkli; HEX, RGB, HSL kodlarıyla.
- Renk kontrastı kontrolü (WCAG 2.2)Metin ve arka plan renkleri arasındaki renk kontrastını kontrol edin: normal metin, büyük metin ve arayüz öğeleri için AA/AAA değerlendirmeli WCAG 2.2 oranı.