*

ファビコンを設置しよう stinger3

公開: : 更新:2014/12/13 WordPressカスタム

自己責任

スポンサーリンク

 

ファビコンとは、

一応暗黙の決まり事なので言いますがファミコンじゃないですよ。

ファビコン

ブラウザのタブや(IEの場合アドレス前も)ブックマーク/お気に入りに付けられるブログやホームページのマークのようなものです。(上記画像の赤丸部分)

 

STINGER3の標準では

apple-touch-icon-precomposed

こちらのファビコンになっていると思います、

これを自分のサイトだけのオリジナルファビコンに変更しようと思います。

無料でこんなに良いWordPressテーマSTINGERを作成されたENJILOGさんには感謝です、

感謝ですが変えさせてもらおうと思います。^^;

 

このファビコンの作成・設置方法を説明しますが

毎度の事ながらコードの書き換えは自己責任でお願いします。

 

 

ファビコンの作成・設置方法

ファビコンに使われる画像はJPG/GIF/PNG/BMPなども使用できますがブラウザによって表示されないなどもあるのでWindow標準フォーマットのicon形式(.ico)で作成しましょう。

 

ファビコンに使うicon形式画像の作成

favicon.icoを作ろう」などのサイトを使うと簡単に作成できます。

上記サイトで画像を選択して「favicon.ico作成」ボタンを押せば見本が表示されるのであとはダウンロードするだけです。

※画像サイズは全て同じでも縮小してくれます。
※ファビコンは1つのファイルの中に複数の画像サイズが入れれるので大中小とも選択して下さい。(表示される場所によって自動で適したサイズが表示されます)

 

 

もっと綺麗なファビコンを作りたい方は「アイコンウィザード」などのフリーソフトを使うとできます。

※対応OSがXPまでしか書かれていませんが私はWin7で問題なく利用できてます。

  • 写真など細かい画像を使いたい。
  • 角を丸めたり文字だけの切り抜きなど背景を透明にしたい。
  • Retinaディスプレイレベルの解像度でも綺麗に表示させたい。

などの場合アイコンウィザードを使ったほうがいいです。

ファビコン2
左:「favicon.icoを作ろう」で作成
右:「アイコンウィザード」で作成

 

綺麗なファビコンを作っておけば大きめに表示されるデスクトップなどのショートカットを置かれても見た目がいいです。

ショートカットファビコン

個人のサイトが他人のデスクトップに置かれるような事はあまりないと思いますけど・・・

 

ファビコンを設置する stinger3

作成したファビコン画像ファイルをWordPressのメディアに保存する。

保存したファビコン画像URLをコピーしておく。

stingerのimagesフォルダに直接ファビコン画像をアップロードできる方は下のコード38行「?>/images/rogo.ico”/>」の「rogo」部分をアップロードしたファイル名に変更するだけで完了です。

 

外観→テーマ編集→ヘッダー(header.php)

上記コードの38行の一部を

 

ファビコン画像URLに書き換える。

 

完成。

 

参考:このブログの場合

 

 

無料ブログなどにファビコンを設置する

同じ方法で無料ブログなどでもファビコンを設置できます。

HTMLなどが編集できる無料ブログサービスが前提です。

上記のようにheadから/head間に記入すればOKです。

もし最初から別のファビコンが設定してあるようならheadから/head間にあるはずですので探してURL部分のみ変更すれば変えれます。

※画像ファイルは個々のブログへ保存して下さい。

Pocket

ad

関連記事

stinger3

追従するSNSボタンを消す stinger3

  PCページに表示される追従型SNSボタンを消す (スマホページは上記現バー

wp

WordPressのJetpack共有に追加したSNSボタンの高さを合わせる

この記事は個人的なメモです。 プラグインJetpackの更新で追加した共有ボタンの高さが合わな

wp

WordPressの投稿作成画面にタグボタン(クイックタグ)を追加する

WordPressの投稿記事を作成や編集する画面にあるクイックタグは便利ですが正直もう少し色

stinger3

トップページのみブログタイトルをh1にする stinger3

stinger3上記バージョンでは(初めて使うので古いバージョンは不明)トップページでのh1

stinger3

404エラーページ編集 stinger3

  とくにメモ記事にするほどの事ではありませんがメモしときます。 &nbs

Message


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

windows10
エクスプローラー 「最近使用したファイル表示」の設定(windows10)

  セキュリティーやプライバシーの問題、そしてでき

windows10
windows10 anniversary アップデート後の不具合とその後(個人メモ)

ちなみにRS1アップデート自体は問題なくできて起動も問題なくしています

M-DUX70BKサム
多機能マウスを買ったのでレビュー

エレコム DUX M-DUX70BK 購入 日ごろからパソコ

杉の木7
大きな杉の木を見てきました

暇だったのでドライブがてら千年杉?を見に行ってきました。

PC自作1
パソコンを自作してみました(初心者)

パソコンを新しく購入する事に 今まで使っていたノートパソコン


  •  

      
        follow us in feedly
PAGE TOP ↑