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

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

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

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

Faviconを用意する

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

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

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

DeGraeve.comさんのFavicon Generatorです。

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

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

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

こんな感じでアップされました。

細かい色なども修正出出来ます。今回アップした画像はFaviconにするには複雑だったかな…（汗）微調整が終わったら「Make 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をアップしてください。

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

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

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

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

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

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

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