スポンサーリンク

超簡単☆WordPressファビコン設置方法まとめ

公開日: : 最終更新日:2015/03/23 WordPressに挑戦!

当ページでは、wordpressにファビコンを設置する際の手順をまとめておきたいと思います。
ファビコンとは、こんな感じで表示される小さなアイコンの事です。

24

ファビコンは、ホームページビルダーで作成したサイトで作った事があるので、ちょっとだけ得意だったりします。^^

ファビコンは、使用する画像の準備が出来たら、3ステップで簡単に設置する事が出来ます。
また、こちらの設置方法は、wordpressだけではなく、無料ブログサービス(HTML編集が可能なもの)や、ホームページなどで代用する事も出来ます。

ファビコン作成&設置の事前準備

解凍ソフトの準備
ファビコン用にダウンロードするファイルは、zip形式ですので解凍ソフトが必要になります。
私の場合は、+Lhacaを使用しています。(無料でダウンロードできます。)

ファビコン用の画像の準備
実際に表示されるファビコンの大きさは、16px×16pxです。
準備する画像は、ぴったり16pxでなくても構いません。
ポイントは、【16px×16px以上の大きすぎない画像】(16px以下の画像はキレイに表示されません。)
【正方形の画像】(自動でトリミングされるので、正方形以外だと歪んでしまいます。)この2点です。

ご自身の好きな画像を画像ソフトやwindowsペイントなどで作成したり、画像配布サイト様からお借りしても良いでしょう。(その場合、利用規定をよくお読みになってくださいね。)

私の場合は、フリー素材・今日もわんパグ様からお借りした下記画像をそのまま使用しています。

image1613

準備した画像をファビコンのファイル形式(.ico)に変換

準備した画像をファビコンとして表示する事が出来るように、ファイル形式の変換をします。
FavIcon from Picsという変換サイトを使用した例を説明していきます。

まず、サイトにアクセスしたら【参照】をクリックして、パソコン内のファビコン画像を選択。
赤枠で囲んだ【Generate FavIcon.ico】をクリックです。

25

下記のような画面にプレビューが表示されますので、それでOKなら、赤枠で囲んだ【Download FavIcon Package】をクリック。【名前をつけて保存】です。(解凍ソフトがデスクトップ上にあるならデスクトップへ。)

26

下記のようなファイルがダウンロードされていると思います。
このアイコンをクリックしたまま【+Lhaca】のアイコン上へ持って行きます。(ドラッグ&ドロップ)

27 → 28

これで、ファビコン用の画像ファイルの変換作業が終わりました。

ファビコン画像をWordPressへアップロード

解凍したファイルの中には、このように3つのファイルが入っています。

29

「animated_fabicon1.gif」というファイルは、アニメーションで動くタイプのgifファビコンに使われるものです。(Internet Explorerでは表示されないので、その場合は、「favicon.ico」の表示設定も必要になるかと思います。)

「RedaMe.txt」というファイルは、説明書のような内容が入っているようです。(英語なのでよくわかりません。(笑))

通常のファビコン設置には、真ん中の「favicon.ico」というファイルを使います。
このファイルをwordpress管理画面→メディア→メディアのアップロードで、通常の写真やイラストと同じ様にアップロードします。

次に【編集】をクリックして、画面右側に表示される画像URLをメモ帳などにコピーしておきます。

30

header.php内へコードを追加

テーマ編集「header.php」の</head>の直前に下記コードを追加します。

※ファイル編集は必ずバックアップを取ってから行ってください。
「子テーマ」を作成しておくと、テーマのアップグレードの際に変更内容が消えることがありません。

<link rel="shortcut icon" href="http://コピーしておいた画像URL" />

当ブログではこのようになります。↓31

これでファビコンが表示されれば大成功です☆
表示されない場合は、キャッシュのクリア(インターネット一時ファイルの削除)を実行すると表示されると思います。
また、反映までに時間がかかる場合もあるようです。

ホームページビルダーでの初めてのファビコン作りでは、下記サイトを参考にさせて頂きました。
>お気に入りアイコン(ファビコン)の作り方/TAG<index>
ありがとうございます。


以上で、カテゴリー『WordPressに挑戦!』の記事投稿は終了です。
wordpressのインストールから各種設定、記事投稿に至るまでの経緯をこうして記録してみると、「意外と色んな作業をしていたものだ。。」とちょっと驚いたりしています。^^

この歳になって興味のある事や新しい事を学ぶ機会に恵まれた事に感謝しています。

次記事からはまた再び、子供達との日常やお弁当記録などをマイペースに綴っていきたいと思います。
そして、新しいテーマでのサイト作りも自分なりに、1歩1歩頑張っていこうと思います。

wordpressに関する記事投稿に関して、温かなメッセージを下さった方々。
情報をシェアして下さった方々。記事を読んで下さった方々。。本当にありがとうございました。

2013年1月31日 ai




関連記事

当ブログで使用しているプラグインリスト

つい最近まで、wordpressの存在すら知りませんでしたから、当然どんなプラグインがあるの

記事を読む

ブログリニューアルと新サイトのご紹介です♪

こんにちは♪ ご訪問ありがとうございます。(*^_^*) ブログをリニューアルしました♪ この

記事を読む

Facebook「Like box」から「Page Plugin」へ ~作成のポイントとスマホやサイドバーで右端が切れてしまう場合の対処法~

新しくサイトを作っていて、いつものノリでFacebookのLike box作成ページへ行った

記事を読む

本当に簡単だった♪ロリポップのWordPress簡単インストール

wordpressでブログを作っていく際にまず最初にする作業は【wordpressのインスト

記事を読む

WordPress ロリポップ/独自ドメインマルチサイト化 意外だったエラーの訳。。

1つのwordpressで、ブログを複数管理できるように変更する機能として【マルチサイト化】

記事を読む

WordPressへのGoogle Analytics導入についての特記事項

私はホームページ作成の際には、アクセス解析にGoogle Analytics(グーグルアナリ

記事を読む

WordPressインストール後 最初にやっておきたい事リスト

wordpressのインストールが成功したら、記事投稿の前にやっておきたい事。。 やっておいた方が

記事を読む

インターネットカフェから・・・

最近、パソコンの調子が悪くてですね・・ 1月に修理に出したばかりなのにまた故障しちゃいまし

記事を読む

WordPress【Twenty Twelve】カスタマイズ追記いろいろ。。

wordpressのマルチサイト化で作成した新サイトをオープンして、コンテンツ作りを少しずつ

記事を読む

WordPress関連-LinkWithinマルチサイト表示方法とプラグインリスト追記

今日は久しぶりにWordPress関連の記事内容となります。 のんびりと(長々と?)書いて

記事を読む

Message

メールアドレスが公開されることはありません。


follow us in feedly  
  • HN:ai
    北海道在住
    ▶プロフィール詳細へ

    当ブログは北海道限定情報サイト
    「北海道ディレクトリ」登録サイトです。

    北海道ディレクトリ

PAGE TOP ↑