知識の枝

"All is well"

ホームページにアイコンを設定しよう

約448日前 2020年9月4日17:50
デジタル
ホームページ Django HTML

改訂履歴


2020/9/4 投稿

1. はじめに


みなさん、ホームページを開くとホームページタイトルの横に小さなアイコンが確認できますよね?



このアイコンのことを「favicon(ふぁびこん」と呼びます。
今回は、このfaviconの作り方とDjangoホームページへの適用方法を解説します。

ちなみに「favicon」は「favorite icon」の略です。
「お気に入りアイコン」と訳せます。
たしかにブックマーク(お気に入り登録)すると名前の横にアイコンが表示されますね!

2. 目的


自分のホームページにオリジナルのアイコンを設定する。

3. アイコンの作成


3.1 - 画像の準備


まず始めにアイコンの元となる画像を用意します。
画像は何でも良いのですが、ファイル形式(拡張子)は下記5つの内のどれかである必要があります。
「.jpg」「.gif」「.bmp」「.png」「.ico」

アイコン化すると小さくなるので、なるべくゴチャゴチャしていないものがおススメです。

3.2 - アイコンファイル作成


faviconは下記サイトで簡単に作ることができます。

xiconeditor.com

リンク先にアクセスしたら、
右側の「1Import」をクリックします。



小さなウィンドウが表示されるので、「Upload」をクリックして
先ほど準備した画像を選択しましょう。



画像のどの部分をアイコンにするか範囲で選択できるので、
枠の角を引っ張り広げ、画像全体を選択しましょう。



全体を選択したら「OK」を押しましょう。



最初の画面に戻るので「4 Export」をクリックします。
※「3 Preview」でどんな感じになるか事前に確認できます。気になる方はどうぞ。



また小さなウィンドウが表示されるので、
「Export your icon」をクリックして「favicon.ico」をダウンロードしましょう。



アイコンファイルの作成が完了しました。

4. ホームページへ適用


作成した「favicon.ico」を自分のホームページに適用させます。

本ホームページ記事の「ホームページを作ろう」通りに自分のウェブページを作成した方は、
デフォルトの「favicon.ico」ファイルが
/home/django/homepage/blog/static/blog/img/の中に保存されています。

これからこのファイルを新しい「favicon.ico」に置き換えていきます。

ホームページを作る際に作成した「myhp」フォルダを覚えていますか?
覚えてない方は下記をご参照下さい。
3.2 - 作成へのリンク

「.gitignore」が置いてあるフォルダです。

「myhp」フォルダに移動したら、
このフォルダの中の「blog/static/blog/img」フォルダ内に、
先ほどの「favicon.ico」をコピー(又は移動)させて古いファイルを上書きしましょう。

それでは「git CMD」を起動して下記コマンドで「myhp」フォルダに移動しましょう。
C:\Users\ユーザー名>cd myhp   #「myhp」フォルダに移動します
C:\Users\ユーザー名\myhp> #入力待機がmyhpになります

下記コマンドで変更差分(今回の場合はfavicon.ico)をアップロードに登録します。
※最後の「.」を忘れないように!
git add --all .

次にコメントを残します。(どんな理由でアップロードしたか分かるように)
git commit -m "Change favicon.ico"

最後に下記コマンドでアップロードを実行します。
git push -u origin master

これでGitに新しい「favicon.ico」がアップロードされました。

次にGitからサーバーにファイルを移します。
まずGitから持ってきたファイルを置いておく一時的なフォルダ(tempとします)を作成します。

Tera termを起動し、下記コマンドで/home/djnago/フォルダに移動します。
[user@IP ~]$ cd /home/django   #「django」フォルダに移動します

「temp」フォルダを下記コマンドで作成しましょう。
[user@IP django]$ sudo mkdir temp   #「temp」フォルダを作成

「temp」フォルダの中に移動します。
[user@IP django]$ cd temp

Gitからファイルを持ってきます。下記コマンドを実行下さい。
※「GitのURL」の部分はGitホームページで確認できます。
 分からない方はここを参考にして下さい。
※コマンドの最後に「.」を入れることを忘れないように!
[user@IP temp]$ sudo git clone GitのURL .

「temp」フォルダ内にGitのファイルが全てコピーされます。
下記コマンドでコピーしたファイルを確認できます。
[user@IP temp]$ ls

ファイルがしっかりコピーされていますか?
※使うのは「favicon.ico」だけですので他のファイルは後で削除します。

「favicon.ico」を下記コマンドで/home/django/homepage/blog/static/blog/img/フォルダ内に移動させます。
[user@IP temp]$ cd blog/static/blog/img   #「img」フォルダに移動
[user@IP img]$ sudo mv favicon.ico /home/django/homepage/blog/static/blog/img/

これで古いfaviconが新しいものに上書きされました。

他のいらないファイルは消しておきましょう。
「django」フォルダに戻ります。
[user@IP img]$ cd /home/django

下記が削除コマンドです。
[user@IP django]$ sudo rm -rf temp

これで「temp」フォルダが削除されました。

最後に「static」フォルダを更新して完了です。
「homepage」フォルダに移動します。
[user@IP django]$ cd homepage

下記コマンドで「static」ファイルを更新します。
[user@IP homepage]$ sudo python3.6 manage.py collectstatic

これでホームページに新しいfaviconが適用されました。

5. 動作確認


ブラウザのキャッシュ等を削除し、ホームページを再読み込みしてみましょう。
※やらなくても更新されるかもしれません

自分のホームページのアイコンが変わっていたら無事完了です。
アイコンの設定は以上です。お疲れ様でした。