ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法

      2015/02/16

WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法

WordPressの人気テーマ「Stinger3」のデフォルトのファビコンはこちらの青っぽい色のファビコン

WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法

ですが、これをオリジナルに変更する方法を備忘録として残したいと思います。プラグインなどを使った設置方法もありますが、出来る限り余計なプラグインを使いたくなかったのでheader.phpに直接書き込む方法でトライしました。昨日投稿した記事

WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法で使用したローカル環境にインストールしたブログを使って設定して行きたいと思います。

スポンサーリンク

Faviconを用意する

Favicon GeneratorでオリジナルのFaviconを作る方法と
フリーでFaviconを配布している所から拝借する方法の二つを紹介しようと思います。

Favicon GeneratorでオリジナルのFaviconを作る方法

Favicon Generatorは探すと結構あるのですが今回はこちらのGeneratorを紹介します。

DeGraeve.comさんのFavicon Generatorです。

使い方は凄く簡単です。自分はこの

WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法

Avator画像を使ってやってみます。

WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法

ページ下部にある「Upload this image」からお好きな画像を選択そして「upload image」をクリックします。次のページで「Crop your picture」どこで切り抜くか設定してくださいと書いてあるのでお好みで設定します。完成したら「Crop picture」をクリック

WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法こんな感じでアップされました。

WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法

細かい色なども修正出出来ます。今回アップした画像はFaviconにするには複雑だったかな…(汗)微調整が終わったら「Make Favicon」をクリックします!

スポンサーリンク

WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法

すると下に「Right click on the icon to save it to your desktop.」右クリックしてアイコンをご自身のデスクトップに保存してください!と出るのでダウンロードします。「Favicon.ico」と言うなの画像がダウンロード出来ました。

フリーでFaviconを配布しているサイトから拝借させて頂きましょう

freefavicon dmgadgetはここのfaviconを使っています。どれも良く出来ていてクオリティーが高いです。
iconj  ここも多くのfaviconを扱っています。Generatorなども置いてあります。

「free favicon」や「favicon 素材」などのキーワードで検索すれば色々出てくるので試してみてください。

faviconをアップします

wordpressのimagesフォルダに直接アップして使う方法もありますが、前回の記事の様にメディアにアップしてiconのURLを取得する方法でやってみようと思います。wordpressのダッシュボードからメディアへ行き新規追加で、使いたいFaviconをアップしてください。

WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法

アップが終わるとこのページの下に編集という項目が出るのでクリック。

スポンサーリンク

WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法

次のページの右側に「ファイルのURL」が出てくるのでそれをコピーします。

WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法

header.phpにリンクをペースト

WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法

header.phpを開いてみるとデフォルトではこのようになっています。

WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法

38行目の色が変わっている部分に先程アップしたFaviconのURLをペーストします。最終的にこのようになればOKです。

WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法

これで完成です。ブログで表示を確認してみてください。

WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法

お!結構いい感じでした。写真も大丈夫そうですね!読んで頂いてありがとうございました。

 - WORDPRESS

Comment

  1. ファビコン変更 | leinad brog より:

    […] STINGER3でファビコン変更 […]

  2. […] WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法 | dmgadget(ディ… […]

  3. ファビコンを変更してみた。 | テスト より:

    […] 詳細は、こちらのサイトを参考にしてやってみたら簡単にできました^^ […]

Message

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

CAPTCHA


  関連記事

WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法
WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法
WordPress[Stinger5] プラグインなしで背景を画像にする
WordPress[Stinger5] プラグインなしで背景を画像にする
wordpress人気テーマSTINGER3の広告を2つ並べるカスタマイズ
WordPress[Stinger3] 広告を2つ並べるカスタマイズ
WordPress[Public Post Preview] 記事を限定公開する
WordPress[Public Post Preview] 記事を限定公開する
WordPress ブログにメンテナンス中と表示 Easy Pie Maintenance Mode
WordPress ブログにメンテナンス中と表示 Easy Pie Maintenance Mode
WordPress[XML Sitemap Generator] 時刻設定を日本時間に修正する方法
WordPress[XML Sitemap Generator] 時刻設定を日本時間に修正する方法
WordPress[Stinger3] サイドバーのアイコンを変更する方法
WordPress[Stinger3] サイドバーのアイコンを変更する方法
WordPressテーマ「Stinger3」に子テーマを導入する方法
WordPressテーマ「Stinger3」に子テーマを導入する方法
WordPress[MarsEdit] 過去記事を30件以上に変更
WordPress[MarsEdit] 過去記事を30件以上に変更
WordPress[Revive Old Post] アップデート後に過去記事自動ツイートが停止
WordPress[Revive Old Post] アップデート後に過去記事自動ツイートが停止