WordPressでファビコンを素材から作成して設置する方法

公開日: : 最終更新日:2015/04/18 WordPressテーマのカスタマイズ, ブログについて

このエントリーをはてなブックマークに追加

恥ずかしながら、ブログの顔とも言えるファビコンがなかったので、素材から作成して設置してみました。作業は@RyunNoteさんの記事を参考にしましたよ。

WordPressでブログやサイトを運営している方は筆硯です。

ファビコンはブログの顔

ファビコンとは、ブラウザのタブやブックマークの先頭に表示される画像の事です。

wordpressで簡単にブログの顔であるファビコンを設定する方法

タイトルの左にあるヤツですね。私もそうですが、ファビコンでサイトを判別する人もいます。さらに、feedlyなどユーザーが情報収集する所でも頻繁に登場するので、非常に大切なんです。

ブログの顔とも言えます。

wordpressで簡単にブログの顔であるファビコンを設定する方法

この大切なファビコン設置作業を「明日やるやる詐欺」してきたので、この記事を読んだときに、素材から作成して設定しようと思ったわけです。

スポンサーリンク

ファビコンの素材から作成>設定の流れ

1 ファビコンの素材画像を用意
2 素材を変換してファビコンを作成
3 WordPressにファビコンをアップロード
4 コードの書き換えをして設定完了

これだけです。では、順に説明していきます。

スポンサーリンク

1 ファビコンの素材画像を用意

ファビコンに設定したい素材画像を用意します。サイズは16×16 or 32×32 or 48×48のどれか。ファイルの拡張子(.ooの部分)は、PNG , GIF , JPG(JPEG)のどれか。

私は、Webデザイナー殺しと話題のsquarespaceで用意しました。

2 素材を変換してファビコンを作成

次は、素材を変換してファビコンを作成していきます。これも簡単です。用意した素材をfavicon.icoでファビコン用に変換しましょう。

favicon.icoにアクセスし、用意した素材を選択し、「作成」を押します。

wordpressで簡単にブログの顔であるファビコンを設定する方法

次に、作成されたファビコン用画像(拡張子はico)を「ダウンロード」を押して自分のPCに保存します。

3 WordPressにファビコンをアップロード

次に、保存したファビコン用画像をWordPressダッシュボードを使ってアップロードします。ダッシュボードの「メディア」→「新規追加」を押し、以下の画面でファイルをアップロードしてください。

wordpressで簡単にブログの顔であるファビコンを設定する方法

アップロードされた画像の「編集」リンクをクリックし、ページ右にある「ファイルのURL」をコピーします。

wordpressで簡単にブログの顔であるファビコンを設定する方法

コピーしたURLは次の「コードの書き換え」で使います。

4 コードの書き換えをして設定完了

あとはheader.php(「外観→」「テーマ編集」)を書き換えます。

以下の行を探し(「control + f」でiconを検索すると便利)、赤線を引いたhref=”ooo”のoooを先ほどコピーしたURLに書き換えます。

wordpressで簡単にブログの顔であるファビコンを設定する方法

こんな感じですね。

wordpressで簡単にブログの顔であるファビコンを設定する方法

あとは「更新」を押して自分のブログにアクセスしてみてください。ファビコンが設定されているはずです。

WordPressでも簡単にファビコンを作成して設置できる

・ファビコンはブログの顔になるから早めに設置しよう
・ファビコンは素材があれば簡単に作成できる
・ファビコン設置すると、自分の家って感じがする

まだ、設定されていない方はお早めに。

デザインの他にも、サイトやブログのマネタイズに取り組みたい方は「ブログで広告収入を得られるアドネットワーク5つをまとめました」も参考にしてみてください。

仕事で悩む人から人気の記事

ブログ「らふらく」を購読する→follow us in feedly

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

ブログで稼ぐ方法をまとめてます

関連記事はこちらからどうぞ!

いつもシェア感謝です!今回もぜひ

このエントリーをはてなブックマークに追加
※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!
SNSでも自分の得意なことで収入を得る方法を発信しています。フォローすれば更新をチェックできますので、ぜひフォローを。
仕事依頼などのお問い合わせは「iwgp545@yahoo.co.jp」か、「TwitterのDM」、「Facebookのメッセージ」からお願いします。

SNSでフォローしてお金を稼ぐための情報を受け取ろう
LINE@で友達追加(スマホでLINEを起動 > その他 > 友だち追加 > QRコード読み取り)
ブログで生活しているタクスズキと申します。「好きなことを仕事に」を当たり前にする活動をしています。よく「真面目」と言われる89世代の意識高い系です。 スズキについて詳しく知りたい方はこちらからどうぞ
仕事のご依頼(広告掲載、記事寄稿など)はiwgp545@yahoo.co.jpからお願いします!