日記/2017/03/26/faviconを設置してみたけど、色々増えてた

今頃になってfaviconを設置してみたが、単にfavicon.icoファイル単品で置いて終わり、という時代の知識で止まっていたため、色々増えてて勉強し直しになってしまった。

• PNGが使えるようになってる。
• Chromeならandroidのホーム画面向けの指定が増えてる。
• SafariならiOSのホーム画面向けの指定が増えてる。
• IE11ならWin8/10以降でのスタートメニューへのピン留め用指定が増えてる。

メジャーどころのブラウザ/プラットフォームベンダからの公式ドキュメント系：

• アイコンとブラウザの色  |  Web  |  Google Developers
  • https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/
  • これが一番包括的な解説をしてくれてる。
• IE11 での Web サイト用カスタム タイルの作成 (Windows)
  • https://msdn.microsoft.com/ja-jp/library/dn455106(v=vs.85).aspx
  • スタート画面でのタイル表示や、ライブタイル表示のカスタマイズ方法を解説してくれている。
  • browserconfig.xml の説明もある。
• Add to Homescreen - Google Chrome
  • https://developer.chrome.com/multidevice/android/installtohomescreen
  • Androidのホーム画面に追加する際のfavicon指定などが解説されてる。 manifest.jsonの解説はここかな？
• Configuring Web Applications
  • https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
  • iOSやSafariでの各種機能向けの表示設定が解説されてる。

favicon作るのも、色んなサイズを用意する必要が出てきてる。それらに対応したfaviconジェネレータも、Webサービスとして色々見つかった。

今回使ったのはこちら：

• 様々なファビコンを一括生成。favicon generator
  • https://ao-system.net/favicongenerator/
  • manifest.jsonやbrowserconfig.xmlも生成してくれた。

これで生成した画像ファイルと、browserconfig.xmlを組み込んだ。manifest.jsonについては、本サイトのようなblogサイト程度であれば不要と判断し、設置は見送り。

他にもこちらが評判良いらしい。（今回は試してない）

• Favicon Generator for all platforms: iOS, Android, PC/Mac...
  • https://realfavicongenerator.net/

その他参考にしたサイト：

• browserconfig.xmlとはなんだ問題 - console.lealog();
  • http://lealog.hateblo.jp/entry/2016/02/01/163620
• Webサイトのページ内容以外での見た目向上方法(ogp, favicon) - facebook,twitter対応済 - Qiita
  • http://qiita.com/lni_T/items/be0c7e3ecf78a47f4746
• [HTML] ファビコンの設置について - Qiita
  • http://qiita.com/ayumisuzuki/items/5c976dc02a9aec906bf1
• クリエイティブなファビコンを設置しよう | Webクリエイターボックス
  • http://www.webcreatorbox.com/tech/favicon/