Blogger'a favicon nasıl eklenir?

Favicon
Favicon
Bloggera favicon nasıl eklenir? Blogger (blogspot) bloglara sık kullanılan simge favicon nasıl eklenir, değiştirilir? Blogger blogspot bloglara favicon nasıl eklenir? Blogger (blogspot) favicon mobilde görünmüyor sorunu ve çözümü?

Dostlarım favicon ile ilgili basit bir çözümü paylaşmak istedim bu yazımda. Son zamanlarda konuyla ilgili gelen bir kaç yorum ve sorular bu içeriği hazırlamamda etkili oldu.

Daha önce favicon ile ilgili "Blogger'a sık kullanılan simge (favicon) ekleme ve değiştirme" başlıklı yazı paylaşmıştım. Ama gelişen dijital araçlar, Blogger'ın bu konuda kendini güncellememesi gibi sorunlardan dolayı yeniden güncel bir içerik paylaşma ihtiyacı duydum. Umarım sizin için faydalı bir içerik olur.

Favicon (Sık kullanılan simge) nedir?


Hatırlamak amacıyla faviconun ne işe yaradığından bahsedelim. Bildiğiniz üzere favicon, sık kullanılan simge; internet tarayıcıların köşelerinde:
İnternet tarayıcılarında favicon
İnternet tarayıcılarında favicon
Arama motorları, arama sonuç sayfalarında:
Arama sonuçlarında favicon
Arama sonuçlarında favicon
Mobil kullanımda ana ekrana eklerken ve arama yaparken:
Mobil cihazlarda favicon
Mobil cihazlarda favicon
karşımıza çıkan bir simge, bir icon. Genelde bu icon logolardan yola çıkarak tasarlanır. Kesinlikle küçük boyutlu ve kare olması gerekir.

Yukarıya eklediğim görseller aşağıda paylaştığım kodları ekledikten sonra kaydettiğim görüntüler. Normalde Blogger (blogspot) panelinde ayarlar kısmında eklediğimizde bu şekilde sağlıklı görüntüler elde edemiyoruz. Sadece internet tarayıcılarında ve bazen arama sonuçlarında görünebiliyor. Ama aşağıda paylaştığım kodlardan sonra her yerde, her dijital üründe favicon gayet güzel bir şekilde görünmekte.

Bloggera favicon kodları nasıl eklenir?


Blogger HTML'yi düzenle
Blogger HTML'yi düzenle
Konuyla ilgili bir önceki yazımda bunun kodunu paylaşmıştım ama o kodun da işe yaramadığı geri bildirimlerle anlaşıldı. Bu sefer ise kodları WordPress'ten aldım. Wordpress ile oluşturduğum bir websitem de ekli olan favicon kodlarını olduğu gibi Blogger'a ekledim ve olumlu sonuç aldım. İşte o kodlar:
<!-- Favicon Kodu -->
<link href='favicon-görsel-adresi-buraya' rel='icon' sizes='32x32'/>
<link href='favicon-görsel-adresi-buraya' rel='icon' sizes='192x192'/>
<link href='favicon-görsel-adresi-buraya' rel='apple-touch-icon'/>
<meta content='favicon-görsel-adresi-buraya' name='msapplication-TileImage'/>
<!-- Favicon Kodu -->
Blogger yönetim panelinde Tema, ardından HTML'yi düzenle butonuyla HTML alanına ulaşıyoruz. Burada Ctrl F yardımıyla
<head>
tagını buluyoruz. Bu kodun hemen altına yukarıda paylaştığım kodları ekliyoruz. İşlem bu kadar basit ama henüz daha işimiz bitmedi.

Kodlarda favicon-görsel-adresi-buraya olan kısma favicon görsellerinizin linkini eklemeniz gerekir. Bunun için ilk olarak simgemizi kare olacak şekilde ayarlıyor ve daha sonra hızlıresim.com gibi resim yükleme araçlarıyla görselimizin linkini alıyoruz. Linki kodların arasına belirttiğim gibi ekledikten sonra blogunuzu kaydedip sonucunu görebilirsiniz.
Favicon kodu
Favicon kodu
Canlı örneği Blog Tecrübem'de de mevcut zaten.

Vakit kaybetmeden hemen uygulayabilirsiniz dostlarım bu kodu. Uygulama kısmında sorularınız olursa yorum yaparak bana bildirebilirsiniz.

Not: Bir sonraki yazımda, mobil kısımda ufak ve güzel bir değişiklik sağlayacak basit bir kod daha paylaşacağım.

Yorum Gönder

Daha yeni Daha eski

İletişim