ファビコン ― 2015年11月09日 23時13分35秒
このサイト用にファビコンを作ってみた。ファビコンてのはブラウザのタブの脇とかに小さく表示されているアイコンのこと。Favorite iconの略でfabiconっていうんだそーな。以前goooogleのブロガーを使ってたときはファビコンを表示してたんだけど、アサブロに引っ越してからはうまく表示されなくなっていた。
アイコンファイルの作成はX-Icon editorというウェブサービスを使った。専用のアプリをインストールしなくてもブラウザ上で動くこの手のサービスは便利でいいね。使用頻度の高い作業ならともかく、アイコンなんて10年に1回くらいしか作らんし(笑)。もともとあったgif画像を加工したので、あっという間に3種類の異なるサイズのアイコン(拡張子ico)を作ることができた。
作ったアイコン画像はインデックスファイルのあるルートディレクトリに保存して、HTMLのHEAD要素内(＜HEAD＞から＜/HEAD＞の間)に次の構文を入れることで表示されるようになる。
＜link rel="shortcut icon" href="favicon.ico"＞
Favicon.icoは作成したアイコンファイルの名前で、作ったアイコンの名前で置き換える必要がある。ところがアサブロのindexファイルの保存場所にアイコンファイルを置く方法が分からなかったので、Webデータを保存しているフォルダーにアイコンファイルを保存して、
href="http://www.ne.jp/asahi/ ...favicon.ico"
の形でネット上の保存先からアイコンデータを読ませるようにしたらちゃんと表示された。
ブラウザはchromeを愛用しているんだけど、fabiconの表示がちょっと小さい。一番小さい16x16のアイコンが表示されているらしい。IE11で表示してみると一回り大きく表示されているから、こちらは多分24x24じゃないかと思う。chromeのブックマークのアイコンもロードスターに変わった。これ以外と嬉しいカモ(^^)
アイコンファイルの作成はX-Icon editorというウェブサービスを使った。専用のアプリをインストールしなくてもブラウザ上で動くこの手のサービスは便利でいいね。使用頻度の高い作業ならともかく、アイコンなんて10年に1回くらいしか作らんし(笑)。もともとあったgif画像を加工したので、あっという間に3種類の異なるサイズのアイコン(拡張子ico)を作ることができた。
作ったアイコン画像はインデックスファイルのあるルートディレクトリに保存して、HTMLのHEAD要素内(＜HEAD＞から＜/HEAD＞の間)に次の構文を入れることで表示されるようになる。
＜link rel="shortcut icon" href="favicon.ico"＞
Favicon.icoは作成したアイコンファイルの名前で、作ったアイコンの名前で置き換える必要がある。ところがアサブロのindexファイルの保存場所にアイコンファイルを置く方法が分からなかったので、Webデータを保存しているフォルダーにアイコンファイルを保存して、
href="http://www.ne.jp/asahi/ ...favicon.ico"
の形でネット上の保存先からアイコンデータを読ませるようにしたらちゃんと表示された。
ブラウザはchromeを愛用しているんだけど、fabiconの表示がちょっと小さい。一番小さい16x16のアイコンが表示されているらしい。IE11で表示してみると一回り大きく表示されているから、こちらは多分24x24じゃないかと思う。chromeのブックマークのアイコンもロードスターに変わった。これ以外と嬉しいカモ(^^)
