Ücretsiz · Kayıtsız · Tarayıcıda

Favicon oluşturucu

Favicon oluşturucuya logonu bırak; 16 piksellik tarayıcı sekmesi simgesinden 512 piksellik uygulama simgesine kadar tüm dosyaları ve ekleyeceğin HTML’yi al. Her şey tarayıcında hazırlanır; görselin bir yere yüklenmez.

Logonu buraya bırak

PNG, JPG, WebP veya SVG. En iyi sonuç için en az 512 piksellik kare görsel.

Tarayıcında hazırlanır. Görselin hiçbir yere yüklenmez.

Örneklerimizden birini dene

Favicon nedir, nerede görünür?

Favicon, web siteni temsil eden küçük kare simgedir. Adı İngilizce “favorite icon”, yani “sık kullanılan simgesi” sözünden kısalır: ilk kullanan tarayıcı, sık kullanılanlar listesindeki yer imlerinin yanına koyuyordu.

Tarayıcı sekmesinde sayfa başlığının yanında, genellikle 16, yüksek çözünürlüklü ekranda 32 piksel genişliğinde görünür. Yer imleri ve tarama geçmişinde siteni işaretler. Site telefon ana ekranına kaydedilince uygulama simgesine dönüşür. Google da arama sonuçlarında site adının yanında gösterir.

Her yerde görevi aynıdır: diğer simgeler arasında bir bakışta tanınmak.

Tek favicon neden bir dosya setine dönüşür?

Bu kullanım yerlerinin her biri farklı zamanda ortaya çıktı ve kendi dosyasını ister. Yukarıdaki favicon oluşturucu hepsini tek görselden hazırlar.

Tarayıcı sekmesi, yer imleri ve geçmiş favicon.ico kullanır. Bu tek dosya 16, 32 ve 48 piksellik sürümleri içerir. En eski biçimdir; sayfa simge belirtmese bile tarayıcılar sitenin kök klasöründe favicon.ico arar.

SVG ile başlarsan favicon.svg de alırsın. SVG simge gösterebilen tarayıcılar bunu kullanır. Piksel yerine şekillerden oluştuğundan her ekranda net kalır.

iPhone ve iPad, site ana ekrana eklendiğinde 180 × 180 piksellik apple-touch-icon.png kullanır. iPhone şeffaf alanları siyahla doldurur; bu yüzden simgeye her zaman düz arka plan eklenir: seçtiğin renk veya şeffafı seçtiysen beyaz.

Android telefonlar ve tarayıcıdan uygulama olarak kurulan siteler icon-192.png ile icon-512.png kullanır. Dosyaları site.webmanifest üzerinden bulurlar. Bu küçük metin dosyası, araca yazdıysan site adını ve büyük simgelerin yerini tarayıcıya bildirir.

16–48 piksellik ayrı PNG’ler, PNG isteyen hizmetler için yedektir. Google, arama sonuçları için ana sayfanın HTML’sindeki simge bağlantılarını okur.

Favicon dosyalarını sitene eklemek

Sitenin dosyalarını sen veya geliştiricin düzenliyorsa iki adım yeterlidir.

Önce indirdiğin zip’i aç ve dosyaları sitenin kök klasörüne, ana sayfanın bulunduğu en üst klasöre koy. Kontrol için site adresinin sonuna /favicon.ico ekle; simge açılmalıdır.

Sonra README’deki HTML satırlarını (araçta da gösterilir) sayfaların head bölümüne, başlık bilgisini taşıyan HTML’nin üst kısmına ekle. ICO, Apple ana ekran simgesi ve manifest için ayrı satırlar, varsa SVG için de bir satır vardır.

Genellikle tüm sayfalar aynı şablonu kullanır; bir kez eklemen yeterlidir. Önce eski simge satırlarını sil, yoksa tarayıcı eski simgeyi seçmeyi sürdürebilir.

Site oluşturucu kullanıyorsan iki adımı da atlayabilirsin: site simgesi ayarında icon-512.png yükle; oluşturucu HTML’yi kendisi ekler.

Logoyu 16 pikselde anlaşılır yapmak

16 × 16 boyutta tüm simge 256 küçük renk karesinden oluşur. Çoğu logo bunun için çizilmemiştir.

Ad yerine sembolle başla. Sekiz harfli adı 16 piksele sıkıştırırsan her harfe iki piksel kalır. Sembol yoksa ilk harfi büyük ve kalın kullan. Kalın harfler küçülmeye ince harflerden daha iyi dayanır.

Sonra ayrıntıları çıkar. Çok ince çizgi ve küçük boşluklar çevresine karışır; slogan bir lekeye dönüşür.

Önemli olan renklerin kendisinden çok açık-koyu ayrımıdır. Sekmeler temaya göre açık veya koyudur; lacivert simge koyu çubukta kaybolur. İşaretin koyuysa araçta açık arka plan ver veya tersini uygula.

İç boşluk, logo ile karenin kenarı arasındaki alandır ve denge ister. Fazlası logoyu sekmede küçültür. Azıysa ana ekran simgelerinin köşelerini yuvarlayan iPhone’un logonun köşelerini kesmesine yol açar.

Son olarak yukarıdaki açık ve koyu sekme önizlemelerine yakınlaştırmadan, gerçek boyutta bak. Ücretsiz logo kontrol aracımız daha ileri gider: logoyu 32 piksele indirip ayrıntıların ne kadarının korunduğunu ölçer.

Küçültmek yerine yeniden çizmek gereken durumlar

Bazen hiçbir ayar kurtarmaz. Ayrıntılı çizimde veya gölgeye dayalı 3D görünümde ayrıntı tasarımın kendisidir; 16 pikselde kaybolur. Bu araç boyutlandırır ama logoyu yeniden çizemez.

Bu kötü logo olduğu anlamına gelmez; yalnızca daha büyük yerler için tasarlanmıştır. Küçük sürümü ayrıca düşün: sadeleştirilmiş sembol veya markanın yazı tipinde baş harfin. Renkleri ve şeklin bir özelliğini koru; insanlar bağlantıyı kurar. Bulanık bir minyatür yerine net bir baş harfi tercih ederiz.

Yeni bir işaret mi lazım? Yapay zeka logo oluşturucumuz marka adın ve istersen kısa bir açıklamayla tasarlar. Logo şablonlarımızdan alınan tasarımda sembol varsa ayrı dosyası da gelir. Bizden indirdiğin her logo favicon dosyalarını içerir.

FAQ

Favicon hakkında sorular

Ücretsizdir; kayıt ve filigran yoktur. Görselin de sende kalır. Araç tamamen tarayıcında çalışır; tüm boyutları ve zip’i doğrudan cihazında oluşturur, görseli sunucularımıza göndermez. Henüz kimseye göstermediğin bir logoda da kullanabilirsin.

Kare ve her kenarı en az 512 piksel olmalı. Setteki en büyük simge 512 piksel; daha küçük PNG, JPG veya WebP’nin esnetilmesi gerekir, büyük simgeler yumuşak çıkar. Araç bunu bildirir. SVG piksel değil şekillerden oluştuğundan sınırı yoktur; her boyutta net kalır. Geniş logo karenin yalnızca ince şeridini doldurur; sembolünle veya baş harfinle başla.

Hepsi gerekir; tarayıcı ve telefonlar farklı dosyalar ister. Aracın verdiği HTML hangisinin kullanılacağını belirtir. ICO’yu her tarayıcı tanır. PNG’ler telefon ve kurulan uygulamalar içindir; küçük boyutlar yedektir. SVG ile başlarsan verilen SVG, destekleyen tarayıcılarda her ekranda net kalır.

Büyük ihtimalle tarayıcı kayıtlı kopyayı gösteriyordur. Favicon’u sayfanın kalanından daha uzun süre saklar; yeni dosyalar yayımlansa da eski simge kalabilir. Önbelleği kullanmadan yenilemeyi dene: Windows’ta Ctrl+Shift+R, Mac’te Cmd+Shift+R (Safari’de Option+Cmd+R). Olmazsa site adresinin sonuna /favicon.ico ekleyip onu yenile veya gizli pencereden bak. Diğer ziyaretçilerin tarayıcıları zamanla güncellenir.

Klasör yerine oluşturucunun ayarlarına. Çoğunda tek kare PNG yüklediğin site simgesi veya favicon ayarı vardır. Zip’teki en büyük dosya olan icon-512.png’yi seç; küçük boyutları üretirken yeterli ayrıntısı olsun. Belirli boyut isteniyorsa uygun dosyayı kullan. HTML’yi oluşturucu ekler; README adımlarını atlayabilirsin.

Google, web sayfalarını okuyan tarayıcı programı ana sayfanı yeniden ziyaret ettiğinde yeni favicon’u alır. Bunun sabit takvimi yoktur. Google kare görsel ve ana sayfa HTML’sinde simge bağlantısı ister; ikisinin de yerinde olduğuna bak. Sonrasında neyi ne zaman göstereceği Google’a bağlıdır; zaman tanı.