Square Beat Engine

Blog for variety of things…

Web

ファビコンの作成と設定

投稿日:2014-11-06 更新日:

今日は、ファビコンを設定してみた。
ファビコンとは、ブラウザのアドレスバーやタブに表示される、サイトのアイコン画像のこと。
一昨日導入したテーマStinger5のデフォルト画像になっていたので、オリジナル画像に差し替えた。

ファビコン画像の作成

ファビコン作成の流れは以下の通り。

  1. アイコン画像を作成して、pngファイルで保存する。
  2. icoファイルに変換する。
  3. FTPでアイコン画像を差し替える。

pngファイル作成

情けないぐらい絵心がない自分。しかし作らないことには進まない。

ちょいと調べると、サイズは1つではなくて複数作成することができるらしいが、シンプルでいいなら16pxを1つ作成するだけで十分なようだ。
ペイントソフトはPaintbrushを使用した。
ブログタイトルから、Squareは形で表現して、BeatとEngineは線で表現したつもり。結果、Eはどっか行ったけどな!

絵というより図形と呼ぶべきファビコンに仕上がったが、それでも30分ぐらいはかかったんだぜ。

icoファイルに変換

pngファイルのままでもファビコンに設定できるらしいけど、icoファイルとして設定する方がいろいろ問題がないらしい。

これも適当に検索すると変換ツールを公開してくださってる方がいらっしゃるので、こちらのサイトをありがたく使わせていただいた。
アイコンファイルをアップロードして、ダウンロードするだけ。とても簡単。ありがとうございます!

サーバーにあるアイコン画像の差し替え

自分の使っているテーマStinger5では、images/logo.icoがファビコンファイルとなっていた。
だが、一般的にファビコンのファイル名はfavicon.icoが標準なので、header.phpを編集し、そのように変更した。

header.phpの変更

これで完了!

Fire Foxのファビコンキャッシュについて

自分の愛用しているFire Foxでは、ページ更新ではファビコンのキャッシュがクリアされない。F5はもちろん、Ctrl/Command+Shift+Rでもだめ。
いろんな人が、履歴クリアでもだめだって書いてあったけど、以下の方法で履歴クリアしたら新しいファビコンになった。
よかった。

ブログ開設シリーズ記事

前回「アイキャッチ画像の非表示」

次回「プロフィール作成」

以上!

-Web

執筆者:


comment

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

関連記事

Search Console導入

未だにGoogleアナリティクスの使い方もよく分かっていないのだが、検索してページをご覧になった方がいらっしゃる様子。 ただし、Googleは検索ワードをSSLで暗号化しているため、8割以上が「not …

SSHのポートNo.変更とパーマネントリンクの問題解決

ブログを始めるにあたって、いくつかスムーズに行かない部分があった。 基本的な内容かも知れないが、トラブルシューティングは役立つ情報なので、記事として残しておくことにする。 SSH接続時のポート番号 S …

[CentOS] 時刻の修正

サーバーの時刻がずれていたので、修正した。 修正前 気づいたのは、WordPressの投稿時刻がずれていたこと。 いつからずれていたのかは知らないが、ぴったり30分遅れていた。 ターミナルでさくらVP …

サーバーの構成を考え直す

勉強も兼ねてブログをVPSで運用してきたわけですが、アプリローンチに備えて構成を考え直す必要が出てきました。 背景 現状、以下の2つを契約中。 さくらのメールボックス さくらのVPS サーバー運用の実 …

メールサーバーのセットアップ

ブログ用に、メールサーバーをセットアップしたので、手順をメモ。 自分のメールサーバーの目的 今後様々な活動をしていくとき、コンタクト先として独自ドメインのメールアドレスがあると何かと便利だと思い、メー …