Favicon Dinamik Olarak Nasıl Değiştirilir?

Site simgesi, diğer yerlerin yanı sıra bir web tarayıcısı sekmesinde, Adres çubuğunda, göz atma geçmişinde ve yer imlerinde veya sık kullanılanlarda gösterilen küçük bir grafik dosyasıdır. Markanızı temsil ettiği ve güçlendirdiği ve sitenizi müşterilerinizin ziyaret ettiği diğer sitelerden ayırt etmeye yardımcı olduğu için sitenize bir favicon eklemenizi öneririz.

Sitenize çeşitli boyutlarda ve dosya türlerinde birden çok favicon ekleyebilmenize rağmen, bu konu tek bir faviconun nasıl ekleneceğini gösterir. Ancak, daha fazla favicon eklemek javascript veya php web proglamlamadan biri kullanılır.

Muhtemelen birçok sosyal ağın ve modern web uygulamasının dinamik faviconlara sahip olduğunu fark edebilirsiniz.

Dinamik faviconlar farklı amaçlar için olabilir, örneğin sosyal ağlar bunu bildirimleri veya mesajları görüntülemek için kullanır. Bazı web sitelerinde başarı düzeylerini izleyen yüzdeye dayalı favicon da vardır ve bir seviyeyi tamamlarsanız, favicon bir başarı simgesiyle değiştirilir. Favicon, insanların dikkatini çekmek için değiştirilir. Web uygulamanızın farklı sayfaları için farklı simgeler arasında geçiş yapabilirsiniz.

JavaScript ile Dinamik Favicon Oluşturma


Bu bizim temel html'mizi oluşturalım. Resimler 0.png ve 1.png olsun.


<!DOCTYPE html>
<html>
<head>
  <title> Dynamic Favicon</title>
  <link id="favicon" rel="icon" href="0.png" type="image/png" sizes="16x16">
</head>
<body>

<h1>Merhaba Dünya!</h1>

<script src="script.js"></script>
</body>
</html>

javascript kodları yazalım.


window.onload = function() {

var faviconIndex = 0;
var favicon = document.getElementById('favicon');//html elementi seçiyoruz

setInterval(function() {
 favicon.href = faviconIndex + ".png";//resimleri 0.png veya 1.png gösterilir.
 faviconIndex++;
 faviconIndex %= 2;//sayının modu alınıyor 0 veya 1
 }, 1000);
};

ÇIKTI:


dynamic favicon

Websitenizin ikinci sayfalarda değişik favicon göstermek isterseniz. websitenin <head></head> bölümünde script etiketleri arasına kodları yazın.


<script>
  var favicon = document.getElementById('favicon');

  favicon.href ="siyah.png";   
</script>  

kodgunlugum 20/09/2020

Web dünyası gelişmeye devam ediyor, her şey dinamik hale gelecek bu gidişle ☺
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

2418

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • HTML AÇIKLAMA SATIRI
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.