faviconを設定した

faviconって、ルートディレクトリに置かなきゃいけないもんだとずっと思ってたけど、別にそうじゃなくても設置できるのね。
前から?

いくつかの記事を参考にして、「favicon-192x192.png」、「apple-touch-icon-192x192.png」、「favicon.ico」この3つでいいかなぁと。
どんなサイズが推奨されてるのか、認識されるのか、記事によってほんとバラバラ。なんでだろ。

「apple-touch-icon-192x192.png」はTounch icon、主にiPhoneで使われるらしい。
「favicon.ico」は普通にアイコンファイル。
「favicon-192x192.png」は、よくわかんないけど、icoを読めないブラウザがあるんじゃないかなぁと思って作っといた。

私は幸いIllustratorCCを持っているので、画像を色んなサイズで書き出すのは簡単。
けどそんなのめんどくせーし、リサイズできてもファイル名変えるのとかめんどくせーし、って場合は、「様々なファビコンを一括生成。favicon generator」というサービスを使うといいっぽい。
512×512~700×700pxの範囲内のpngをひとつ用意すれば、あとは一括で変換してくれるらしい。
見たけど、すげえファイル数。
私はそんなに設置すんのめんどいんで、まず上記2つのpng。
後は、上のサービスと同じ会社の別サービス「ファビコン作成 favicon.ico 無料で半透過マルチアイコンが作れます」を使って1つのファイルに3つの画像が入ったマルチアイコンを作った。
こっちのサービスを使ってマルチアイコンを作るには、含めたいサイズの画像をそれぞれ用意しなくちゃなんないけど。
pngのアルファチャネル(透過情報?)はそのまま引き継がれる。

で、マルチアイコンはhtmlのhead内に「<link rel="icon" href="~~~/favicon.ico" type="image/x-icon">」って書いて設置。
Touch iconは「<link rel="apple-touch-icon" href="~~~/apple-touch-icon-192x192.png" sizes="192x192">」って書いて設置。
よくわかんないけど用意したpngは「<link rel="icon" href="~~~/favicon-192x192.png" sizes="192x192" type="image/png">」って書いて設置。
sizes属性でサイズを書いとかないといけないらしい。
あと、画像がちゃんと正方形じゃないと、認識してくれない場合もあるらしい。

設置できたらチェック。
windowsのchromeとIEは普通にチェックできるし、私はAndroid機を持っているのでこっちのチェックも大丈夫。
他はわかんないので、「Favicon checker」というサービスを利用する。
テキストボックスにチェックしたいページのurlを入れてチェック。
こっちのサービスでもアイコン一括生成できるんだね。
ちょっとやってみよう。

Favicon Generator for all platforms: iOS, Android, PC/Mac...」に移動。
なんか260px四方の画像じゃないと、「それでいいのかよ」って訊かれるんで、260pxで用意した。
「Select your Favicon picture」で画像ファイルを選んでアップ。
こんな感じで、色んな環境でどう表示されるかがわかる。
ほんとかな。

2018-08-19_112156.jpg

なんか背景が黒いんですけど。
「Use the original favicon as is. iOS will fill the transparent regions with black.」のラジオボタンが選択されてる。
このままだと背景黒くなるよ~って言ってるのかな。
iOSはアルファチャネルを認識しないんですかね。
「Add a solid, plain background to fill the transparent regions.」を選択して、色も指定してみる。

2018-08-19_112553.jpg

うん、なるほど。
他のブラウザ向けの設定はこのままでよさそう。
一番下の「Favicon Generator Options」では色々設定できるみたい。
しかもhtmlも生成すんの?
最終的にファイルがfc2のなんていうディレクトリにアップされるかわかんないので、Pathもそのままで。

「Download your package: Favicon package」でダウンロード、解凍。
こんなん入ってた。

2018-08-19_113409.jpg

で、下に生成されたコードをheadに書けと。

2018-08-19_113555.jpg

ここで、さっき「Path」を指定してた場合は、画像のパスがちゃんと入るんだね。
ん?
「android-chrome-192x192.png」と「android-chrome-256x256.png」と「mstile-150x150.png」と「favicon.ico」はどうしたの? って思ったら、同梱されてるファイルに情報が入ってるんだね。
そうか、Pathを指定しないとこのファイルの中身も書き換えないといけないのか。
あと、「browserconfig.xml」はとくにコード内に現れないけど、置いとけば勝手に読みに行ってくれるんですかね?
勝手に読みに行くとしたら、どこに置くべきなんですかね?

まあ、わかんないこともたくさんあるけど、便利だなぁ。
けど気になるのは、ダウンロードすると表示されるメッセージ。
「Protect your favicon... and all your intellectual property.
I'm creating a service to protect your intellectual property (source code, images, etc.) against theft.」
ん、これ登録するとどうなんの?
いや、登録しないとどうなんの?
……よくわかんないからほっとこ。
あと、もう最初の画像で設置しちゃったし、めんどくさいからこのファイルたちの出番は今はない。
ここで作ったファイルをここで指定されたとおりに設置すればきっと、「Favicon checker」で怒られることもないんだろうな。

ジャンル : コンピュータ
テーマ : ホームページ・ブログ制作

ステータス
細野ゆとり
あそびにん
せいべつおんな
レベル
ちから
すばやさ
こうげき力
しゅび力
EX
最新記事
カテゴリー
月別アーカイブ
全記事表示リンク

全ての記事を表示する

おえかき
ブログ内ページランキング
twitter
その他SNS
検索フォーム
オンラインカウンター
現在の閲覧者数:
カレンダー
07 | 2018/08 | 09
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -
リンク
カウンター
RSSリンクの表示
QRコード
QR