Favicon nedir? Nasıl oluşturulur? WordPress’e nasıl eklenir?

Favicon

Web sayfalarının isminin hemen solunda gösterilen küçük boyuttaki iconlara Favicon denir. Favicon görselini bir web sayfası için olmazsa olmaz listesine sokabiliriz. Gayet basit bir şekilde hazırlanan bu iconlar içeriğinizi özetler niteliktedir.

Favicon.ico

Yukarıda da tanımladığımız gibi tarayıcılarda site isminin solunda gösterilen küçük iconlara verilen isimdir.

Favicon.ico dosyasının boyutları değişsede temel özelliği kare şeklinde eş uzunluktaki kenarlara sahip olmasıdır. İdeal boyut  için 16×16 piksel kullanılabilir fakat bu oranın katları 32×32, 64×64, 128×128 piksel gibi boyutlandırmalar da sorun yaratmayacaktır.

Favicon görselleri tüm tarayıcılarda çalışmakta fakat tahmin edebileceğiniz gibi Internet Explorer gösterimi sadece .ico uzantısı için yapmakta. Dolayısıyla makalemizin devamında .ico formatına sadık kalacağız.

Favicon.ico nasıl hazırlanır?

Photoshop gibi görsel editörleri sayesinde kendi faviconlarınızı hazırlayabilirsiniz. Tek yapmanız gereken kare boyutlarında çalışmak. Yukarıda belirttiğimiz örnek piksel boyutlandırmalarından birini kullanabilirsiniz.

Çalışmanızı çizdikten sonra önemli bir diğer adım, kaydetme işlemine geliyoruz. Görsellerinizi PNG uzantısıyla kaydederseniz hem kalite kaybı yaşamazsınız, hem de transparan arka planlarınızı korursunuz.

PNG formatındaki dosyasını ICO‘ya çevirmek için Favicon Generator‘u kullanabilirsiniz. Bu site PNG dosyalarını hızlıca ICO dosyasına çevirmekte.

Web sayfama nasıl Favicon.ico eklerim?

Yukarıdaki adımları izleyerek bir .ico dosyası oluşturdunuz ve sıra onu web sayfasına eklemeye geldiyse yapacağınız işlem gayet basit. Hazırladığınız dosyayı FTP aracılığıyla ana dizininize atın.

WordPress kullanıcıları buraya dikkat, dosyalarınızı wp-content, wp-admin ve wp-includes gibi klasörlerin bulunduğu ana dizine atmanız gerekiyor. Temaların olduğu kısma yükleme yaparsanız aşağıdaki adres satırı çalışmayacaktır.

Favicon görselinizi sitenize eklemek için aşağıdaki kodları <head></head> içerisine yerleştirin.

WordPress kullanıcısıysanız bu kodları temanızın header.php dosyasına ekleyebilirsiniz.

<link rel="icon" type="image/x-icon" href="https://www.adobewordpress.com/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="https://www.adobewordpress.com/favicon.ico" />

Yukarıda adobewordpress.com olarak adreslendirdiğimiz alanlara kendi web sayfanızı eklemelisiniz.

Bu da ilginizi çekebilir  SEO kaybı yaşamadan WordPress'i başka bir domaine taşımak

Yapamadıysanız üzülmeyin

WordPress temalarını düzenlemek bazen karmaşık olabiliyor. Yukarıdaki adımları izleyerek WordPress sitenize Favicon ekleyemediyseniz üzülmeyin. Buradaki eklenti sayesinde de aynı işlemi yapabilirsiniz.

Kapanış

Favicon için seçtiğiniz veya hazırladığınız görsellere özen göstermenizi öneriyoruz. Web sayfanızı 16×16 piksel boyutlarda özetlemeniz pek kolay olmasa gerek…