Faviconを作り直す20180214
このページの内容
Webのロゴマーク表示はFavicon等で行っているが、最近は高精細デバイス等で大きいサイズの画像へ現れたギザギザが気になりだしてきた。
従来のロゴは十数年間使用してきたので、今回は元になる画像サイズを出来る限り大型にして、これを元にFaviconと表示関連の画像を作り変えた結果、ギザギザ問題は概ね解消できた。
大型画像にした効果でほぼギザギザは無くなった。
画像はクリックするとLightboxで拡大表示します。
２０１８年２月１４日
1：詳細説明
Microsoftが用意したインターネット用の表示アイコンは、通常
や
がファイル名の前に表示される。
「お気に入り」リストやPC内での表示は、どれも同じ表示になりファイル名のみで目的のファイルを探すのに一苦労する事がある。
その為otosan pageでは、カスタム設定してオリジナルのロゴマーク（favicon.ico）「
」が表示される設定にして、自サイトは一目で分かる様に「視認性」を良くしている。
このロゴマークを最初に使い始めたのは、10数年前からであり当時は小型形状の画像だけで十分だった。
しかし、最近はデバイスの増加や解像度の向上等により、大型ロゴに於いてギザギザが目立ち始めてくるようになってきた。下図1参照。
そこで解像度の高いデバイスでも、上記表示問題を出さない様に改良してみた。
先ずfaviconを作成する画像を製作し、favicon作成サイトでfavicon.icoや関係ファイルへ変換し、これをindexページへ実装したりHPのレンタルサーバーへ全部UPした。
その結果、小さ目の表示での効果はあまり変わっていなかったが、やや大きめの表示をしているindexページやTwitterページ等では、ギザギザ問題は概ね解消していた（下図8参照）為メモした。
2：やったこと
- 従来のロゴマーク「」は手書きでは作れない為、当時のWordで「О」のフォント（Comic Sans MS）を拡大表示させ、「to」を上へ表示して重ねた合成画像であった為、今回もほぼ同じ作り方でやってみた。
- Office2016同梱フォントの表示サイズは以前より改善されていたのか、「О」の文字はMax700ptで表示可能であり（使い易いExcel2016は下図6の様にMax409ptが限界で小さい為使用は止めた。）、「snipping Tool」で図形にしてパーツ化しこれをベースに使用した。下図4参照。
- 次に「to」の文字もword2016で、Win10標準の「游明朝体」で200pt位に書き、イタリックで傾斜・太字の指定をして書き、「snipping Tool」で図形化してパーツにした。下図5参照。
- Word上で2つの画像を重ね合わせグループ化し一つの画像にして、再び「Snipping Tool」で切り取り、画像は695x705pxに出来上がった。
- しかし、フォントは元々長方形であるが、favicon用画像は「正方形」に加工する必要があり、「ペイント」で最終的に600ｘ600pxの.png画像へ変換した。下図3参照（ここでは半分のサイズを使用）。
- この画像を元画像にして、Favicon作成サイト（※１）からHPで使える画像に変換した。
- 出力されたファイルは、Favicon（.ico） 1ファイル、各デバイス用画像（.png）38ファイル その他2ファイルの合計40ファイルだった。下図7参照。
- 作成サイトのガイド通り、これらファイルをフォルダ内に配置したりindexファイルへ実装し、これらを全てサーバーへUPした。
- また同時に、大型画像を使用していたindexページタイトルへの実装や、Twitterのプロフィール画像設定には600ｘ600pxのpng画像を使用した。下図8参照。
参考になった資料
様々なファビコンを一括生成。favicon generator
3：関連画像
画像はクリックするとLightboxで拡大表示します。
図1 従来のTwitterプロフィール画像。ギザギザが目立つ。
図2 全部このマークが付いていたら味気ない？。
図3 完成したオリジナル・ロゴ。
図4 「Ｏ」パーツ。
図5 「to」パーツ。
図6 Excel2016ではこれ以上の大きさに出来なかった。
図7 favicon generatorから出力された全ファイル。
図8 新規作成のTwitterプロフィール画像。