Tristan Sweeney
← Back to blog

Favicon Fun

Published on 2024-9-17 by Tristan Sweeney

photo by Astro
I love the Astro homepage favicon effect, and replicated it on my site.

You can get more creative with the effect, only enabling it on desktop via testing css breakpoints, but I think simple is best.

<script>
  // https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically/260876%23260876
  const icon = document.querySelector < HTMLLinkElement > "link[rel~='icon']";


  if (icon) {
    window.onblur = () => {
      icon.type = "image/png";
      icon.href = "/sauron.png";
    };
    window.onfocus = () => {
      icon.type = "image/x-icon";
      icon.href = "/favicon.ico";
    };
  }
</script>

Written by Tristan Sweeney

← Back to blog

Recent blogposts

to blog