Resmi Favicon'a Dönüştür

JPG, PNG, GIF gibi formatlardaki resimleri ICO formatında favicon simgelerine dönüştürün

1286 kullanım | 5.0 puan

Favicon Oluşturma Ayarları

Resmi buraya sürükleyin veya

Oluşturma Sonucu

İşlenmedi

Sonuçları görmek için bir resim yükleyin ve Favicon oluşturun

Kullanım Kılavuzu

1

Resim Dosyası Seçin

Resim dosyasını yükleme alanına sürükleyin veya tarama düğmesine tıklayarak resim seçin.

2

Favicon Parametrelerini Ayarlayın

Favicon'un boyutunu ve çıkış formatını seçin, gerektiğinde resim işleme seçeneklerini ayarlayın.

3

Favicon Oluşturun

"Favicon Oluştur" düğmesine tıklayın, sistem resmi Favicon formatına dönüştürecek.

4

Sonucu İndirin

Oluşturma tamamlandıktan sonra, farklı boyutlardaki Favicon'u önizleyebilir ve oluşturulan dosyayı indirebilirsiniz.

Favicon Temel Bilgileri

Favicon nedir?

Favicon (Favorites Icon), tarayıcı sekme çubuğunda, yer imleri çubuğunda ve geçmiş kayıtlarında görüntülenen web sitesi simgesidir, genellikle 16×16 piksel veya 32×32 piksel büyüklüğündedir. Web sitesi marka tanımlamasının önemli bir parçasıdır ve kullanıcılara birden fazla açık sekme arasında sitenizi hızlıca tanımlama konusunda yardımcı olur.

Favicon Yaygın Formatları

  • .ico formatı: En geleneksel ve en geniş desteklenen Favicon formatı, birden fazla boyutta ve bit derinliğinde görüntü içerebilir
  • .png formatı: Modern tarayıcılar tarafından geniş bir şekilde desteklenir, şeffaf arka plan ve sıkıştırmayı destekler
  • .svg formatı: Vektör formatı, yüksek çözünürlüklü ekranlarda net görünür, ancak tarayıcı desteği farklılık gösterir
  • .webp formatı: Daha yeni bir format, sıkıştırma verimliliği daha yüksektir, ancak eski tarayıcılar desteklemez

Önerilen Boyutlar ve Standartlar

Farklı cihazlar ve tarayıcılarda en iyi görüntüleme efekti sağlamak için aşağıdaki boyutları içeren bir Favicon oluşturmanız önerilir:

16×16 px
Tarayıcı sekmesi
32×32 px
Görev çubuğu simgesi
48×48 px
Windows Kaynak Yöneticisi
180×180 px
iOS ana ekranı

Dışında, kare bir resim kullanmanızı ve önemli görsel öğelerin merkez bölgede yer almasını öneririz, böylece farklı kırpma gereksinimlerine uyabilir.

En İyi Uygulamalar ve İpuçları

  • Basit, net bir tasarım kullanın, fazla detaylardan kaçının çünkü Favicon boyutu çok küçüktür
  • Açık ve koyu arka planlarda iyi görünürlüğe sahip olduğundan emin olun
  • Farklı tarayıcı temalarına uyum sağlamak için şeffaf arka plan kullanın
  • Mobil cihazlar için daha büyük boyutta simgeler sağlayın (180×180 px boyutunda Apple Touch Icon gibi)
  • Favicon'u güncelledikten sonra sonucu görmek için tarayıcı önbelleğini temizleyin

Web Sitesine Entegrasyon Yöntemi

Favicon'u web sitenize eklemek için, HTML belgesinin<head>bölümüne aşağıdaki kodu ekleyin:

<!-- Standart Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- ICO formatındaki Favicon (eski tarayıcılar için destek) -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- Apple Touch Icon (iOS cihazları) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Web uygulaması manifest (PWA) -->
<link rel="manifest" href="/site.webmanifest">

Simgeler dosyalarını web sitenizin kök dizinine veya belirli bir yola yerleştirdiğinizden ve href özniteliğini gerçek dosya konumuna göre güncellediğinizden emin olun.

Reklam