モッピー!お金がたまるポイントサイト

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

2018/09/05

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

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

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

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

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

[adsense]

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」をクリックします!

[adsense]

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(ファビコン)を変更する方法

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

[adsense]

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(ファビコン)を変更する方法

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

この記事を書いた人

ディーエムガジェット 

非IT系エンジニア。日々の出来事や自分の好きな物などの紹介をメインに色々発信していきます。2012 年から禁煙を開始して68キロぐらいだった体重が2012年6月には75キロまで増加。ヤバい!と感じてダイエットを開始。一回65キロまで落としましたが、2018年8月現在また72キロまで増加。こんな身体でもトライアスロンに出場予定「プロフィールはこちら

このエントリーをはてなブックマークに追加

WORDPRESS

Posted by dmgadget