Dynamic coloured favicons

cookpete · Mar 2, 2016 · 66a8c85 · 66a8c85
1 parent fb2ec0e
commit 66a8c85
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>rplayr · create playlists from any reddit url</title>
     <link href='/app.css' rel='stylesheet'>
+    <link rel='icon' type='image/png' />
   </head>
   <body>
     <div id='app'></div>

diff --git a/src/pages/App.js b/src/pages/App.js
@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react'
 import { Link } from 'react-router'
+import randomcolor from 'randomcolor'
 
 import 'normalize.css/normalize.css'
 import '../styles/defaults.scss'
@@ -12,10 +13,30 @@ export default class App extends Component {
     children: PropTypes.node
   };
   componentDidMount () {
+    const { params, location } = this.props
+    this.updateFavicon(params, location)
     if (window.performance) {
       trackTiming('react', 'firstrender', Math.round(window.performance.now()))
     }
   }
+  componentWillReceiveProps ({ params, location }) {
+    this.updateFavicon(params, location.pathname)
+  }
+  updateFavicon (params, pathname) {
+    const seed = params.post_id || params.subreddit || params.multi || pathname
+    const canvas = document.createElement('canvas')
+    canvas.width = 32
+    canvas.height = 32
+    if (canvas.getContext) {
+      const ctx = canvas.getContext('2d')
+      ctx.beginPath()
+      ctx.arc(16, 16, 16, 0, 360)
+      ctx.fillStyle = randomcolor({ seed, luminosity: 'light' })
+      ctx.fill()
+      const url = canvas.toDataURL('image/png')
+      document.querySelector('link[rel="icon"]').setAttribute('href', url)
+    }
+  }
   render () {
     return (
       <div className={classNames.app}>