Favicon oluşturucu — bir sitenin ihtiyaç duyduğu tüm boyutlar
Bir görsel verin; favicon.ico, apple-touch-icon, manifest simgeleri ve yapıştırılacak etiketler çıksın.
Dosyaları buraya bırakın
veya cihazınızdan seçmek için tıklayınKabul edilen: JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP, HEIC, HEIF, SVG
Her işlemde bir dosyaDosya başına en fazla 20 MBGünde 5 işlemPro ile sınırları kaldırın✓ Çevrimdışı çalışır
Dosyalarınız cihazınızda kalır
Bu araç tamamen tarayıcınızda çalışır. Hiçbir şey yüklenmez, hiçbir şey saklanmaz; hatta başlamadan önce internet bağlantınızı kapatabilirsiniz.
Örnek
Örnek: balkon bahçesi bloguna 1024 × 1024’lük bir yaprak PNG’sinden yedi dosya
Balkonda sebze yetiştirmeyi anlatan küçük bir blogun logosu 1024 × 1024 piksellik bir PNG: saydam zeminde, ortada sade yeşil bir yaprak. Ayarlar: Yerleşim «Görselin tamamı», Kenar boşluğu %10, Şekil «Yuvarlak köşeler», Arka plan Beyaz, Site adı «Balkon Bahçem».
- Her kenarda %10 boşluk kalınca görsel her simgenin %80’ini kaplar: 16 px’in 12,8’ini, 180 px’in 144’ünü, 512 px’in 409,6’sını.
- «Favicon oluştur»a basın ve yedi dosyalık ZIP’i indirin.
- Dosyaları sitenin kök dizinine koyun, favicon-tags.html’deki dört satırı her sayfanın head bölümüne yapıştırın.
| Dosya | Piksel | Görselin boyu (px) | Kim kullanır |
|---|---|---|---|
| favicon.ico | 16, 32 ve 48 | 12,8 / 25,6 / 38,4 | Sekmeler, yer imleri, /favicon.ico isteyen her şey |
| favicon-96x96.png | 96 | 76,8 | Arama sonuçları (48’in katı) |
| apple-touch-icon.png | 180 | 144 | iPhone ve iPad ana ekranı: dolu beyaz kare |
| web-app-manifest-192x192.png | 192 | 153,6 | Android |
| web-app-manifest-512x512.png | 512 | 409,6 | Android ve yüklenmiş web uygulaması |
| site.webmanifest | – | – | Ad «Balkon Bahçem», kısa ad «Balkon», iki simge, renk #ffffff |
| favicon-tags.html | – | – | head bölümü için dört satır |
Yaprak, köşeleri yuvarlak beyaz karelerin üstünde; Apple simgesi düz beyaz bir karedir, çünkü köşeleri iOS kendisi yuvarlatır. Logo PNG olduğu için favicon.svg yok. Ana ekranda 12 karakter kadar yer var: 13 karakterlik «Balkon Bahçem» son boşluktan kesilip «Balkon» olur, «Yeşil Balkon» gibi 12 karakterlik bir ad bütün kalır.
Nasıl çalışır
- Logonuzu ekleyin: en iyisi kare bir SVG; yoksa en az 512 × 512 px bir PNG ya da JPG.
- Karenin içine nasıl yerleşeceğini (isteğe bağlı boşlukla görselin tamamı ya da kareyi doldurarak), şeklini ve arka planını seçin.
- “Favicon oluştur”a basın ve hepsini tek bir ZIP olarak indirin.
- Dosyaları sitenizin kök dizinine koyun ve favicon-tags.html içindeki etiketleri sayfalarınızın <head> bölümüne yapıştırın.
Sık sorulan sorular
- Favicon boyutu ne olmalı?
- favicon.ico 16 × 16, 32 × 32 ve 48 × 48 pikseli tek dosyada taşır; Apple cihazlar 180 × 180 bir PNG, Android ve web uygulamaları 192 × 192 ile 512 × 512 kullanır. Google arama sonuçlarında simgeyi 48 × 48 ya da onun bir katı olarak ister; buradaki 96 px dosya bunun içindir. Bu oluşturucu hepsini tek bir görselden hazırlar.
- Hangi dosyaları alırım, her biri ne işe yarar?
- favicon.ico 16, 32 ve 48 px’i tek dosyada toplar; doğrudan /favicon.ico isteyen tarayıcılar ve tarayıcı botları içindir. favicon-96x96.png arama sonuçları içindir; Google 48’in katı bir boyut ister. apple-touch-icon.png (180 px) iPhone ve iPad ana ekran simgesidir. İki web-app-manifest PNG’si ve site.webmanifest Android ve yüklenmiş web uygulamaları içindir. SVG ile başlarsanız favicon.svg de eklenir; favicon-tags.html ise <head>’e yapıştırılacak satırları içerir.
- Saydam arka plan seçtim. apple-touch-icon neden saydam değil?
- Çünkü iOS ana ekranda saydamlığı göstermez: saydam pikselleri siyaha boyar ve köşeleri kendisi yuvarlatır. Bu yüzden bu dosya her zaman seçtiğiniz arka planla (saydam seçtiyseniz beyazla) dolu, opak bir karedir. Diğer simgeler saydam kalır.
- SVG ile mi başlamalıyım, PNG ile mi?
- Elinizde varsa SVG ile. Her boyut vektörden çizilir; 16 px simge büyük bir görselden küçültülmez, 16 px olarak çizilir. Ayrıca modern tarayıcıların tercih ettiği favicon.svg de oluşur. PNG ya da JPG kullanacaksanız en az 512 × 512 px olsun; çok ayrıntılı bir logo 16 px’te zaten seçilmez, kenar boşluğu ve daha sade bir işaret bunun için var.
- Site adı ne işe yarar, neden kısalıyor?
- Ad yalnızca site.webmanifest’e yazılır: Android’de ve yüklenmiş web uygulamasında simgenin altında görünür. Ana ekran yaklaşık 12 karakter gösterdiği için kısa ad 12 karakteri geçmez; daha uzun bir ad son boşluktan kesilir. Boş bırakırsanız manifestte ad olmaz.
- Logom yükleniyor mu?
- Hayır. Her dosya bu sayfada tarayıcınızın canvas’ı ile çizilir, ZIP de burada hazırlanır. Hiçbir şey bir sunucuya gönderilmez.