Site Icon

The site icon (on viewports larger than 825px) is meant to transition when hovered over. The example I have below involves going from a greyscale still image to an animated gif on hover. This is obviously optional. If you want to just have a single photo for the site icon, delete the css for .site-icon:hover in the sass file under _sass/modules/_site-icon.scss.

Animated Site Icon

If you wish to have an animated site icon, use the included css in _sass/modules/_site-icon.scss and just change the background to your own images and/or gifs.

Here is an example codepen of how this can work:

See the Pen Animated Site Icon by John Devine (@jpatrickdevine) on CodePen.