聞いたこともない方もおられるかもしれませんが、必ず目にしているファビコンやWebクリップアイコンのティプス(私の忘備録)です。この投稿のアイキャッチ画像はiPhoneで当サイトを「ホーム画面に追加」ものになりますが、ホーム上で表示されているアイコンもそれにあたります。
Webデザインに興味のある方は押さえておくと良いでしょう。一つ一つ作っていると管理だけでもめんどうなのですが、殊勝な方が用意してくださったジェネレートサービスサイトでは、一気に複数の画像を作ってくれて、且つ、HTMLの記述案内までいただけるという至れり尽くせりになっています。(感謝!お急ぎの方はこの投稿なんか読んでないで「iconifier.net」にGOしてしまっていいくらいです。)
まずは関連情報リンクを、
- 綺麗なfavicon(ファビコン)作成の基本的なコツ・アイデアまとめ
- スマホ用のWebクリップアイコンapple-touch-icon.png(ファビコンのようなもの)を設置する
- ファビコンを設定したならアップルタッチアイコンも作ろう
次にジェネレーターを、
- iconifier.net “Free Online Icon Generator for Apple and Favicon Icons”
(ここで必要なファイルは揃います。) - 半透過マルチアイコンfavicon.icoを作ろう!
(このサイト内の「便利サイト」コラムはほんとうに便利で助かってます。感謝。)
上記の「iconifier.net」ジェネレーターが良いでしょう。次は画像をアップロードした際のインターフェースです。書いてありますがアップする正方形画像のサイズ(500KB以下)に注意するぐらいで、あとはおまかせ。ZIPファイルにまとめてダウンロードできます。HTMLの記述案内がテキストで付いてきます。
それで出来上がったファビコンの表示です。もちろんAndroidでもiPhone同様に「ホーム画面に追加」できます。
最後に、PING画像を利用できるので透過もしくは半透過のアイコンの作成が可能ですが、私が試した限りでは透過アイコンはプラットフォームの表示箇所によっては美しく表示されないケースがありました。半透過は試していないのですが、アイコンで完結したデザインを心がけた方が良いと感じました。いまのところ。