Favicon Oluşturma – ICO, PNG ve Manifest

Logonu seç; tarayıcı sekmesi, telefon ana ekranı ve Android için gereken bütün ikonlar ile site.webmanifest tek ZIP'te hazırlanır. Görselin cihazından çıkmaz.

PNG girer, ICO çıkar
En fazla ⁦10 MB⁩
Üyeliksiz
Cihazında çalışır

36 Favicon Oluşturma

01 Seç
02 İşle
03 İndir

Cihazında işlenir · yükleme yok

PNG

Seçilen dosya

Boyut: Hazır

Canlı durum

Dosya okunuyor

Sonuç

Hazır.

0dosya ZIP'te

0 BSunucuya gönderilen verin: 0 bayt · işlem cihazında yapıldıNeden 0: bu sayfanın güvenlik kuralı veri göndermeyi tarayıcı düzeyinde engeller; işlem bu sekmede yapılır. CSP · connect-src 'none' · form-action 'none'

Dönüştürülemedi.

Arka plan

Şeffaf Renk

Biçim

Kare Yuvarlak köşe Daire

Kenar boşluğu Uygulama adı (manifest)

Çok ince ayrıntılar 16 pikselde kaybolabilir; sade bir işaret küçük boyutta daha iyi okunur.

İşlem bu sekmede, cihazında yapılır.
ICO, PNG'ler, manifest ve HTML satırları tek ZIP'te gelir.
Hiçbir dosya sunucumuza gönderilmez; sekmeyi kapatınca her şey silinir.

Önce bir logo seç

Aşamalar

Dosya okunuyor
İkonlar çiziliyor
Dosya hazırlanıyor

Sırada ne var?

Görseli küçült

Dosyan cihazından çıkmaz
Sunucuya yükleme yok
Ücretsiz, üyeliksiz

Bir sitenin hangi favicon dosyalarına ihtiyacı var?

Favicon, tarayıcı sekmesinde, yer imlerinde ve arama sonuçlarında sitenin adının yanında görünen küçük ikondur. Tek bir dosya yetmez: eski ve yeni tarayıcılar favicon.ico'yu, iPhone ve iPad ana ekrana eklenen siteler için 180 piksellik apple-touch-icon'u, Android ve kurulabilir web uygulamaları da 192 ve 512 piksellik ikonları ile site.webmanifest dosyasını arar.

Küçük boyutlar en zor olanıdır: 16 piksele küçültülen bir logo bulanıklaşabilir ya da ince ayrıntılarını kaybedebilir. iPhone ana ekranında şeffaf alanlar siyah görünür; bu yüzden apple-touch-icon'un düz bir arka planı olması gerekir.

Bu araç logonu (PNG, SVG, JPG ya da WEBP) bir kez 1024 pikselde çizer ve her boyuta yarıya inerek küçültür, böylece küçük ikonlar keskin kalır. Arka plan rengi, kenar boşluğu ve kare, yuvarlak köşe ya da daire biçimi seçebilir, sonucu tarayıcı sekmesi ve telefon ana ekranı önizlemesinde görebilirsin. favicon.ico, PNG'ler, site.webmanifest ve sayfana ekleyeceğin HTML satırları tek ZIP'te gelir. Görsel tarayıcında işlenir.

Favicon setini 3 adımda hazırlama

Logonu seç: Kare ya da kareye yakın bir PNG, SVG, JPG veya WEBP dosyası seç (en fazla 10 MB). En iyi sonucu SVG ya da en az 512 piksellik PNG verir.
Görünümü ayarla: Arka planı şeffaf bırak ya da bir renk seç; kenar boşluğunu ve kare, yuvarlak köşe ya da daire biçimini belirle. Sekme, ana ekran ve büyük ikon önizlemesi anında güncellenir.
ZIP'i indir: “Favicon setini oluştur” bütün dosyaları tek ZIP olarak verir. Dosyaları sitenin kök klasörüne koy ve HTML satırlarını sayfanın <head> bölümüne yapıştır.

Kimin işine yarar?

Web siteleri ve bloglar: Yeni bir site için sekmede ve yer imlerinde görünen ikonu hazırlamak.
E-ticaret mağazaları: Mağaza logosunu tarayıcı sekmesi, arama sonucu ve telefon ana ekranı için uygun boyutlara getirmek.
Web uygulamaları: Kurulabilir web uygulaması (PWA) için 192 ve 512 piksellik ikonları ve manifest dosyasını üretmek.
Ajanslar ve tasarımcılar: Müşteri logosundan eksiksiz favicon setini dakikalar içinde teslim etmek.
Geliştiriciler: Projeye eklenecek dosyaları ve <head> satırlarını hazır almak.
Kişisel sayfalar: Portföy ya da özgeçmiş sitesine baş harflerden oluşan bir ikon eklemek.

Boyutlar, kalite ve sınırlar

Üretilen dosyalar: favicon.ico (16, 32 ve 48 piksel), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 piksel), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest ve HTML satırları. SVG verdiysen favicon.svg de eklenir.
Keskinlik: Görsel önce 1024 pikselde çizilir, sonra her adımda yarıya inerek küçültülür; bu yöntem tek seferde küçültmeye göre daha keskin küçük ikonlar verir. Çok ince çizgiler 16 pikselde yine kaybolabilir; o boyut için sade bir işaret daha iyi okunur.
Şeffaflık: PNG ve ICO şeffaflığı korur. apple-touch-icon iPhone'da siyah görünmesin diye her zaman opaktır: arka plan seçmediysen beyaz kullanılır.
Kaynak görsel: Kare olmayan görseller kırpılmadan ortalanır. 256 pikselden küçük görsellerde büyük ikonlar bulanık olabilir; araç bunu sana söyler.
ICO biçimi: ICO içindeki görüntüler PNG olarak saklanır; bütün güncel tarayıcılar ve Windows Vista'dan bu yana Windows bu biçimi okur.
Gizlilik ve sınırlar: Görsel en fazla 10 MB olabilir. Logon yüklenmez, saklanmaz; bütün dosyalar tarayıcında üretilir.

Gizlilik ve otomatik silme

Bu araç dosyanızı sunucumuza göndermez: bütün işlem tarayıcınızda, cihazınızda yapılır. Sayfa, dosya içeriğinin dışarıya gönderilmesini teknik olarak engelleyen bir güvenlik politikasıyla (Content-Security-Policy) sunulur; bu sayfada analiz ya da reklam betiği çalışmaz.

Sonuç dosyası da cihazınızda oluşturulur ve yalnızca siz indirirsiniz. Sekmeyi kapattığınızda ya da “Yeni dosya” dediğinizde tarayıcı belleğinden silinir. Sunucumuzda bu işlemle ilgili dosya adı ya da içerik kaydı tutulmaz.

Ayrıntılar için Gizlilik Politikası'nı okuyun

Sıkça Sorulan Sorular

Favicon hangi boyutlarda olmalı?

Sekme ve yer imleri için 16 ve 32 piksel (favicon.ico içinde 48 de), iPhone ana ekranı için 180 piksellik apple-touch-icon, Android ve kurulabilir web uygulamaları için 192 ve 512 piksel. Araç hepsini tek seferde üretir.

Favicon'u siteme nasıl eklerim?

ZIP'teki dosyaları sitenin kök klasörüne (alan adının hemen altına) yükle ve araçtaki HTML satırlarını sayfanın <head> bölümüne yapıştır. WordPress gibi sistemlerde “Site simgesi” alanına 512 piksellik PNG'yi yüklemek de yeterlidir.

SVG logodan favicon olur mu?

Evet, en iyi sonucu SVG verir: her boyut vektörden çizilir. Araç ayrıca favicon.svg dosyasını da ekler; bunu destekleyen tarayıcılar ikonu her ekranda keskin gösterir.

iPhone'da ikonum neden siyah arka planlı görünüyor?

iOS ana ekran ikonlarında şeffaflığı desteklemez ve şeffaf alanları siyah gösterir. Bu yüzden araç apple-touch-icon'u her zaman opak üretir; arka plan seçmediysen beyaz kullanır. İstersen markana uygun bir renk seç.

Değişikliği yaptım ama tarayıcıda eski ikon görünüyor, neden?

Tarayıcılar favicon'u uzun süre önbellekte tutar. Sayfayı zorla yenile (Ctrl+F5, Mac'te ⌘+Shift+R), gizli pencerede aç ya da HTML satırındaki dosya adına ?v=2 gibi bir ek koy.

Logom sunucuya yükleniyor mu?

Hayır. Görsel tarayıcında çizilir, bütün dosyalar orada üretilir; sayfa dışarıya bağlantı kurmayı teknik olarak engelleyen bir güvenlik kuralıyla gelir. Henüz yayımlanmamış bir marka için de güvenle kullanabilirsin.