Favicon Gözükmüyor Sorunu Kesin Çözüm

Web sitesi açtınız ancak Google Chrome, Mozilla Firefox, Safari vb. tarayıcılarda favicon gözükmüyor mu? Google arama sonuçlarında favicon gözükmüyor mu? Web sitesi ikonunu kısa yol olarak indirdiniz, ancak logolu ikon olarak gözükmüyor mu? Çözümünü konumuzda paylaştık.

Peki favicon ne işe yarar ve ne için kullanılır?

Web sitenizin simgesi veya web sitenizi internette tanımlamanız için görsel bir işaret görevi görür. Küçücük boyutlarına rağmen faviconlar, kullanıcı deneyimini, markalaşma çabalarını ve profesyonelliğini geliştirerek web sitesi görselliği açısından büyük önem taşımaktadır. Web sitelerinin olmazsa olmazlarındır diyebiliriz.

Geçmişte zamanlarda favicon’un orijinal formatı ICO idi. Günümüzdeyse faviconlar için tercih edilen dosya biçimi veya vektörel grafik, PNG veya JPEG formatındadır. Gittikçe daha fazla tarayıcının desteklemeye başladığı SVG de giderek popülerleşen bir seçim.

Tarayıcılar ayrıca GIF olarak oluşturulmuş faviconları da görüntüleyebiliyor; ancak çok küçük boyut kullanımı, GIF faviconların görülmesini zorlaştırabiliyor. Bu nedenden dolayı GIF faviconlar tercih edilmemektedir.

Favicon’un SEO’ya bir etkisi var mıdır?

SEO’ya favcionların doğrudan bir etkisi olmadığı bilinmektedir. Ancak tarayıcıların tanımlamasını kolaylaştırıp genel kullanıcı deneyimini geliştirmesinden ötürü favicon’un nitelikleri, sitenizin arama sonuçlarındaki sıralanışını doğal olarak iyileştirebilir. Dolaylı bir yoldan olsa da favicon, sitenizin akılda kalıcılığı ve SEO üzerinde olumlu bir etki bırakabilir. Arama sonuçlarında da daha güvenilir bir site izlenimi vermektedir.

Web sitesi açan herkesin başına bir kere de olsa Favicon Gözükmüyor sorunu gelmiştir.

Favicon.ico’nun gözükmeme sorununu çözmek için aşağıdaki adımları uygularsanız, kesin olarak sorun çözülecektir.

Adımları uyguladıktan sonra eğer cache eklentisi kullanıyorsunuz ön belliği temizlemeyi unutmayınız.

Neden Favicon Gözükmüyor?

Öncelikle arka planı transparan olan 70×70 veya 96×96 veya 260×260 boyutunda sitenizin ikonunu hazırlamalısınız. 19×19 da olabilir ancak biz sadece tarayıcıda gözükmesi için değil, tüm işletim sistemlerinde ikonunuzun hatasız bir şekilde gözükmesi için ikonunun boyutunu büyük seçtik.

Ben 96×96 olarak hazırladığım ikonu kullanacağım.

Kullanılan favcion.ico boyutların sıralaması şu şekildedir.

• 16×16: Tarayıcı faviconu
• 32×32: Görev çubuğu kısayolu faviconu
• 96×96: Masaüstü kısayolu faviconu
• 180×180: Apple touch faviconu

Öncelikle Favicon Oluşturucu web sitesine giriyoruz.

Daha sonra Select your Favicon image butonuna tıklayarak hazırlamış olduğunuz yani favicon olarak kullanacağınız ikonu seçiniz. Farklı boyuttan dolayı uyarı çıkması durumunda contine diyerek devam ediniz.

İkonu yükledikten sonra karşınıza çıkacak ekranda favicon’un ön izlemeleri çıkacak, bu adımda renklerle oynayabilir kendinize göre özelleştirebilirsiniz. Ancak sistem zaten en uygun seçimleri yaptığı için değiştirmenizi tavsiye etmiyorum.

Sayfanın en alt kısmında dikkat etmeniz gereken birkaç husus var.

İlk butonda, Favicon dosyalarını ( favicon.ico, apple-touch-icon.png, vb.) web sitemin kök dizinine yerleştireceğim.

İkinci butonda ise, Favicon dosyalarını web sitemin köküne yerleştiremiyorum veya istemiyorum. Bunun yerine onları buraya yerleştireceğim. Seçenekleri var.

Sitenin FTP ana dizinin de dosya karmaşası olmaması için ben ikinci seçeneği seçeceğim.

İkinci seçeneği seçerseniz bir dosya yolu belirtmelisiniz. Birden fazla ikon oluşturacağı için sitenizin ana dizininde (httpdocs) karışıklık olmaması için bir dosya yolu oluşturup ikonları dosyanın içerisine atacağız. Benim oluşturduğum dosya yolu /favicon (Bu dosya adını kendiniz belirleyebilirsiniz)

Dosya yolunu seçtikten sonra Generate your favicons and HTML code (Html kodunuzu oluşturun) butonuna tıklyoruz.

Alttaki görselde gözüktüğü gibi size favicon indirme dosyası ve html kodlarınızı verecek.

İkonları indirip zip dosyasından çıkartarak, görselleri favicon adıyla bir klasör içerisinde FTP ana dizinine atıyoruz.

Vermiş olduğu html kodları ise Wordpress temanızın header.php içerisinde </head> kodunun hemen öncesine ekliyoruz ve kaydediyoruz.

Cache önbelleğinizi temizledikten sonra favicon gözükmüyor sorununuz çözülmüş olacaktır. Google’nin index süresi siteye göre değiştiğinden arama sonuçlarında gözükmesi zaman alabilir.

Yaptığınız işlemin başarılı olup olmadığınız Buraya tıklayarak test edebilirsiniz.

Yapmış olduğum favicon örnek test sayfası:

Sitene HTML Favicon Ekleme

Sitenizi bir web sitesi oluşturucu kullanarak kurduysanız, faviconunuzu HTML’de eklemek gerekli değildir. Bu adım, yalnızca bir geliştirici tarafından oluşturulan siteler için geçerlidir. Aşağıda, favicon resminizin web sitenizde görülebilmesi için kod başlığına nasıl eklenmesi gerektiğini gösteren bir video paylaştık.

<link rel=”icon” type=”image/png” href=”favicon.png”/>

Html favcion ekleme nasıl yapılır örnek video:

Sorun ve sorularınızı yorum olarak belirtirseniz, dönüş yapılacaktır.