Webサイトのブログアイコン「ファビコン」をオリジナルのものに設定する方法@スティンガー
WordPressテーマのSTINGERはとっても便利なイケメンで、多くのブロガーの方々が使っています。
このブログもSTINGERを使っていて、最近ファビコンの設定をオリジナルに変更しました。
こんなやつです(小さい・・・)
STINGERで書いているブログをブラウザで開いた時に表示されるアイコン、「ファビコン」はデフォルトではSTINGERのアイコンが表示されます。
自分のオリジナル「ファビコン」に変更すると、読んでくれた方にも覚えてもらえるしオリジナリティも出るってことで、設定してみました。
WordPressのブログテーマはスティンガーがイケメンすぎて大好きなんですが、今回はファビコンの変更方法を紹介します。
オリジナルなファビコンを使うと、彼女は出来るし昇進するし苦手なニンジンやピーマンも食べれるようになるってばっちゃが言ってたので、サクッと変更してみましょう。
ファビコンの設定方法
ファビコン設定は次の作業が必要です。
- ファビコンに設定する画像を選ぶ
- ファビコン用の「.ico」拡張子に変換
- ブログテーマに設定する
ここまでサクッと10分ほどで完了できます。
1.ファビコン用の画像を選ぶ
ファビコン用の画像を選びます。
こだわりはあると思いますが、シンプルな文字やカラフルな図形がおすすめです。
というのも、16px×16pxが基本ですので、あまり複雑なイラスト画像だとモヤモヤでなんの絵なのかよくわからなくなります。
ぼくはこのサイトで文字アイコンを作りました。
無料でできるし、なかなかおしゃれなロゴができるのでおすすめです。
詳しい使い方はこちら
無料でオリジナルロゴが作れるsquarespace logoがすごい!!TwitterやFacebook用にピッタリ!|自分ハック!@たくろーど
2.画像をファビコンに加工しよう
次に選んだ画像をファビコン用の拡張子に変換します。
これらのサイトが簡単操作でできるのでおすすめです。
1.ファビコン変換ツール | 画像 → アイコン変換ツール
これらサービスで自分の好きな画像をファビコンに変換できます。
使い方はすんごく簡単。
「ファイルを選択」して「アイコン作成」を押すだけです。
こんな具合にファビコンが出来上がります。
3.スティンガーのテーマに設定しよう
テーマに設定することでサイトへファビコンが反映されます。
まずは先ほど作ったアイコンをWordPressにアップロードします。
3.1アイコンファイルのアップロード
WordPressの「メディア」→「新規追加」→「ファイルを選択」→先ほど作ったアイコンを選んで→アップロード
アップロードしたら、そのファイルの場所のURLを全選択してコピーします。
テーマへの設定は、WordPressの「外観」→「テーマ編集」→「ヘッダー」から変更します。
ヘッダー(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
関連記事
-
WordPressのパーマリンクは悪いコト言わないから英数字にしておこうっていう話
photo credit: teamstickergiant via photopin cc
-
継続は力なり。やめなければ「勝ち」ではなくても「負け」ることはない
photo credit: Chapendra via photopin cc た
-
JETPACKからちょっと早い年賀状。2015年のブログを振り返ってみる
2015年も残すところあと1日というところで、WordPressプラグインのひとつJet
-
Googleアドセンス広告サイズのPC・スマホ表示を切り替える簡単シンプルな方法。レスポンシブ広告ユニットの使い方
GoogleAdsenseの広告サイズをPCとスマホで表示を切り替えるには、「レスポンシブ」
-
【一周年】ブログ書いてて良かったと思うこと4つ。酒の肴としての書く技術。
photo credit: Rosino via photopin cc このブログを
-
Googleの提案通りに広告ユニットを336×280に変更すると競合率が2倍以上アップし増収につながるらしいので試してみた
Googleから「広告ユニットを336×280に変更すると増収につながるかもよ」と提案を受け
-
Skitchをごりごり使い倒す方法!Evernoteと連携できる無料の画像加工アプリが便利だぞ
Skitchはスマホやデジカメで撮った写真にいろいろ書けてすんごく便利です。 Everno
-
【エイプリルフール!】ちょww Google AdSenseの今日の収益が他の惑星から上がってるんだがw
photo credit: bangdoll@flickr via photopin cc
-
今年このブログのAmazonアフェリエイトでたくさん売れたモノ5つと何でこれ売れたの?ってモノ【2014年】
今年一年、このブログでいろんな便利グッズを紹介してきました。 便利グッズを紹介にするにあた
-
モブログ必携なiPhone画像注釈アプリSkitchが神がかったアップデートをなされたぞ!
iPhoneの画像注釈アプリのスキッチが2014年4月17日にアップデートしてとんでもなく使