「ファビコンの作成方法」や「ファビコンの設定方法」を解説します。
この記事の読者の想定は下記の通りです。
- ファビコンを作成する方法を知りたい
- WordPressで管理しているサイトの、ファビコンを設定する方法を知りたい
上記の内1つでも当てはまる方は、是非お読み下さい。
そもそもファビコンとは？
ファビコンの作成方法や設定方法を解説していきますが、そもそも「ファビコン」とは何かを指すかご存知でしょうか。
ご存知でない方は前記事で解説していますので、そちらをご参照下さい。
前記事：【具体例有り】サイト名の横のアイコンの名称は？【解説します】
ファビコンの準備方法
下記の3ステップです。
画像を作成する
画像に透過処理を加える
画像をリサイズ＋拡張子をicoに変更する
画像を作成
ファビコンの画像を作成します。
最終的には32×32の正方形に加工しますので、その点を意識します(大きい分では問題ありませんが、正方形にトリミングする点だけご注意を)。
準備ですが、画像が作成できさえすればツールは何を使っても良いです。
一例を挙げます、いずれも無料です。
- MediBang Paint Pro
- ペイント
- TruNote
ポイントは「手描きかマウスか」かなと思います。
オブジェクトやテキストのみでしたら、マウス＋適当なツールでも大丈夫かと思います。Excelで作成し、画面キャプチャ→画像をトリミング等でも宜しいかと。
そうでなければ、コスパの優れるペンタブを使用し、付属するペイントツールを活用するのが手っ取り早いのではと思います。
例として人気で安価なペンタブを挙げます。
XP-Pen ペンタブ バッテリー充電不要 8192レベル筆圧 8個エクスプレスキー 10*6.25インチ Deco01
ワコム ペンタブレット One by Wacom ペン入力専用モデル Mサイズ CTL-672/K0-C
例
この時点では、私の場合は下記の状態でした。
透過処理をしていないので、描いたときの後ろのマス目が健在ですね。
透過処理
ファビコンに設定する画像を作成したら透過していきます。
透過には、下記のサイトにお世話になりました。
直感的で使いやすいのが特徴です。
WEBブラウザ上で簡単に透過PNG画像を作成できるツール | 無料で画像を加工できるサイト PEKO STEP
例
透過処理を経て、マス目は見えなくなりました。
これだと大きすぎてファビコンに設定できませんので、画像をリサイズする必要があります。
画像をリサイズ＋α
ファビコンに設定する為に、画像を加工しサイズと拡張子を変更します。
サイズ：32×32
拡張子：ico
私が行ったときは、「ToYcon」というツールを用いました。
下記のサイトからダウンロードして入手できます。
ToYcon – convert images to icons
ツールを起動させ、変換したい画像ファイルをドラッグアンドドロップし、32×32のファイルを入手できます。
例
ファビコンの設定方法
下記の2ステップです。
画像ファイルをメディアにアップロードする
headerタグ内に関係を示すリンクタグを記述する
ファビコンをメディアにアップロード
画像ファイル(～.ico)を「メディア」にアップロードします。
アップロードしたらURLを手元にメモしておきます。
アップロードし、メディアに追加された状態で次に進みます。
ファビコンをheadタグ内に記述
headタグの場所から説明しますが、解る方は「下記の形式で記述します。」まで読み飛ばして下さい。
管理者メニューの内、「外観」「テーマエディター」を選択する。
右側の「テーマファイル」「テーマヘッダー」を選択、
<head ～～～>で始まり、</head>で終わる範囲がheadタグ内です。
下記の形式で記述します。
<!– ファビコン –>
<link rel=”shortcut icon” href=”※URL※”>
一例
<!– ファビコン –>
<link rel=”shortcut icon” href=”https://demo-dice-record.com/wp-content/uploads/2030/05/03205912201831透過処理後_32x32.ico”>
上記の内、”<!– ファビコン –>”の部分はコメントです。無くても機能に支障はありませんし、アレンジ頂いても結構です。”<!– ファビコン、自分で追加した分！ –>”のように自分が解りやすいようにですね。
これで設定できている筈です。
万が一表示されない場合、
URLは間違えていないか？
タグや内側に過不足はないか？(ダブルクォーテーション不足 等)
headタグ内に記述されているか？
上記の辺りをご確認下さい。
それで解決しなければ相談に乗りますので、お問い合わせ下さい(①メディアのURL ②headタグ内に貼り付けた内容 を控えて頂くとスムーズに進むかと思います)。
