DevToolPal
TR

Favicon Oluşturucu

Metinden, bir emojiden veya logonuzdan favicon oluşturun: favicon.ico, PNG boyutları, Apple touch simgesi, web manifest ve HTML etiketleri tek bir ZIP'te.

Yerelde çalışır, asla yüklenmez

Seçenekler

Kaynak
Şekil

Önizleme

<head> için HTML

Bu araç ne işe yarar

Favicon Oluşturucu bir harfi, bir emojiyi veya logonuzu modern bir web sitesinin ihtiyaç duyduğu tüm simgelere dönüştürür. Simgeyi her boyutta oluşturur, favicon.ico dosyasını paketler, bir web uygulaması manifesti yazar ve sayfanızın <head> bölümüne yapıştırmanız için <link> etiketlerini verir. Her şeyi tek bir ZIP olarak indirin.

Metinden başlamak, temiz bir simge elde etmenin en hızlı yoludur: bir ila üç karakter veya bir emoji yazın; renkleri, yazı tipini ve şekli (kare, yuvarlatılmış veya daire) seçin. Metin simgeleri ayrıca her boyutta ve yüksek yoğunluklu ekranlarda keskin kalan ölçeklenebilir bir favicon.svg de alır.

Nasıl kullanılır

  1. Kaynak olarak Metin veya Görsel seçin. Görsel için Görsel seç… düğmesine basın ve kare bir PNG, SVG veya JPG seçin.
  2. Şekil’i ayarlayın; simgeyi renkli bir zemin üzerine koymak için Arka planı doldur seçeneğini açın, saydam tutmak için kapatın.
  3. Site adı’nı girin: biri sitenizi telefonunun ana ekranına eklediğinde simgenin altında görünen addır ve site.webmanifest (Android) dosyasına ve apple-mobile-web-app-title etiketine (iOS) yazılır. Ardından dosyaları yükleyeceğiniz Simge klasörü’nü (genellikle /) belirleyin.
  4. Önizlemeyi kontrol edin: 16 px simge, insanların tarayıcı sekmesinde gördüğü simgedir.
  5. ZIP indir düğmesine basın, dosyaları sitenize yükleyin ve HTML’yi <head> içine yapıştırın.

Örnek

Varsayılan ayarlar şu etiketleri üretir:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="apple-mobile-web-app-title" content="My Site">

İpuçları

  • Tarayıcılar favicon’ları agresif biçimde önbelleğe alır. Bir simgeyi değiştirdikten sonra değişikliği görmek için sayfayı gizli bir pencerede açın.
  • iOS, Apple touch simgesindeki saydamlığı yok sayar ve onu siyahla doldurur; temiz bir ana ekran simgesi için arka planı dolu tutun.

SSS

› Hangi dosyaları alıyorum?

favicon.ico (16, 32 ve 48 px), 16, 32 ve 48 px PNG simgeleri, 180 px Apple touch simgesi, 192 ve 512 px Android simgeleri, site.webmanifest, HTML etiketleri ve metinden başladığınızda favicon.svg.

› Logom bir yere yükleniyor mu?

Hayır. Görsel tarayıcınızda bir canvas ile okunur ve yeniden boyutlandırılır; ZIP de cihazınızda oluşturulur.

› En iyi sonucu hangi görsel verir?

Saydam arka planlı, en az 512 × 512 px boyutunda kare bir PNG veya SVG. Basit, belirgin şekiller 16 px'de okunabilir kalır; ince ayrıntılar ve ince metinler kalmaz.

› favicon.ico'ya hâlâ ihtiyacım var mı?

Evet; eski tarayıcılar ve /favicon.ico'yu doğrudan isteyen araçlar için. Modern tarayıcılar HTML'deki PNG veya SVG bağlantılarını kullanır.