スマホのファビコンの設定方法
ついに新元号が発表されましたね！
令和…響きがやわらかくていいですね
まだちょっと違和感がありますが、しばらくしたらスーパーやそこら中に「令和」という文字が溢れかえって知らないうちに慣れそうな気がします笑
今回はまたファビコンのお話です。
先日「ホームページをiPhoneのホーム画面に追加すると真っ黒のアイコンになる」という現象に出会いました。すっかりwordpressの基本設定に甘えてました…！それは個別に設定が必要なのか！ということでメモも兼ねて…
①ファビコンの画像を作る
まずはこちらのサイトでファビコン用の画像を用意します。
様々なファビコンを一括生成。favicon generator
https://ao-system.net/favicongenerator/
↑いっぱい出来るよ
なんと53個もファイルが出来ますがひとまず使うのは
・favicon.ico
・apple-touch-icon-180×180.png
だけです。
この２つを任意のフォルダに入れます。
②ファビコンの設定
【head内に】
|
1 2 3 4 |
<link rel="icon" type="image/x-icon" href="任意のフォルダ名/favicon.ico"> <link rel="apple-touch-icon" sizes="180x180" href="任意のフォルダ名/apple-touch-icon-180x180.png"> |
以上になります。
簡易的ではありますがこれでひとまずPC（Android）とiPhoneのファビコンの設定は完了です。
PCだけなら前に書いた→【wordpressの楽チンなファビコン設定方法】でも良いのですが、iPhone用のファビコンも同時に設定する場合は今回の方法の方が楽チンですね。
safariやchromeなどにも細かい設定ができるのでいろいろ調べながら追加していきたいです。
スマホが手放せない現代、気を回さなければいけない部分がどんどん増えてるので勉強の日々です 🙄