Webサイトのブログアイコン「ファビコン」をオリジナルのものに設定する方法@スティンガー

公開日: : 最終更新日:2016/03/18 ブログ , ,

00mini1396367034

WordPressテーマのSTINGERはとっても便利なイケメンで、多くのブロガーの方々が使っています。

このブログもSTINGERを使っていて、最近ファビコンの設定をオリジナルに変更しました。

Favicon
こんなやつです(小さい・・・)

STINGERで書いているブログをブラウザで開いた時に表示されるアイコン、「ファビコン」はデフォルトではSTINGERのアイコンが表示されます。
自分のオリジナル「ファビコン」に変更すると、読んでくれた方にも覚えてもらえるしオリジナリティも出るってことで、設定してみました。

たくろーど(@tkroad)です。こんにちわ。

WordPressのブログテーマはスティンガーがイケメンすぎて大好きなんですが、今回はファビコンの変更方法を紹介します。
オリジナルなファビコンを使うと、彼女は出来るし昇進するし苦手なニンジンやピーマンも食べれるようになるってばっちゃが言ってたので、サクッと変更してみましょう。

ファビコンの設定方法

ファビコン設定は次の作業が必要です。

    1. ファビコンに設定する画像を選ぶ
    2. ファビコン用の「.ico」拡張子に変換
    3. ブログテーマに設定する

ここまでサクッと10分ほどで完了できます。

1.ファビコン用の画像を選ぶ

ファビコン用の画像を選びます。
こだわりはあると思いますが、シンプルな文字やカラフルな図形がおすすめです。

というのも、16px×16pxが基本ですので、あまり複雑なイラスト画像だとモヤモヤでなんの絵なのかよくわからなくなります。
ぼくはこのサイトで文字アイコンを作りました。

15mini1396364575
squarespace.com/logo

無料でできるし、なかなかおしゃれなロゴができるのでおすすめです。
詳しい使い方はこちら
無料でオリジナルロゴが作れるsquarespace logoがすごい!!TwitterやFacebook用にピッタリ!|自分ハック!@たくろーど

2.画像をファビコンに加工しよう

次に選んだ画像をファビコン用の拡張子に変換します。

これらのサイトが簡単操作でできるのでおすすめです。

1.ファビコン変換ツール | 画像 → アイコン変換ツール

2.favicon.icoを作ろう

これらサービスで自分の好きな画像をファビコンに変換できます。

使い方はすんごく簡単。
「ファイルを選択」して「アイコン作成」を押すだけです。

こんな具合にファビコンが出来上がります。

21mini1396362953

3.スティンガーのテーマに設定しよう

テーマに設定することでサイトへファビコンが反映されます。
まずは先ほど作ったアイコンをWordPressにアップロードします。

3.1アイコンファイルのアップロード

WordPressの「メディア」→「新規追加」→「ファイルを選択」→先ほど作ったアイコンを選んで→アップロード

28mini1396365787

アップロードしたら、そのファイルの場所のURLを全選択してコピーします。

29mini1396366175

テーマへの設定は、WordPressの「外観」→「テーマ編集」→「ヘッダー」から変更します。

30mini1396365059

ヘッダー(header.php)の中から次の項目を書き直します。

		<link href="<?php bloginfo('template_directory'); ?>/images/rogo.ico" rel="shortcut icon" />

という記述がSTINGERの初期の設定になっているので、ここを見つけて、次のように書き換えましょう。

		<link href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico" rel="shortcut icon" />

これはぼくの場合の保存場所ですので、「/images/favicon」の部分を自分のファイルの場所に書き換えるとOKです。

おわりに

ここまで設定できれば、Webで開いたときに自分のオリジナルのファビコンが表示されるはずです。
うまく表示されないときは、ページの再読み込みなどを試してみると表示されるかもしれません。

オリジナルのアイコン表示でちょっとだけ目立ってみましょう!
たくろーど(@tkroad)でした。(・ω<)

関連する記事

無料でオリジナルロゴが作れるsquarespace logoがすごい!!TwitterやFacebook用にピッタリ!|自分ハック!@たくろーど

ブログのアフィリ収益アップ!AmazonJSプラグインを導入するためのFTPの設定方法|自分ハック!@たくろーど

関連する商品

スポンサードリンク

ad_rspnsbl

Message

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

関連記事

時間を有効に使うために覚えておきたい「新しく何かを始めるためには、何かをやめなければいけない」という法則

photo credit: Keoni Cabral via photopin cc 「これを

記事を読む

WordPressのパーマリンクは悪いコト言わないから英数字にしておこうっていう話

photo credit: teamstickergiant via photopin cc

記事を読む

【iOS8】通知センターウィジェットからブログのアクセス数を簡単解析!JetPackとWordPressアプリを使うとお手軽カンタン確認できるよ

iOS8のウィジェット機能を使って簡易的なアクセス数を通知センターに表示させることが出来ます

記事を読む

MarsEditのプレビューをブラウザのブログ画面と同じ表示にすると使いやすくなる!

Macでブログ書くならMarsEditはほんとうに便利です。 デフォルトの設定でもすごく使いやす

記事を読む

5分でできる!WordPressのブログに「関連する記事」を追加するならwordpress related Postsがお手軽カンタン!

ブロガーのみなさんの記事を見てると、一つの記事の後に「関連する記事」って言うのが表示されてて

記事を読む

【Macアプリ】MarsEditでもうひとつのブログを追加登録する方法。複数のWordPressサイトの管理運営に便利!

ブログを書くためのエディタアプリはたくさんありますが、MacのブログエディタアプリならMar

記事を読む

盛大に寝坊したとき人間が感じる5つの感情とその根拠

時間は大切です。 どんなにお金持ちでも、どんなに有名なスターでも、殺人鬼も聖者も凡人も

記事を読む

【一周年】ブログ書いてて良かったと思うこと4つ。酒の肴としての書く技術。

photo credit: Rosino via photopin cc このブログを

記事を読む

Googleの提案通りに広告ユニットを336×280に変更すると競合率が2倍以上アップし増収につながるらしいので試してみた

Googleから「広告ユニットを336×280に変更すると増収につながるかもよ」と提案を受け

記事を読む

Googleアドセンス広告サイズのPC・スマホ表示を切り替える簡単シンプルな方法。レスポンシブ広告ユニットの使い方

GoogleAdsenseの広告サイズをPCとスマホで表示を切り替えるには、「レスポンシブ」

記事を読む

ad_rspnsbl

  • iPhoneとかガジェットとかラーメンが好物な、たくろーど(@tkroad)が書くライフログブログです。もっと詳しく



    follow us in feedly

PAGE TOP ↑