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:

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. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

KATEGORİ

HTML
CSS
PHP
JQUERY
PHOTOSHOP
JavaScript
Web Dünyası
Linux
MİTHRİL FRAMEWORK
Laravel
Git
React

POPÜLER MAKALE

HTML LİNK(Bağlantı)EKLEME - LİNK VERME
HTML YAZI VE RESİM ORTALAMA
HTML RESME LİNK VERME
HTML FORM OLUŞTURMA
CSS YATAY MENÜ YAPIMI
HTML RESİM EKLEME
CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
HTML DİV ve SPAN NEDİR?
HTML ARKAPLANA MÜZİK EKLEME
KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME

ETİKET