Web sayfanıza favicon ekleyip bunu javascript ile değiştirebilirsiniz. Bu örnekte favicon üzerinde küçük bir animasyon yapmayı göstereceğim.
Öncelikle basitce bir faviconu sayfaya nasıl ekleyeceğinize bakalım.
1 2 3 | <link id="favicon" rel="icon" href="res1.png" type="image/png" sizes="256x256"> |
Yukarıdaki gibi web sayfanıza faviconu ekleyebilirsiniz.
JavaScript ile faviconu değiştirme
Peki bir faviconu javascript ile nasıl değiştirebileceğimizi inceleyelim. Yukarıdaki gibi oluşturulan favicona id olarak favicon ismi verimiştir. Bunu kullanarak iconun href özelliğini değiştireceğiz. Sayfa yüklendiğinde faviconu değiştirmek için aşağıdaki kodu yazabiliriz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <title> Title </title> <link id="favicon" rel="icon" href="" type="image/png" sizes="256x256"> </head> <body> <script> window.onload=function(){ const icon = document.querySelector("#favicon").href="res1.png"; } </script> </body> </html> |
JavaScript ile faviconda animasyon yapma
Bunun için bir tane png nesnesinden fazlasına yada bir tane sprite png dosyasına ihtiyacımız var.
İlk yöntemde 0.png, 1.png, 2.png gibi yaparak faviconu değiştirebileceğimiz gibi aşağıdaki gibi sprite nesnesinden görseller oluşturup da aynı sonucu elde edebiliriz.
Yukarıdaki gibi oluşturulmuş sprite nesnesini kaydedip interval kullanarak javacriptte faviconda animasyon yapabiliriz. Ancak yukarıdaki resim birden fazla görseli içerdiği için biraz farklı yöntemler de kullanmak gerekir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <title> Title </title> <link id="favicon" rel="icon" href="" type="image/png" sizes="256x256"> </head> <body> <canvas style="display: none;" id="context" width="256" height="256"></canvas> <img id="r" src="ornek.png" style="display: none;"> <script> const resim = document.querySelector("#r"); const favicon = document.querySelector("#favicon"); const canvas = document.querySelector("#context"); var context = canvas.getContext("2d"); //canvas üzerine resmin tekrar tekrar çizilmesi resim.addEventListener('load', e => { var gen=0; setInterval(function(){ ; context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage(resim,gen*-256, 0); if(gen<5) gen++; else gen=0; favicon.href=canvas.toDataURL("image/png"); }, 150); }); </script> </body> </html> |
Çıktı:
Yorum Yap