WordPress

ファビコンfaviconを作りましょう！！

ファビコンfaviconって何？

ブラウザでお気に入りに入れた時にホームページ名の左に表示されるマークです。

↑このマーク

 

これを作成していないと

このようなマークになります。

 

寂しいですし、自分のホームページをお気に入りに入れてもらったあとに見つけやすくなります。

見つけやすいということは、一日に見てもらえる人の数が増える可能性があるという意味です。

 

ファビコンの代表的なサイズ

 

• 16px × 16px：IEのタブ
• 24px × 24px：IE9の「ピン留め機能」
• 32px × 32px：Chrome、Firefox、Safariなどのタブ
• 48px × 48px：Windowsデスクトップ
• 64px × 64px：高解像度のWindowsサイトアイコン
• 48px × 48px：ショートカットアイコン
• 64px ×64px：ショートカットアイコン
• 128px ×128px：ショートカットアイコン
• 144px ×144px：Androidホーム画面
• 152px ×152px：iOS・Androidホーム画面
• 258px ×258px：ショートカットアイコン

ってキリがないので、

16px × 16px、32px × 32pxのみで十分です。経験を積んでいき、余裕が出てきたときに気が向いたら他サイズを検討してよいというレベルです。

 

前記のファビコンの形を見ると丸型ですが、初心者は、正方形で作ります。

 

制作の流れ

1. 152px ×152pxの正方形でマークを作ります。
2. 自動変換サービスで複数の画像を生成します。
3. ファビコン画像ファイルを作成します。
4. サイトにアップ・設定します。

152px ×152pxの正方形でマークを作る

Windowsでペイントを開きます。

152×152のサイズにします。下図の赤丸の箇所を【クリック】するとサイズ変更できます

 

 

縦横比を維持するのチェックを外して152のサイズを入力します

 

作ったのがこれ

 

自動変換サービスで複数の画像を生成

https://realfavicongenerator.net/

英語です。でも簡単です。

開いて、下記の赤い箇所を【クリック】

下記画面が表示されるの右下青いボタンを【クリック】

下記ページが表示されるので、スクロールして下部の青いボタンを【クリック】

下記の箇所を【クリック】してファイルをダウンロードします

 

複数の画像がダウンロードされますが

 

・favicon-16×16.png
・favicon-32×32.png
・android-chrome-144×144.png→144×144
・apple-touch-icon.png→152×152

のみを使用します。

 

ファビコン画像ファイルを作成します。

https://ao-system.net/alphaicon/

下記「画像ファイル1を選択」からひとつひとつ画像を選択して、最後にアイコン作成ボタンを押します

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

アイコンダウンロードボタンを押すと、ファビコンの出来上がりです。

次回は、設定です。また、更新します。

ファビコンをサイトにアップ・設定

STINGERというWordpresのテーマを使用している場合には「STINGER管理」というページでファビコンをアップする箇所があります