windowsのペイントを使ったFavicon画像の作り方と、WordPressでの設定方法

windowsのアクセサリにあるペイントを使ってFavicon(ファビコンと読む)を作ってみました。ファビコンというのはブラウザのタブに表示される画像です。ブックマークをつけたときも表示されます。

ファビコンがない状態のタブ

ファビコンがある状態のタブ

それでは作り方です。windowsのペイントを立ち上げたらサイズ変更をして正方形の枠になるようにします。正方形であればサイズは適当で大丈夫です。あまりにも枠が小さいとペイントでは書きづらいので、ここでは300ピクセルの正方形にしました。

①赤枠のサイズ変更を押下する。
②青枠のピクセルを選びサイズを指定する。
③「OK」ボタンを押下する。

そうすると、以下のように正方形の枠になります。

ここにファビコンの絵を書きます。ペイントは簡易ソフトなので細かい絵は難しいです(無理です)。図形を組み合わせたデザイン程度であれば大丈夫でしょう。書き終わった絵が以下です。

これをpng形式で名前をつけて保存します。ファビコン用の画像が出来たのでワードプレスの設定に入ります。ワードプレスでは任意の画像をサイトアイコンとして登録すればファビコンとして設定してくれます。本サイトはワードプレスで運用しているので、この方法でファビコンを設定しました。ワードプレスでの操作の仕方です。

まず、管理画面の左側のメニューから「外観」→「カスタマイズ」を選択します。そうするとカスタマイズの画面が表示されるので「サイト基本情報」を押下します。

画面の左下にサイトアイコンの表示が出るので「サイトアイコンを選択」を押下します。512ピクセル以上と書いてありますが簡単なデザインなので気にしてません。正方形なら大丈夫でしょう。

png画像を選択してアップすると画像切り抜きの画面が表示されます。僕の場合は切り抜きが不要なので右下のボタンは「切り抜かない」のほうを選択しました。先ほど画像は512ピクセル以上と書いてありましたが、切り抜く必要があるのでそのような指定をしているのかな?とも思いました。

画像切り抜きの画面を閉じるとサイトアイコンとして選択した画像が表示されています。上部にある「公開」ボタンを押下してファビコンの設定は完了です。

ワードプレスでファビコンを設定するのは簡単なので、もっと早く設定しておけば良かったです。。

[広告]

ワードプレスではなく普通のWEBサイトでファビコンを設定する場合についても書いておきます。ファビコンは通常ico形式なので、先ほどのpng形式の画像をico形式に変更する必要があります。この変更については、以下のサイトを利用させていただきました。

ファビコン favicon.icoを作ろう!

ファビコンはブラウザごとにサイズが異なるようですが、16×16と32×32があればだいたい大丈夫らしいです。なので、ピンク色の枠で囲った「ファイルを選択」のところに先程作成したpng形式の画像をそれぞれ指定します。その後に、緑色の枠の「作成」ボタンを押下します。

そうすると、ファビコンが作成され「ダウンロード」ボタン(緑色の枠のところ)が表示されるので、押下してダウンロードします。ダウンロードしたファビコンはfavicon.icoと言う名前になっています。

これでファビコン画像(ico形式)の作成は完了です。これをWEBサーバーのドキュメントルートにfavicon.icoという名前で配置するだけでブラウザがファビコンを認識してくれます。HTTPファイルの修正も不要です。ちなみにドキュメントルートとは、https://www.example.com/index.html のURLがあった場合、index.htmlを格納しているディレクトリになります。レンタルサーバーを借りてWEBサイトを運営している方はレンタルサーバーの提供元に聞いてみてください。

もしファビコンが認識されない場合、ブラウザにキャッシュが残っていると思うのでキャッシュのクリアをしてみてください。ChromeとFirefoxのキャッシュのクリアの方法は以下です。

ChromeのキャッシュとCookieの消去
Firefoxのキャッシュを消去するには

Firefoxでキャッシュをクリアする画面を載せておきます。データを消去(赤枠のところ)を押下するとキャッシュがクリアされます。

ブラウザで再表示すれば、ファビコンが表示されると思います。

ubuntuにインストールしたnginxでPHPを動かしてみた。

ubuntuにインストールしたnginxでPHPを動かしてみました。もともとApacheで動いていたPHPアプリをnginxで動くようにしています。環境とバーチャルサーバーの設定は以下です。PHPはインストール済みです。作業はrootユーザーで行いました。

【環境】
ubuntu 18.04 LTS
nginx 1.16.1
PHP 7.2.24

【バーチャルサーバーの設定】
server {
  listen 80;
  server_name www.example.com;

  location / {
    root /var/www/html/example;
  }
  :
  :
}
server {
  listen 80;
  server_name www.hogehoge.com;

  location / {
    root /var/www/html/hogehoge;
  }
  :
  :
}

バーチャルサーバーは、/etc/nginx/conf.d/default.conf に設定済みとします。default.confでなくてもconf.d配下の別のconfファイルでも可です。nginx.confがconf.d配下のconfファイルを読み込んでいます。

Apacheでは「php7_module(libphp7.2.so)」をロードしてPHPを動かしていましたが、nginxでは「php-fpm」というパッケージが必要です。まずphp-fpmがインストールされているか確認します。

インストールされているパッケージの確認
# dpkg -l | grep php

僕の環境ではそれらしきものは見つかりませんでした。調べてみると「php-fpm」というパッケージと「php7.2-fpm」というパッケージがあるらしい。PHP7.2を使用しているのでphp7.2-fpmのほうを使うことにしようと思い、パッケージを検索してみました。またパッケージ情報も確認してみました。

パッケージの検索
# apt search php7.2-fpm

パッケージ情報の確認
# apt show php7.2-fpm

※出力結果は省略。。

問題なさそうなので(あまり根拠はないのだけど大丈夫そう)、php7.2-fpmをインストールします。

php7.2-fpmのインストール
# apt install php7.2-fpm

特に問題なくインストールは完了しました。php7.2-fpmがインストールされたか確認してみます。

インストールされているパッケージの確認
# dpkg -l | grep php

赤枠で囲った部分がインストールされたphp7.2-fpmです。続いて、php7.2-fpm、および、nginxの設定に入ります。

まず、php7.2-fpmで設定するファイルは以下です。

/etc/php/7.2/fpm/pool.d/www.conf

この設定ファイルで確認する箇所は以下の3つです。

1. 起動ユーザー
2. nginxとのプロセス間通信の方法
3. プロセス数のチューニング

1.の起動ユーザーですがデフォルトでは「www-data」になっています。今回はApacheで動かしていたPHPアプリをnginxでもそのまま動かそうと思うので起動ユーザーはwww-dataのままとします。

user = www-data
group = www-data
listen.owner = www-data
listen.group = www-data
→ これらはそのまま(変更なし)

2.のnginxとのプロセス間通信の方法についてですが少し説明を入れておきます。nginxではPHPの処理をphp7.2-fpmに任せてしまっていて「〜.php」ファイルへのアクセスが来たら、php7.2-fpmに処理を引き渡せるように設定をします。処理を引き渡す方法としてプロセス間通信を行うのですがプロセス間通信の方法として以下の2つがあります。

・Unixソケットを使う方法
・TCP/IPを使う方法

nginxはWEBサーバーの機能のみを提供しPHPを実行するのに別のアプリケーションサーバーを用意する場合(WEBサーバーとアプリケーションサーバーを分離する、つまり別々のサーバーとして2台用意する場合)は、リモート接続が可能なTCP/IPを使う方法でプロセス間通信を行います。今回の僕の環境はWEBサーバーもアプリケーションサーバーも同一のサーバーなのでUnixソケットを使う方法でプロセス間通信を行うことにします(わざわざTCP/IPで通信を行う必要がないので)。デフォルトの設定では /run/php/php7.2-fpm.sock を使用します。念の為、その場所にちゃんとソケットファイルがあるかどうか確認します。このソケットファイルはphp7.2-fpmが起動しているときに作成されています。

ソケットファイルの確認
# cd /run/php
# ll

ソケットファイルが作成されているようなので、この設定もそのままとします。

listen = /run/php/php7.2-fpm.sock
→ これはそのまま(変更なし)

3.のプロセス数のチューニングですが、結論を先に言ってしまうと僕の環境ではデフォルトのままとしました。ここは各自の環境によって必要に応じて変えるべきところなので設定値の意味だけ書いておきます。

pm = dynamic
pm.max_children = 5
pm.start_servers = 2
pm.min_spare_servers = 1
pm.max_spare_servers = 3
;pm.max_requests = 500
→ これらはそのまま(変更なし)

意味は以下です。

pm = dynamic → プロセス数を動的に制御する
pm.max_children → 子プロセスの最大数
pm.start_servers → 起動時に作成される子プロセス数
pm.min_spare_servers → 待機子プロセス数の最小値
pm.max_spare_servers → 待機子プロセス数の最大値
pm.max_requests → 再起動するまでの最大リクエスト数

pm.max_requestsはデフォルトではコメントアウトされています。「pm = dynamic」にするとApacheのPrefork MPMの動きと同じようになるようです。

ごちゃごちゃ書いたのですが、結局の所、php7.2-fpmの設定ファイルは何も変えていません(デフォルトのままです)。nginxの設定ファイルだけ修正しました。

では、nginxのどの設定ファイルを修正したかというと以下になります(バーチャルサーバーの設定がされているファイルのことです)。

/etc/nginx/conf.d/default.conf

このdefault.confに「〜.php」ファイルへのアクセスが来たらphp7.2-fpmに処理を転送する、という内容を記載します。他にもパラメータファイルのインクルードとか404エラーファイルの出力だとかあるのですが、細かい内容は省略します(ゴメンナサイ)。以下をdefault.confに貼り付けます。


    location ~* \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        include fastcgi_params;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_intercept_errors on;
        fastcgi_pass unix:/run/php/php7.2-fpm.sock;
    }

一番最後の fastcgi_pass unix:/run/php/php7.2-fpm.sock; のところがnginxからphp7.2-fpmへphp7.2-fpm.sockを通じて処理を引き渡す設定になります。

バーチャルサーバーが設定されているのでそれぞれのseverディレクティブに上記の内容を反映したものが以下です(僕が設定した内容です)。


最後に、nginxを動かすユーザーをnginxからwww-dataに変更します。修正するファイルは以下です。

/etc/nginx/nginx.conf

nginx.confに「user」があるので、そこを変更します。

変更前
user nginx;
 ↓
変更後
user www-data;

以上でnginxのコンフィグファイルの修正は終了です。コンフィグファイルのテストを行います。

コンフィグファイルの確認
# nginx -t

「syntax is ok」および「test is successful」と表示されれば問題ありません。php7.2-fpmをインストールした直後だとphp7.2-fpmが稼働しているので一度、停止させます。nginxも停止させます。

php7.2-fpmの停止
# systemctl stop php7.2-fpm

nginxの停止
# systemctl stop nginx

起動させる順番は最初にphp7.2-fpm、次にnginxとなります。

php7.2-fpmの起動
# systemctl start php7.2-fpm

nginxの起動
# systemctl start nginx

ブラウザでPHPアプリにアクセスしてみてください。設定に問題がなければ動くと思います。info.phpにアクセスするとPHPがFastCGIで動いていることを確認できます。

サーバー起動時にnginxとphp7.2-fpmを自動起動させておきたい場合は以下の設定も忘れないようにしてください。

自動起動の設定
# systemctl enable nginx
# systemctl enable php7.2-fpm

– – – –
nginxのPHPの設定については以下の書籍を参考にさせていただきました。

Apacheを使ったことがある方は問題なく読めると思います。nginxをガッツリ知りたい人向けです。企業のエンジニアで大規模コンテンツ配信を行う必要があり、その運用をやる方は納得がいく内容でしょう。ちなみに趣味程度でnginxをいじる(僕のような)人は半分程度読めば十分でした。前半だけでTLS通信で静的コンテンツ、動的コンテンツを返すWEBサーバーの構築ぐらいはできます。