Favicon nasıl oluşturulur ve sitenize eklenir?

Sitenize uygun yolu seçin: WordPress’te kare bir görseli site simgesi ayarı üzerinden yükleyebilirsiniz; diğer site editörlerinde genellikle ayrı bir site simgesi alanı bulunur. HTML’yi kendiniz düzenliyorsanız simge dosyalarını oluşturun ve HTML yönergelerini izleyin. Editör simgeleri oluşturuyorsa ZIP ve manifest adımlarını atlayabilirsiniz.

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

Favicon, sitenizi tarayıcı sekmesinde veya yer imlerinde tanımayı kolaylaştıran küçük simgedir. Daha büyük bir sürümü, site telefonun ana ekranına eklendiğinde kullanılabilir. Bu nedenle aynı tasarımın farklı boyutlarına ihtiyaç duyulabilir.

On iki sekmesi açık olan bir okuyucuyu düşünün. İşletmenizin tam adı sekmeye sığmasa bile ayırt edici bir simge sitenizi tanıtabilir. Tasarımın amacı, çok küçük bir alanda kolayca tanınmaktır.

Favicon, sayfanın üst kısmındaki logodan ve bağlantı paylaşılırken görünen büyük önizleme görselinden farklıdır. Birini değiştirmek diğerlerini otomatik olarak güncellemez. Sayfada güzel duran geniş bir logo, küçük bir kareye sığdırıldığında okunmaz hale gelebilir.

Önce kurulum yöntemini seçin. Böylece paketteki her dosyayı gerekli saymak yerine yalnızca sitenizin ihtiyacı olanları hazırlarsınız.

Site oluşturma aracınızın simge ayarı varsa önce onu kullanın. HTML talimatları, sayfaların ortak head bölümünü düzenleyebildiğiniz siteler içindir. Etiketleri görünür bir içerik alanına yapıştırmak aynı kurulumu sağlamaz.

16 pikselde anlaşılır bir tasarım seçin

Logonun tamamı yerine markanızın en tanınabilir bölümünü kullanın. Belirgin bir baş harf, sade bir sembol veya maskotun ana şekli, tam ad ve slogandan daha iyi çalışabilir. Yalnızca büyük görselde anlaşılabilen ayrıntıları çıkarın.

Örneğin ekmek, buğday başakları ve «Dere Sokağı Fırını» yazısından oluşan bir logo düşünün. Favicon, ekmeğin siluetini ve üstündeki tek bir belirgin çizgiyi koruyabilir. Bütün başakları ve adı sığdırmaya çalışmak küçük işaretlerden oluşan karmaşık bir görüntü yaratır.

Gerçek boyutta bakın. Ekranda büyük görünen 512 piksellik çizim, dar bir boşluğun 16 pikselde korunacağını göstermez. Yakınlaştırmadan bakıp ana şekli bir iki saniyede tanıyıp tanımadığınızı değerlendirin.

• Tek bir ana fikir kullanın. Kare içinde birbiriyle yarışan nesnelerden kaçının.
• Kenarları belirgin tutun. İnce çizgiler ve küçük boşluklar küçültülünce kaybolabilir.
• Yeterli kontrast sağlayın. Saydam zemin üzerindeki açık renkli sembol, açık arayüzde görünmeyebilir.
• Metni sınırlayın. Kalın bir harf işe yarayabilir; işletmenin tam adı genellikle yaramaz.
• Silueti kontrol edin. Ayrıntılar olmadan tanınmıyorsa şekli sadeleştirin.

Küçük boyutlar için farklı bir tasarım kullanabilirsiniz. Tam logonun minyatürü olmak zorunda değildir. 16 pikselde özel düzenleme gerekiyorsa ayrı bir sürüm çizin. Oluşturucu görseli yeniden boyutlandırır, ancak hangi marka ayrıntılarının çıkarılacağına karar vermez.

Kaynak görseli ayrıntıları kaybetmeden hazırlayın

Mümkünse özgün tasarımdan temiz bir dışa aktarım yapın. En büyük çıktı 512 piksel olduğundan en az 512 × 512 boyutunda kare PNG uygun bir başlangıçtır. Bu öneri, tarayıcı sekmesinin 512 piksellik simge gösterdiği anlamına gelmez.

Vektör logonuz varsa tasarım programından kare PNG olarak dışa aktarın. Pixilo JPG, PNG ve WebP kabul eder; SVG kabul etmez. Daha sonra düzenlemek için vektör dosyasını saklayın.

Bulanık 32 piksellik simgeyi 512 piksele büyütmek ayrıntıları geri getirmez. Daha iyi bir kaynak kullanın veya sembolü sadeleştirip yeniden çizin. Kaynak kenarlarından biri 512 pikselin altındaysa büyük çıktılar büyütüleceği için araç uyarı verir.

Dosya boyutundan önce kompozisyonu düzenleyin. Dikdörtgen logo bozulmadan kareye sığdırılabilir, ancak çevresinde çok boşluk kalabilir. Merkezden kırpma kareyi doldururken görselin bir bölümünü keser. İki yöntem de geniş bir yazılı logoyu kendiliğinden uygun hale getirmez.

Konu ortada değilse önce görsel kırpma aracı ile alanı kendiniz seçin. Favicon oluşturucu ortadan kırpar; kesim alanını kenardaki bir yüze veya sembole kaydıramazsınız.

Saydam görseller ve keskin grafik kenarları için PNG deneyin. JPG kullanıyorsanız küçük önizlemede bulanıklık veya noktalanma olup olmadığını kontrol edin. Biçimi değiştirmek kaybolan ayrıntıyı onarmaz. JPG ve PNG kılavuzu seçim konusunda yardımcı olur.

Favicon boyutları ve biçimleri: hangi dosyalar gerekli?

Her cihaz boyutu için ayrı simge yüklemeniz gerekmez. Sitenizin gereksinimlerinden başlayın. HTML sitesi birkaç bağlantılı simge kullanabilir; içerik yönetim sistemi ise tek görselden kendi sürümlerini oluşturabilir.

ICO birden fazla simge içerebilir. Pixilo 16, 32 ve 48 piksellik görsellerden gerçek bir ICO oluşturur. PNG'nin adını .ico yapmak bu yapıyı oluşturmaz. PNG her dosyada tek görsel tutar ve ayrı ayrı kontrol edilebilir.

180 piksellik Apple simgesinin görevi tarayıcı favicon'undan farklıdır. Apple, ana ekran görseli için apple-touch-icon bağlantısını web uygulaması belgelerinde açıklar. Küçük tarayıcı simgesi bu büyük çıktı için iyi bir kaynak değildir.

ZIP paketinde dokuz dosya vardır. 32 ve 48 piksellik PNG'ler, bu boyutları isteyen alanlar veya kurulumlar için alternatiftir. Bunları ICO ve 96 piksellik PNG ile birlikte bağlamak zorunda değilsiniz. Kurulum notları ziyaretçiler için değil, sizin okumanız içindir.

Saydamlığı ve boşlukları dikkatle seçin

Saydam simgeler temiz görünebilir, ancak zemin arayüze göre değişir. Koyu sembolü koyu, açık sembolü açık zeminde deneyin. Tanınması zorlaşıyorsa karşıt renkli bir kenarlık veya düz renkli zemin kullanın.

Pixilo'da saydamlık ICO ve 32, 48, 96 piksellik PNG'lere uygulanır. Apple, 192 ve 512 piksellik simgeler her zaman seçilen düz rengi kullanır. Bu nedenle tarayıcı simgeleri saydam olsa bile zemin rengi büyük simgeleri etkiler.

Saydamlık mevcut arka planı silmez. Logonun çevresindeki beyaz pikseller beyaz kalır. Saydam boşluk istiyorsanız gerçekten saydam arka planı olan bir kaynakla başlayın.

Boşluk yüzdesi her kenara uygulanır. %10, kare görsele genişliğin %80'ini; %20 ise %60'ını bırakır. 16 pikselde ikinci seçenek sembole yaklaşık 10 piksel verir. Biraz boşluk rahatlatır, fazlası simgeyi görmeyi zorlaştırır.

Kaynak görselin kendi boşluklarını da kontrol edin. Logo PNG'nin yalnızca ortadaki yarısını kaplıyorsa ek boşluğu sıfırlamak mevcut kenar boşluklarını kaldırmaz. Gereksiz alanı önce kırpın, ardından araçtaki değerleri karşılaştırın.

Varsayılan boşlukla başlayıp daha az ve daha fazla boşluğu deneyin. Önce 16 piksellik önizlemeyi değerlendirin. Yüzde, yalnızca renkli şekli değil görselin tamamını kapsar.

WordPress'e favicon nasıl eklenir?

Yerleşik Site Simgesi özelliğini kullanın. WordPress belgeleri en az 512 × 512 piksel kare PNG önerir. WordPress 6.5 ve sonrasında Ayarlar → Genel bölümünden simgeyi seçip kaydedin. Eski sürümlerde Görünüm → Özelleştir → Site Kimliği altında olabilir.

Uyumlu blok temalarında seçenek Görünüm → Düzenleyici → Identity altında da bulunabilir. Menü adları arayüz diline göre değişir. Ekranınız buna uyuyorsa Site Düzenleyicisi Identity belgelerine bakın.

Bu yöntem için Pixilo'nun icon-512.png dosyasını seçin. Düz zemini olduğundan yüklemeden önce rengi kontrol edin. Saydamlığı korumak isterseniz uygun bir kare PNG orijinali de kullanabilirsiniz.

1. Hazırlanan PNG'yi Site Simgesi alanında seçin.
2. Kaydedip herkese açık ana sayfayı ve başka bir sayfayı açın.
3. Sekmeyi kontrol edin. Başka bileşen eski simgeyi ekliyorsa sorun giderme bölümündeki adımları izleyin.

WordPress bağlantıları sizin için oluşturur. ZIP bir tema veya eklenti değildir. HTML etiketlerini yazı veya sayfa içeriğine koymayın.

Site Logosu ve Site Simgesi farklı ayarlardır. Sayfanın üstündeki geniş logoyu değiştirmek küçük sekme simgesini değiştirmeyebilir. Simgeyi yöneten ayarı seçip kaydedin.

Pixilo ile logodan favicon oluşturun

1. Bir görsel seçin. Favicon oluşturucuyu açıp en fazla 25 MB büyüklüğünde JPG, PNG veya WebP seçin. Kaynak ayrıca kenar başına 8000 pikseli ve toplam 32 milyon pikseli aşmamalıdır.
2. Yerleşimi seçin. Sığdırma, görselin tamamını ve oranlarını korur. Kare kırpma merkezden bir alan alır. Önemli bölümlerin kesilmediğini kontrol edin.
3. Boşluğu ve zemini ayarlayın. Gerçek boyuttaki tarayıcı önizlemeleriyle Apple önizlemesini karşılaştırın. Tarayıcı simgelerinin saydam olup olmayacağını seçin.
4. Gerekli dosyaları indirin. Paketin tamamı için ZIP'i, belirli yükleme alanı için tek dosyayı kullanın.
5. Kurup test edin. Site ayarlarını veya aşağıdaki HTML talimatlarını kullanın. Yalnızca önizlemeyi değil yayımlanmış siteyi kontrol edin.

Önizlemeler doğru görünene kadar ayarlayın, sonra indirin. Ayrı kaydetme düğmesi gerekmez; indirme en son seçimleri kullanır. Ancak cihazınıza önceden indirdiğiniz dosya sonradan değişmez. Tasarımı değiştirirseniz yeniden indirin.

Kaynak ve oluşturulan dosyalar cihazınızda kalır. Pixilo sunucusuna görsel yüklenmez. Seçilen görsel ve ayarlar açık sayfada tutulduğundan kapatmadan veya yenilemeden önce sonucu indirin.

Başka bir görsel seçince görsel seçici yeniden görünür. Mevcut ayarlar korunur; yeni tasarım için yerleşim, boşluk ve zemini tekrar kontrol edin.

Örnek: geniş logoyu kullanışlı bir simgeye dönüştürmek

Bir fırının ekmek sembolü ve uzun ad içeren 1200 × 600 boyutunda logosu olduğunu varsayalım. Bu bir iş akışı örneğidir; makaledeki görsellerin ölçülmüş karşılaştırması değildir.

1. Sembolü ayırın. Ekmek çizimini özgün tasarımdan 512 × 512 kare PNG olarak aktarın. Logonun küçük ekran görüntüsünü kullanmayın.
2. Gereksiz boşluğu kaldırın. Ekmek kenarlarını koruyup karede yeterince büyük görünmesini sağlayın.
3. Küçük önizlemeleri karşılaştırın. Sığdırma ve varsayılan boşlukla başlayın. Ekmekteki çizgi 16 pikselde kayboluyorsa bulanık kopyayı büyütmek yerine özgün çizimi sadeleştirin.
4. Zemini test edin. Koyu kontur koyu zeminde kayboluyorsa tarayıcı simgelerinde karşıt düz renk deneyin. Apple önizlemesini de kontrol edin.
5. Site yapısına göre indirin. HTML için tarayıcı ve Apple simgeleri gerekiyorsa ICO, 96 piksellik PNG ve Apple simgesi kullanın. WordPress için 512 piksellik PNG seçin.

Simge kurulmadan önce tanınabilir olmalıdır. Yalnızca büyük önizlemede iyi görünüyorsa tasarıma dönün. Doğru uzantı karmaşık bir çizimi sadeleştirmez.

HTML sitesine favicon nasıl eklenir?

ZIP'i açıp seçtiğiniz simgeleri sitenin yayımladığı klasöre koyun. Aşağıdaki kök yollarla ICO, https://example.com/favicon.ico gibi bir adreste bulunmalıdır. Dosyaları derleme sırasında çıktıya kopyalanan kaynak veya herkese açık varlık klasöründe tutun. Yalnızca üretilmiş çıktı klasörüne eklenen dosya sonraki derlemede kaybolabilir.

Tarayıcı simgeleri için ilk iki etiketi sayfanın <head> bölümüne ekleyin. Apple ana ekran simgesi de istiyorsanız üçüncüyü kullanın. Ortak head şablonu varsa etiketleri oraya ekleyerek tüm sayfalarda aynı bağlantıları kullanın.

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

href dosyanın adresini, sizes boyutunu belirtir. Tarayıcı tercihi biçime, boyuta ve diğer tanımlara bağlı olabilir; ilk etiketin her zaman seçildiğini varsaymayın. MDN rel="icon" belgesine bakın.

Dosyalar /icons/ klasöründeyse üç yolu da /icons/favicon.ico, /icons/favicon-96x96.png ve /icons/apple-touch-icon.png olarak değiştirin. Konum ve bağlantı eşleşmelidir.

/ ile başlayan yol alan adının kökünden başlar. Site /portfolio/ gibi alt klasördeyse doğru yayımlanmış yolları kullanın. Yayımladıktan sonra her adresi doğrudan açıp kontrol edin.

Etiket eklemeden önce ortak head içindeki mevcut favicon ve manifest tanımlarını arayın. Eski bağlantıları gerektiğinde değiştirin. Temanın eski simgesini de bırakmak tarayıcının hangisini seçtiğini anlamayı zorlaştırır.

İsteğe bağlı: uygulama manifestini ekleyin veya güncelleyin

Yalnızca tarayıcı simgeleri gerekiyorsa bu bölümü atlayın. Manifest ayrı bir dosyadır ve sekme simgesi için zorunlu değildir.

Web uygulaması manifesti, simgeler dahil uygulamayı tanımlayan JSON dosyasıdır. Pixilo'nun site.webmanifest dosyası yalnızca simge kayıtlarını içerir. Manifestiniz varsa yeni simgeleri ekleyin; uygulama adı, başlangıç adresi ve görüntüleme modunu silmeyin. web.dev manifest kılavuzu bu alanları açıklar.

{
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

Yeni manifesti kullanacaksanız aşağıdaki bağlantıyı ortak head bölümüne ekleyin. Zaten başka manifeste bağlantı varsa ikinci bağlantı eklemek yerine mevcut dosyayı güncelleyin.

<link rel="manifest" href="/site.webmanifest">

Manifest /icons/ altında yayımlanırsa bağlantısı href="/icons/site.webmanifest" olur. JSON görsel yollarını da /icons/icon-192.png ve /icons/icon-512.png olarak değiştirin. Başlangıçtaki eğik çizgi manifest klasörüne değil alan adının köküne işaret eder.

Oluşturulan simgeler purpose: "any" kullanır. Bunlar maskable simgeler değildir; cihaz daire veya başka biçimde kırptığında önemli ayrıntıların korunması için özel tasarım gerekir. Düz zemin tek başına yeterli değildir. Tasarımı hazırlayıp test etmeden purpose değerini maskable yapmayın. MDN simge amacı belgesi farkı açıklar.

Dosya hâlâ yalnızca simgeleri içerir. Tam uygulama yapılandırması sağlamaz ve tek başına siteyi yüklenebilir uygulamaya dönüştürmez.

Favicon Google Arama'da ne işe yarar?

Tanınabilir simge arama sonucunda sitenizi ayırt etmeye yardımcı olabilir. Bunu marka ve kullanılabilirlik ayrıntısı olarak görün; daha iyi sıralama veya daha fazla tıklama garantisi değildir.

Google'ın favicon kuralları en az 8 × 8 piksel kare görsel ister ve 48 × 48'den büyük boyut önerir. Paketin 96 piksellik PNG'si uygundur. Ana sayfadan bağlayın, adresi sabit tutun ve Googlebot'un ana sayfaya, Googlebot-Image'ın simgeye erişmesine izin verin.

Google example.com gibi her ana makine adı için bir favicon kullanır. example.com/blog/ altındaki bölüm ayrı simge almaz. Kuralları karşılamak görüntülenmeyi garanti etmez. Yeniden tarama ve işleme günler veya haftalar sürebilir. Search Console'daki dizine ekleme isteği anında güncellemeyi zorlamaz.

Tarayıcıda yeni simge çalışıyor ama Arama'da eski görünüyorsa önce herkese açık dosyaları ve ana sayfa etiketlerini doğrulayın. Beklerken sürekli tasarım değiştirmek hangi sürümün işlendiğini anlamayı zorlaştırır.

Favicon neden görünmüyor veya eski görsel kalıyor?

Kurulum hatasıyla önbellekteki eski kopyayı ayırın. Yeni simgenin adresi çalışmıyorsa sayfayı yenilemek çözmez. Adres doğru görseli gösteriyorsa etiket ve önbelleği inceleyin.

Tam simge adresini yeni sekmede açın. Ana sayfa, giriş ekranı veya hata yerine görseli göstermelidir. Ayrıntılı kontrol için geliştirici araçlarında Ağ bölümünü açıp yeniden yükleyin. Yanıt görsel yerine HTML ise 200 durum kodu yeterli değildir.

Ana sayfanın ve bir alt sayfanın yayımlanmış head bölümünü kontrol edin. Şablon değişikliği çıktıya ulaşmamış veya başka bileşen eski simgeyi ekliyor olabilir. Kurduğunuz dosya adlarını ve yollarını arayın.

Tarayıcı favicon'u sayfadan ayrı önbelleğe alabilir. Sekmeyi kapatıp açın, yeni profil veya başka tarayıcıyla karşılaştırın. Normal yenileme hemen değiştirmeyebilir. Bu kontroller yerel önbellek sorununu ayırır; her yerde aynı anda güncelleme garantisi vermez.

CDN veya service worker varsa eski yanıt sunup sunmadığını kontrol edin. İlgili önbelleği barındırma veya uygulama üzerinden güncelleyin. Bir seferde tek düzeltme yapın, yanıtı doğrulayın ve gerekirse devam edin.

Bitirmeden önce kontrol edin

• Tasarım yakınlaştırmadan 16 ve 32 pikselde tanınıyor.
• Kenarlar ve renkler açık ve koyu zeminde belirgin.
• İndirilen dosyalar son yerleşim, boşluk ve zemin seçimlerini kullanıyor.
• Her simge adresi yayımlama sonrası doğru dosyayı açıyor.
• Ortak head doğru bağlantıları içeriyor, eski kopyalar yok.
• Apple ve manifest bağlantıları yayımlanan dosyalara gidiyor.
• Mevcut manifest diğer ayarlarını koruyor.
• Google Arama'da kullanılabilmesi için ana sayfa ve simge taranabiliyor.

Özgün çizimi ve son paketi birlikte saklayın. Simgenin nereden ayarlandığını not edin: ortak HTML şablonu, WordPress Site Simgesi veya site oluşturma aracı. Sonraki marka değişikliği böylece kolaylaşır.

Sık sorulan sorular

En uygun favicon boyutu nedir?

İhtiyacınız olan çıktılara yetecek büyüklükte, net ve kare görsel kullanın. 512 × 512 kaynak paketin en büyük dosyasını karşılar; yalnızca küçük sekme için şart değildir. Boyut tablosuna bakın.

Hem ICO hem PNG gerekir mi?

Her kurulumda gerekmez. Pixilo HTML örneğinde küçük boyutları içeren ICO ve daha büyük PNG vardır. Bir CMS tek kaynaktan kendi sürümlerini oluşturabilir. Her dosyayı yüklemek yerine kullandığınız ayarın gereksinimlerine uyun.

Favicon saydam olabilir mi?

Evet, tarayıcı simgeleri saydamlığı koruyabilir. Sembolü farklı zeminlerde kontrol edin. Ana ekran simgeleri seçilen düz rengi kullanır; saydamlık ayarı kaynaktaki mevcut arka planı kaldırmaz.

Logo favicon olarak neden bulanık?

Kaynak bulanık veya küçük simgenin gösterebileceğinden fazla ayrıntılı olabilir. Büyütmek bunları çözmez. Net kaynak kullanın, ayrıntıyı azaltın ve boşluk ayarından önce gerçek boyuttaki önizlemeye bakın.

ZIP'i doğrudan WordPress'e yüklemeli miyim?

Hayır. Açıp icon-512.png gibi uygun kare PNG'yi Site Simgesi ayarında kullanın. ZIP, dosya ve talimatlardan oluşur; tema veya eklenti değildir.

Favicon SEO'yu iyileştirir mi?

Tutarlı ve tanınabilir bir site kimliği sağlar, ancak sıralama artışı varsaymayın. Arama için Google gereksinimlerini karşılayıp işlenmesini bekleyin. Uygun olmak, görüntülenme garantisi değildir.

Yapay zekâyla özetleChatGPT (yeni sekmede açılır)Grok (yeni sekmede açılır)Google (yeni sekmede açılır)Perplexity (yeni sekmede açılır)Claude (yeni sekmede açılır)