Fruga
Türkçe
Frontend StüdyosuFavicon ve uygulama ikonlarıAracı değiştir

Favicon ve uygulama simgeleri

Tek bir çizim, bir tarayıcının ya da telefonun istediği her boyut; çoğunlukla bozuk gönderilen opak iOS simgesi ve maskable Android simgesi dahil. Logo bu sekmede çizilir ve asla yüklenmez.

  • Dosyalar: 8 simge + manifest
  • Girdi: PNG, JPG, WebP veya SVG
  • Logonuz: Sekmeden asla çıkmaz

Logonuz

Kare bir çizim en iyi sonucu verir. SVG en net sonucu sağlar.

Yüklediğiniz logo

Geçerli dosya: placeholder.svg

Arka planLogonun arkasını doldurur. iOS ve maskable simgeler her zaman doldurulur.
Uygulama manifest ayarları

Elde edecekleriniz

Önizlemeler sığacak şekilde küçültülür; her dosya belirtilen boyutta üretilir. Tek başına indirmek için birine tıklayın.

  • favicon.ico

    48×48

    16, 32 ve 48 tek dosyada; eski tarayıcılar ve yer imleri için

  • favicon-16x16.png

    16×16

    Sekme, en küçük boyutta

  • favicon-32x32.png

    32×32

    Yüksek yoğunluklu ekranda sekme

  • favicon-48x48.png

    48×48

    Windows görev çubuğu ve kısayollar

  • apple-touch-icon.png

    180×180

    iOS ana ekranı; saydamlık siyah görünür, bu yüzden bu simge doldurulur

  • icon-192.png

    192×192

    Android ana ekranı

  • icon-512.png

    512×512

    Açılış ekranı ve uygulama listeleri

  • icon-maskable-512.png

    512×512

    Android uyarlanabilir simgesi; çizim güvenli dairenin içinde tutulur

Bunu <head> bölümünüze yapıştırın

Kod parçacığı ve manifest dosyası da .zip içinde yer alır.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">

site.webmanifest

{
  "name": "My site",
  "short_name": "Site",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#0ea5e9",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

iOS simgesi neden doldurulur

Safari, saydam bir ana ekran simgesini siyah zeminin üzerine yerleştirir; koyu mürekkeple çizilmiş bir logo bu yüzden kaybolur. apple-touch-icon.png, diğerleri ne kullanırsa kullansın burada her zaman bir arka plan alır.

Maskable ne demek

Android, uyarlanabilir bir simgeyi başlatıcının kullandığı şekle (daire, squircle ya da yuvarlatılmış kare) kırpar ve her kenardan yüzde yirmiye kadarını alabilir. Bu yüzden maskable dosya, çizimi bu güvenli alanın rahatça içinde tutar.

favicon.ico hakkında

Buradaki .ico dosyası, kapsayıcının içinde PNG olarak 16, 32 ve 48 piksellik görseller barındırır; Vista'dan beri her tarayıcı bunu okur. Yine de göndermeye değer: yer imleri, eski tarayıcılar ve bazı besleme okuyucuları /favicon.ico dosyasını adıyla ister ve link etiketlerini yok sayar.

Sıkça sorulan sorular

Gerçekte hangi favicon boyutlarına ihtiyacım var?
16, 32 ve 48 piksellik görseller içeren bir favicon.ico, sekme için PNG simgeleri, iOS için 180 piksellik bir simge ve maskable sürümü olan Android simgeleri. Bu sayfa hepsini tek bir çizimden üretir; manifest dosyası ve yapıştırmaya hazır link etiketleri de dahildir.
iOS simgesi neden bir arka plan alır?
Çünkü Safari saydam simgeyi siyah zeminin üzerine yerleştirir ve koyu mürekkeple çizilmiş logo kaybolur. Bu yüzden apple-touch-icon.png, diğer boyutlar ne olursa olsun burada her zaman arka planla üretilir.
Android'de maskable simge ne demek?
Android, uyarlanabilir bir simgeyi başlatıcının şekline (daire, squircle ya da yuvarlatılmış kare) kırpar ve her kenardan yüzde yirmiye kadarını alabilir. Maskable dosya çizimi güvenli alanın içinde tutar, böylece her başlatıcıda sorunsuz görünür.
Hâlâ favicon.ico dosyasına ihtiyacım var mı?
Evet, hâlâ göndermeye değer. Yer imleri, eski tarayıcılar ve bazı besleme okuyucuları /favicon.ico dosyasını adıyla ister ve link etiketlerini yok sayar. Burada üretilen dosya, kapsayıcının içinde PNG olarak 16, 32 ve 48 piksellik görseller barındırır; Vista'dan beri her tarayıcı bunu okur.