Favicon Oluşturucu

Simge neyden üretilsin
ya da görseli buraya sürükleyin

En az 512 × 512 piksel, kare bir PNG ya da SVG önerilir. SVG yüklerseniz pakete favicon.svg de eklenir.

Metin simgesinin şekli, iPhone simgesi ve uyarlanabilir simge bu renkle doldurulur.
Android maskesi ortadaki %80'lik daireyi her zaman gösterir; kare bir logo %56 ve altında tamamen görünür kalır.

Önizleme

Bir görsel seçin ya da Metin ya da emoji seçeneğine geçin.

Web manifest

Ana ekranda simgenin altında görünür; 12 karakteri geçmesin.
Mobil tarayıcının adres çubuğu ve uygulama başlığı bu renge boyanır.
Dosyaları kök klasöre koyacaksanız / bırakın; örneğin /static/simgeler ya da tam bir CDN adresi de olabilir.

Paket

    HTML kodu (head bölümüne)
    site.webmanifest

    Görsel tarayıcınızda işlenir ve paket tarayıcınızda hazırlanır; hiçbir yere gönderilmez.

    Bu araç tek bir görselden, metinden ya da emojiden sitenizin bütün simge dosyalarını ve web manifestini üretir: tarayıcı sekmesi, Google arama sonucu, iPhone ve Android ana ekranı için. Paketi ZIP olarak indirir, dosyaları sitenize yükler ve verilen HTML kodunu sayfanızın head bölümüne eklersiniz. Görsel tarayıcınızda işlenir, hiçbir yere gönderilmez.

    Hangi dosya ne işe yarar?

    DosyaBoyutNerede kullanılır
    favicon.ico16, 32 ve 48 piksel tek dosyadaEski tarayıcılar ve simgeyi kök adresten isteyen istemciler
    favicon.svgVektör; SVG yüklerseniz ya da metin kullanırsanızGüncel tarayıcıların sekmesi; her boyutta keskin kalır
    favicon-96x96.png96 × 96Google arama sonuçları ve tarayıcı sekmeleri
    apple-touch-icon.png180 × 180, zeminliiPhone ve iPad ana ekranına eklenen kısayol
    web-app-manifest-192x192.png ve 512x512.png192 ve 512, saydamAndroid ana ekranı, uygulama kurulumu ve açılış ekranı
    web-app-manifest-maskable-*.png192 ve 512, zeminliAndroid uyarlanabilir simge; sistem kendi maskesiyle kırpar
    site.webmanifestJSONUygulama adı, renkler, açılış adresi ve simge listesi

    Favicon Google'da nasıl görünür?

    Google, arama sonucunda sitenin adının yanında simgeyi gösterir. Bunun için simge ana sayfada bir link etiketiyle bildirilmiş olmalı ve Google'ın hem ana sayfayı hem simge dosyasını tarayabilmesi gerekir. Simge kare olmalı ve en az 8 × 8 piksel olmalı; Google 48 × 48 pikselden büyük bir simge önerir. Desteklenen biçimler ICO, PNG, GIF, JPEG, BMP, PPM ve TIFF'tir; SVG arama sonuçlarında desteklenmez. Her alan adı ya da alt alan adı için tek bir simge gösterilir, alt klasörler ayrı simge alamaz. Simgenin adresini sık değiştirmeyin.

    Uyarlanabilir (maskable) simge nedir?

    Android, ana ekrandaki simgeleri telefonun temasına göre daire, yuvarlak kare ya da başka bir şekille kırpar. Normal bir simge bu kırpmada kenarlarından kesilebilir ya da etrafında beyaz bir çerçeve kalabilir. Uyarlanabilir simgede zemin kenarlara kadar doludur ve logo ortadaki güvenli alanda durur: simgenin %80 çapındaki merkez dairesi her maskede görünür. Manifestte bu simgeler ayrı dosya olarak ve maskable amacıyla, normal simgeler ise any amacıyla listelenir. Aynı dosyayı iki amaçla işaretlemek, normal kullanımda gereksiz kenar boşluğu ya da maskede kesik logo demektir.

    Paketi siteme nasıl eklerim?

    1. ZIP dosyasını açın ve içindeki dosyaları sitenizin kök klasörüne ya da Dosyaların yolu alanına yazdığınız klasöre yükleyin.
    2. HTML kodunu her sayfanın head bölümüne, en azından ana sayfaya ekleyin.
    3. favicon.ico dosyası kök klasörde değilse sitenizin /favicon.ico adresine de bir kopya koyun; bazı istemciler simgeyi HTML'e bakmadan bu adresten ister.
    4. Sayfayı zorla yenileyerek sekmedeki simgeyi kontrol edin.

    Sık sorulan sorular

    Favicon kaç piksel olmalı?

    Tek bir boyut yetmez. Tarayıcı sekmesi 16 ve 32 piksel kullanır, Google arama sonucu için 48 pikselden büyük bir simge önerilir, iPhone ana ekranı 180 piksel, Android 192 ve 512 piksel kullanır. Bu yüzden araç tek görselden bütün boyutları üretir. Kaynak görsel olarak en az 512 × 512 piksel, kare bir PNG ya da SVG yükleyin.

    Favicon Google'da neden görünmüyor?

    En sık sebepler: simge yalnız alt sayfalarda bildirilmiş, ana sayfada değil; simge dosyası robots.txt ile engellenmiş; simge kare değil ya da 8 pikselden küçük; yalnız SVG simge var. Bunlar düzgünse Google'ın ana sayfayı yeniden taramasını bekleyin, bu birkaç gün ile birkaç hafta sürebilir. Search Console'daki URL denetimi aracıyla ana sayfa için dizine ekleme isteyebilirsiniz.

    Yalnız SVG favicon yeterli mi?

    Hayır. Güncel tarayıcılar sekmede SVG simgeyi kullanır, ama Google arama sonuçlarında SVG desteklenmez; iPhone ana ekranı da PNG ister. SVG'yi PNG ve ICO dosyalarıyla birlikte kullanın.

    Favicon'u değiştirdim, neden eskisi görünüyor?

    Tarayıcılar simgeyi uzun süre önbellekte tutar. Sayfayı zorla yenileyin ya da simgeyi yeni bir sekmede doğrudan açın. Kalıcı çözüm dosya adını değiştirmektir, örneğin favicon-v2.ico; HTML kodundaki adresi de buna göre güncelleyin.

    WordPress sitesine nasıl eklerim?

    En kolayı Görünüm > Özelleştir > Site kimliği > Site simgesi bölümünden 512 × 512 piksel bir PNG yüklemektir; WordPress gereken boyutları kendisi üretir. Bu aracın paketini kullanmak isterseniz dosyaları sitenin kök klasörüne yükleyip HTML kodunu temanın head bölümüne ekleyin.

    Yüklediğim görsel bir yere gönderiliyor mu?

    Hayır. Görsel tarayıcınızda işlenir ve paket tarayıcınızda hazırlanır; sunucuya gönderilmez ve kaydedilmez.