Çevrimiçi Ücretsiz Favicon Nasıl Oluşturulur (2026 Rehberi)
Tarayıcı sekmesindeki o küçük simge — sayfa başlığının yanında görünen — favicon olarak adlandırılır ve web sitenizdeki en küçük markalama kararıdır. Olmayan siteler genel bir boş sayfa simgesi gösterir; bu, ziyaretçilere sessizce "tamamlanmamış" olduğunu işaret eder. İyi haber: favicon oluşturmak yaklaşık bir dakika sürer. Bu rehber size ücretsiz Favicon Oluşturucu aracımızla herhangi bir görseli doğru boyutlu favicon setine nasıl dönüştüreceğinizi ve onları web sitenize nasıl ekleyeceğinizi gösterir.
Favicon nedir ve neden önemlidir?
Favicon ("favorites icon" kısaltması), tarayıcıların sekmelerde, yer imlerinde, geçmiş listelerinde ve bazen arama sonuçlarında gösterdiği küçük görseldir. Genellikle yalnızca 16×16 pikselde gösterilir — çok küçük — ancak sitenizin her sayfasında görünür. Özel bir favicon sekmelerinizi bir bakışta tanınabilir hale getirir, kullanıcıların yirmi açık sekme arasında sitenizi bulmasına yardımcı olur ve tamamlanmış bir web sitesinin profesyonel görünümünü tamamlar. Tasarımcı olmanız gerekmez. Basit bir kalın şekil, renkli arka plan üzerinde bir harf veya logonuzun basit bir sürümü bu boyutlarda mükemmel çalışır.
Ücretsiz Favicon Oluşturucu ne yapar
Favicon Oluşturucu yüklediğiniz herhangi bir görseli alır ve dört standart boyutta favicon PNG oluşturur: 16×16 — klasik tarayıcı sekmesi ve yer imi simgesi boyutu; 32×32 — modern tarayıcılarda sekmeler ve yüksek yoğunluklu ekranlarda görev çubuğu kısayolları için; 48×48 — bazı sistemlerde masaüstü kısayolları için; 180×180 — birisi sitenizi iPhone veya iPad'inin ana ekranına kaydettiğinde gösterilen Apple touch simgesi boyutu. Her şey tarayıcınızda gerçekleşir — kaynak görseliniz asla bir sunucuya yüklenmez.
Adım adım: favicon'larınızı oluşturun
- Kaynak görsel seçin. Basit ve kalın bir şey seçin: logo işareti, baş harf veya temiz bir simge. Kare görseller en iyi çalışır. Ayrıntılı görsellerden kaçının — 16 pikselde ayrıntı kaybolur.
- Favicon Oluşturucu aracını açın. Herhangi bir modern tarayıcıda çalışır; hiçbir şey kurmak gerekmez.
- Görselinizi yükleyin. Cihazınızdan dosyayı seçin. Araç tamamen yerel kalır — hiçbir şey aktarılmaz.
- Simge setini oluşturun. Araç, görselinizin 16, 32, 48 ve 180px PNG sürümlerini oluşturur.
- Dosyaları indirin. Her boyutu kaydedin. Dosya adlarını basit ve tutarlı tutun, örneğin favicon-16.png , favicon-32.png , favicon-48.png ve apple-touch-icon.png.
- Onları web sitenize yükleyin. Dosyaları sitenizin kök dizinine veya images klasörüne, diğer site dosyalarınızla birlikte koyun.
- HTML'yi ekleyin (aşağıya bakın). Sayfalarınızın <head> bölümünde simgelere başvurun; böylece tarayıcılar onları kullanması gerektiğini bilir.
Web sitenize favicon eklemek: HTML
Simge dosyaları sunucunuza ulaştıktan sonra HTML sayfalarınızın <head> bölümüne şu satırları ekleyin (yolları dosyaları koyduğunuz yere göre ayarlayın):
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Tarayıcılar ihtiyaç duydukları boyutu otomatik olarak seçer. apple-touch-icon satırı, ziyaretçiler sitenizi ana ekranlarına eklediğinde iPhone ve iPad'i kapsar. Siteniz ortak bir başlık şablonu kullanıyorsa bu satırları bir kez ekleyin ve her sayfa favicon alır. Görünmüyor mu? Tarayıcılar favicon'ları çok agresif şekilde önbelleğe alır. Favicon'ınızı ekledikten sonra sert yenileme yapın (Windows'ta Ctrl+Shift+R, Mac'te Cmd+Shift+R) veya kontrol için özel/gizli pencerede sayfayı açın.
Tasarım ipuçları: iyi bir favicon nasıldır
- Son derece basit tutun. 16×16 pikselde ayrıntıya yer yoktur. Bir harf, basit bir şekil veya iki renkli bir işaret her seferinde tam logoyu yener.
- Yüksek kontrast kullanın. Düz renkli kare üzerinde beyaz harf net okunur; beyaz üzerinde ince gri çizgiler kaybolur.
- Gerçek boyutta test edin. Kaynak görselinizi zihninizde 16 piksel genişliğinde görün — ne olduğunu söyleyemiyorsanız oluşturmadan önce onu basitleştirin.
- Marka renginizle eşleştirin. Sitenizin ana rengini favicon arka planı olarak kullanmak sekme simgesini markanızla anında bağlar.
- Şeffaf kenarlardan kaçının. Kaynağınızda şeffaf bir arka plan varsa görünür şeklin küçültüldüğünde hayatta kalacak kadar kalın olduğundan emin olun — 16px'te soluk kenarlar gri bulanıklık olur.
- Tüm boyutlarda aynı konsept. Tüm boyutlar için aynı kaynak görseli kullanın; böylece sekme simgeniz, yer imi simgeniz ve ana ekran simgeniz tanınabilir aynı işaret olur.
Yaygın hatalardan kaçının
- Tam ayrıntılı logo kullanmak. Etiket satırlı bir logo, favicon boyutunda okunamaz bir leke olur. Yalnızca simgeyi veya baş harfi çıkarın.
- Apple touch simgesini unutmak. 180px sürüm, iPhone kullanıcılarının sitenizi ana ekranlarına kaydettiklerinde gördüğü şeydir — onu atlamayın.
- HTML'de yanlış dosya yolları. Favicon görünmüyorsa en yaygın neden, dosyaların gerçek konumuyla eşleşmeyen yoldur. href değerlerini yeniden kontrol edin.
- Yalnızca tek tarayıcıda test etmek. Sekme simgenizi en az Chrome'da ve başka bir tarayıcıda kontrol edin ve mümkünse telefon ana ekranı kaydetmeyi de.
Gizliliğiniz: görseller asla cihazınızdan çıkmaz
Logonuz markanızdır — onu rastgele bir favicon sitesine yüklemek, sanat çalışmanızı bir yabancının sunucusuna teslim etmek anlamına gelir. Favicon Oluşturucu JavaScript ile her şeyi yerel olarak tarayıcınızda işler. Hiçbir şey yüklenmez, kaydedilmez veya günlüğe yazılmaz.
Sık sorulan sorular
Favicon Oluşturucu ücretsiz mi?
Evet — kayıt yok, sınır yok ve indirdiğiniz simgeler herhangi bir web sitesinde kullanım için sizindir.
Hangi görselle başlamalıyım?
Logo işaretinizin veya basit simgenizin kare PNG'si, ideal olarak en az 512×512 piksel. Büyük, temiz kaynak görseller küçüklerden daha iyi küçülür.
Hâlâ .ico dosyasına ihtiyacım var mı?
Modern tarayıcıların hepsi bu aracın oluşturduğu PNG favicon'ları kabul eder. Klasik favicon.ico biçimi hâlâ çalışır ancak güncel tarayıcılar için artık gerekli değildir.
Yeni favicon'ım neden görünmüyor?
Neredeyse her zaman önbellekleme. Sayfayı sert yenileyin, site için tarayıcınızın önbelleğini temizleyin veya gizli pencerede test edin. HTML <link> etiketlerinizdeki dosya yollarını da doğrulayın.
Şimdi favicon'ınızı oluşturun: Ücretsiz Favicon Oluşturucu · Ücretsiz Görsel Sıkıştırıcı · Ücretsiz Renk Seçici