Blogger'a favicon nasıl eklenir?

11 Mayıs, 2020
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.

18 yorum:

  1. Çok teşekkürler hocam. Kodsuz da yapılıyordu diye hatırlıyorum. Düzen bölümünden ekliyorduk sanırım ama sizin sistem de çok iyi...

    YanıtlaSil
    Yanıtlar
    1. Artık Ayarlar kısmında. Evet, kolayca eklenebiliyor Blogger Ayarlar kısmından. Ama her dijital cihazda görünmüyor. Özellikle mobil kısımda sorun yaşatabiliyor. Bu kodlarla tüm sorunlar kalkıyor ortadan. Ben teşekkür ederim yorumunuz için.

      Sil
  2. Çok eskiden paylaşmıştın hatırlıyorum bu yazıyı aradım buldum valla sonunda :)
    Bilgilendirme için teşekkürler.
    Eski Yazın;
    https://www.blogtecrubem.com/2016/11/bloggera-sik-kullanilan-simge-favicon-ekleme-degistirme.html

    YanıtlaSil
    Yanıtlar
    1. :) Zaman çabuk geçiyor. Teşekkür ederim değerli yorumun için.

      Sil
    2. Öyle yetişemiyoruz zamana :)

      Sil
  3. Çok önceden rastgele bir tane oluşturup kullanıyordum ama güncellemem gerektiğini hatırladım. Bu şekilde ekleme yapıp sosyal medyalarda ana sayfamızı link olarak paylaştığımızda faviconun görünmesini sağlayabilir miyiz?

    YanıtlaSil
    Yanıtlar
    1. Hayır, bu kodlar işe yaramaz o konuda. Meta taglarda ana sayfaya görsel atamalısınız. Normalde yayın sayfalarında otomatik olarak ekleniyor. Ana sayfa için de sabit bir görsel eklenmeli. Şu sayfayı inceleyin lütfen (https://developers.facebook.com/docs/sharing/webmasters/getting-started/basic-link/)

      Sil
    2. Bu attığınız linki pek anlayamadım bunula ilgili bir yazı yazarsanız daha iyi olur

      Sil
    3. Merhabalar, Facebook'ta linkiniz paylaşıldığında görünecek olan görsel için kullanılması gereken bir kod.

      Sil
  4. Yanıtlar
    1. Blogger'ın hazır temalarında maalesef HTML kısmında yapılan değişiklikler kaydedilmiyor. Farklı bir çözüm bulmalısınız.

      Sil
  5. Bu ayarlar kısmından da yapılabiliyor diye biliyorum ama...

    YanıtlaSil
  6. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  7. Aynısı yaptım ama olmadı

    YanıtlaSil
  8. Aynısını yaptım diğerleri oldu fakat googleda aratınca çıkan favicon çıkmıyor bi türlü

    YanıtlaSil

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Yazım ve dil bilgisi kurallarına uymayı ihmal etmeyin.
3. Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanın.

Copyright © 2016 - 2024 Blog Tecrübem. All rights reserved. Powered by Dijidal.com and Blogger. I Google
Sitede yer alan tüm içerikler Blog Tecrübem'e aittir, kullanım koşulları çerçevesinde alıntı yapılabilir.