作成

【簡単】ファビコンの作成・設定方法【解説】

「ファビコンの作成方法」や「ファビコンの設定方法」を解説します。

ダイス
ダイス
こんにちは!ダイス(dice@dice_record)です。

この記事の読者の想定は下記の通りです。

  • ファビコンを作成する方法を知りたい
  • WordPressで管理しているサイトの、ファビコンを設定する方法を知りたい

上記の内1つでも当てはまる方は、是非お読み下さい

そもそもファビコンとは?

ファビコンの作成方法や設定方法を解説していきますが、そもそも「ファビコン」とは何かを指すかご存知でしょうか。

ご存知でない方は前記事で解説していますので、そちらをご参照下さい。

前記事:【具体例有り】サイト名の横のアイコンの名称は?【解説します】

ファビコンの準備方法

下記の3ステップです。

画像を作成する

画像に透過処理を加える

画像をリサイズ+拡張子をicoに変更する

画像を作成

ファビコンの画像を作成します。

最終的には32×32の正方形に加工しますので、その点を意識します(大きい分では問題ありませんが、正方形にトリミングする点だけご注意を)。

準備ですが、画像が作成できさえすればツール何を使っても良いです。

一例を挙げます、いずれも無料です。

因みに私は、パソコン付属のアクティブ静電ペンで、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

「Download ToYcon」でダウンロード

ツールを起動させ、変換したい画像ファイルをドラッグアンドドロップし、32×32のファイルを入手できます。

 

作成編は以上です

ファビコンの設定方法

下記の2ステップです。

画像ファイルをメディアにアップロードする

headerタグ内に関係を示すリンクタグを記述する

ファビコンをメディアにアップロード

画像ファイル(~.ico)を「メディア」にアップロードします。

アップロードしたらURLを手元にメモしておきます。

アップロードし、メディアに追加された状態で次に進みます。

ファビコンをheadタグ内に記述

headタグの場所から説明しますが、解る方は「下記の形式で記述します。」まで読み飛ばして下さい。

管理者メニューの内、「外観」「テーマエディター」を選択する。

右側の「テーマファイル」「テーマヘッダー」を選択、

<head ~~~>で始まり、</head>で終わる範囲がheadタグ内です。

下記の形式で記述します。

<!– ファビコン –>
<link rel=”shortcut icon” href=”※URL※”>

上記の内、※URL※と書いてある場所に前述で手元にメモしておいたURLを貼り付けます。

一例

<!– ファビコン –>
<link rel=”shortcut icon” href=”https://demo-dice-record.com/wp-content/uploads/2030/05/03205912201831透過処理後_32x32.ico”>

上記の内、”<!– ファビコン –>”の部分はコメントです。無くても機能に支障はありませんし、アレンジ頂いても結構です。”<!– ファビコン、自分で追加した分! –>”のように自分が解りやすいようにですね。

これで設定できている筈です。

万が一表示されない場合、

URLは間違えていないか?

タグや内側に過不足はないか?(ダブルクォーテーション不足 等)

headタグ内に記述されているか?

上記の辺りをご確認下さい。

それで解決しなければ相談に乗りますので、お問い合わせ下さい(①メディアのURL ②headタグ内に貼り付けた内容 を控えて頂くとスムーズに進むかと思います)。

ダイス
ダイス
ご参考になれば幸いです。
ABOUT ME
ダイス
アラサーSE(20代)。 主な経験は、PGとしてJava(SpringBoot)、C、PHP(Laravel)、VBAがある。SS、UTの経験有り。最近はUI工程を経験中。 IT業界だけでなく、教育業界(予備校での運営スタッフ)での経験有り。 サイトでは、特定の分野に限定せずに幅広く発信していきます。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です