久しぶりにこのサイトを更新していて思ったのが「そういえばファビコン作ってないな」ということで。

簡単に作るならロゴに使っているsvgをそのまま持ってきて、javascriptで角度指定して回してやれー、と思っていたのですが、いざ画像を読み込んでcanvasに描画するところまで書いてみると既に変な角度がついている。

画像がきちんとDOMの一部として描画されないと回らないものかと思っていましたが、どうやら思い違いだったようです。

このロゴ画像を作ったときCSSアニメーションをファイル中に

2
3
4
5
6
7
8

<style xmlns="http://www.w3.org/2000/svg" type="text/css">
  #gear32 { animation: rotate linear 180s infinite; }
  @keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(180deg); }
  }
</style>

と書いてあって 1秒につき1°で6分かけて一周勝手に回るようになっています。 なので、canvasに定期的に書き込んでやると、JavaScript側での回転操作なしに、画像おのずから回る。

普通の .ico ファイル版もそのうち用意しないといけないですねー。 用意しました。