ファビコンの実装
自分のwebアプリ、サイトには目標となるファビコンを設定したくなりますよね。
今回は少し手間取ったのでメモとして残します。
ファビコンの作成
IllustratorやPhotoshopで作れる人は作ってもいいでしょうし、僕みたいに作れない人はファビコン専用の作成サイトとかアイコンの作成でもサイズを変えればファビコンにできるので試してみてください
僕は下のサイトを使いました。
色や、枠なども選べて使いやすかったです！
HTMLに記載
ファビコンを設定する時は、htmlファイルのhead内に記載します。
<link rel="icon" href="画像のリンク" >
みたいな感じです。画像のリンクか、相対パスなどでも表示できるみたいなのでプレビューなどで見て表示されるものを使ってください。
僕はawsのs3に画像を保存していたので、hrefの引数はawsの画像オブジェクトurlです。
これでファビコン実装完了です！
各デバイスでの設定
safariやgooglechrome などのサイトは先ほどのコードで表示できるみたいですが、IEやスマホなどでホームに追加した時は表示されません。
なので、デバイス毎に設定する必要があります。
iphoneのホーム画面用
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
android用
<link rel="icon" type="image/png" sizes="256x256" href="android-chrome.png">
*sizeは256x256もしくは192x192
これで各デバイスの設定は完了しました。
一つ一つ書いていったら面倒ですし、画像のサイズをいちいち変えるのはとても面倒なので、もし数が増えそうだったらファビコンの一括作成サイト等を利用するのがいいかと思います。
僕も利用したのですが、公式の手順にそってみても上手く表示されなかったり、開発環境では表示されたのに本番環境になると何故か表示されない現象に陥ってしまったのでawsからの引用となりました。
ファビコンなんて簡単だって〜と思っていたのですが、結構ハマってしまいました。
正直舐めてました笑
やっぱり触ってみないと分からないので、気になることはどんどんやって行きます！
そしてもっとちゃんとした記事を書くぞ！
記事に間違い等ありましたら教えていただけると幸いです！