はじめに
ファビコンとは、ホームページのタイトルの横に表示される小さなアイコンのこと。
こちらのブログではそういえば特に設定していなかったのですが、ふと思い立って作成・設定することに。
ファビコンの作成
画像の作成と、ファビコンとして設定できるように変換処理を行います。
通常ファビコンとして設定するにははicoという拡張子のファイルが必要になります。
と思ったら、ワードプレスはなんとgifファイルで設定が可能なんですね。
とりあえず今回は両方（gif・ico）作ります。
画像の作成
こちらのサイト、blog by pippuriricなので、pマークを使って画像をillustratorを使って作成！
こんな感じ。
背景は透過させて保存しています。
ファイルサイズはwordpressでも使うので、今回は512px × 512pxで作りましたが、ファビコンだけの目的で作るなら最大で48px × 48pxになります。
ファビコンへ変換
icoファイルを作るには、オンラインのサービスを使うのが簡単です。
今回利用したのはこちら。
ファビコン favicon.ico を作ろう! リアルタイム版。16x16と32x32と48x48ピクセルのマルチアイコンが簡単に作れます。プレビューはリアルタイムに確認できます。
全てのサイズに同じファイルを指定して、「favicon.ico 作成」ボタンを押す。
ダウンロードボタンを押すと、ファイルがダウンロードできます。
ファビコンの設定
ワードプレス
ワードプレスの場合、「外観-カスタマイズ-サイト基本情報」からファビコンの設定が可能です。
ファイルも、gifファイルでokです。簡単！
HTML・phpなどCMS利用無しの場合
ワードプレスの場合は設定が簡単ですが、自分でコードを書いてる場合は、ヘッダー部分へicoへのパスの追記が必要です。
・パスの追記：
|
1 2 3 4 5 6 7 |
<head> <meta charset="utf-8"> <meta name="author" content="Mai by pippuriric"> <link rel="icon" href="/modules/template/favicon.ico"> <link rel="stylesheet" href="/css/my.css"> <title><?=$title;?></title> </head> |
・実際にファイルを指定したフォルダへ配置する
phpで作成したサイトもこんな感じ。
おわりに
ワードプレスを使っている限りで簡単だけど、自分でCMSを使わずにコードを書いている人なら必要になるだろうファビコンの作成と設定でした。
