faviconをいまさら変更したり、そのやり方とか。

2014/08/18, 09:00

■ふぁび☆こん
2014-08-17-005.png


ブログ開設からおよそ20ヶ月を経過したところで突然のfavicon変更。
いまの今まで特に気にしていなかったのですが、なんとなく変えようかなって。
やっぱり「アイコン」は大切ですもんね!(20ヶ月放置

というわけで、↑の画像のように設定しました。
自作したチームフラッグのSAを流用…で済めばよかったのですが、思いのほか潰れた。
半分くらいドット絵を描いた状態。その結果がご覧のぐだぐだだよ!
でも別に読めなくてもええねん。「あっこの感じはアレやな」でええねん。
全部伝えようとせんでええねん。「弐挺拳銃やで」が伝わればええねん。

を受けて「私もやってみようかな…」という方のために、適当に解説!
私が親切丁寧な解説するわけないだろ!いい加減にしろ!


---
ていうかwikiなどを見ればいいのですが、どうせ見ないんでしょ?(決め付け
なので俺流解説をしますと、

・画像サイズは色々なバリエーションがあるが、16x16のものは必ず用意しないとダメ。
・ファイル形式は「.png」とか「.gif」とか「.jpg」とかの一枚画像のほか、「.ico」が使える。
・アニメーションgifは対応していないブラウザが多いかも?(調べてはいない


です。
まとめると、

 「.ico形式で作れば問題ない。


pngやjpgでは16x16の1枚しか設定できませんから、スマホ・タブレット向けの解像度になりません。
16x16をぐぃーんと引き伸ばしたものになっちゃう。超ぼやけるーうけるー。
その点、ico形式で作れば、16x16のほか、64x64や228x228なども格納できちゃう。
ico形式とは、フォルダのようなものです。

yasmi2000h.png
yasmi3000r.png
yasmi7000v.png
yasmi9000m.png

のファイル4つをひとつにまとめて、

yasmi.ico

にできる、ということ。
■やり方
favi.png


かんたんです。
上記サイト、「favicon.icoを作ろう!」でらくらく作成。
流れとしては、

1.設定したい解像度の画像をすべて自分で作ります。
2.最大で8個、合計サイズ400KBの中で設定していきます。順番とかは適当でok。
3.アイコン作成→保存。



アプリ・プログラム側で使われる主な解像度はこちら。
---
16x16  お気に入り、タブ、IEのアドレスバー・ピン留めサイトなど
24x24  ピン留めサイトのブラウザUI
32x32  IEの新しいタブとタスクバーボタン
48x48  Windowsのサイトアイコン
57x57  iOSのホームアイコン
64x64  高解像度デバイスでのWindowsのサイトアイコン
72x72  iPadのホームアイコン
96x96  GoogleTVのアイコン
114x114 RetinaディスプレイのiPhoneのアイコン
128x128 Chrome ウェブストアのアイコン
144x144 IE10 Metroのピン留めサイトアイコン
152x152 RetinaディスプレイのiPadのアイコン
195x195 Operaスピードダイヤルのアイコン
228x228 OperaのiPad向けブラウザ「Coast」のアイコン
 (参照→複数サイズも一つのファイルで!マルチアイコンの「favicon(ファビコン)」作成方法)
---

特に根拠の無い個人的なオススメは、赤い5つ。
これらと、気力と気が向けばバリエーションを追加するとより良いかと思います。
私は「114,195,228」の3つを追加しています。
ぴったりマッチする解像度があればそれが表示されますが、無かった場合は、
一番近いサイズのものが拡大縮小して表示されるとかなんとか。
用意する画像自体も、ただそのサイズに直すだけでなく、ボヤけなどを手直ししたいところ!
フォトレタッチについては各自調べてください。(丸投げ



■つくったら設定
…↑のアイコン作成サイトに手順までバッチリ載っているのですけどね。
といっても、詳細に説明されているため「とりあえず設定できればいい」な人にはちょっと長い。
ので短くまとめます。


---
1.作った.icoファイルをブログにアップロード。(非対応のブログはたぶんないと思う…!)
2.「テンプレートの編集」的なところにいき、HTMLを編集。<head>タグのすぐ下に、

<link type="image/vnd.microsoft.icon" href="アイコンのURL" rel="shortcut icon" />
<link type="image/vnd.microsoft.icon" href="アイコンのURL" rel="icon" />

を貼り付け。
アイコンのURL、というところをご自身の作ったファイルに書き換えて保存。
3.おしまい。

2014-08-17-009.png

---
以上です!
お気に入りのアイコンを設定し、よりアナタらしく、ワタシらしく、彩ることができます。
なので、どこかから拾ってきたものを設定したりはしないようにね!
なんてったって「アイコン」なのですから!



※補足
16x16は冒頭で必須と書きましたが、実際はなくても問題ないことが多いようです。
けど、作っておくに越したことないんだから、作っておけばいいんです。
64x64なり縮小してグシャグシャになったものでいいというのなら作らないでもいいです。

ルートフォルダに.icoをおければ現行のブラウザは大体認識してくれるそうですが、
rootだのFTPだのがわからなければ忘れていいです。
私もよくわかってはいないのでスルーして↑のやり方でやっています。

アニメーションGIFアイコンは現状でfirefox等一部のブラウザだけ対応?らしいですが調べてはいない。
色数も制限されますし、文字をうにゃうにゃさせる以外の表現・運用は難しそうですね。
関連記事

COMMENT

言っちゃ悪いかもだけど
主のセンスが発揮されてないアイコンにみえる
これをチームフラッグにしてるというのも驚きだった
2014/08/19(火) 22:09:44 |URL|名無乃権兵衛 #- [EDIT]
◆ななし一号さん
だいぶ曲がっている気はしますが一応はお褒め頂いているとして、
どうにも解像度が低いと表現がしづらいですね!
2014/08/24(日) 10:08:09 |URL|松乃雪 #- [EDIT]

COMMENT FORM

  • URL:
  • comment:
  • password:
  • secret:
  • 管理者にだけ表示を許可する

TRACK BACK