ファビコンは随分昔に作ったままでしたので、この機会(ブログ更新再開)にiOSやAndroidに対応させたものを作成しました。
ウェブサイトを閲覧できるプラットフォームが増えたので、ウェブサービスを利用して、まずは現状確認から進めていきたいと思います。
※WordPressのテーマBonesだとheader.phpにファビコンの指定箇所があります。ファビコンを作成して指定ディレクトリに配置すればOKです。
favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。
ファビコンのチェックサイト
RealFaviconGenerator.net
ページ下部の「Check your favicon」にある入力欄にURLを入力すると結果が表示されます。
ファビコン作成・変換サイト
事前に縦横256pxで画像ファイルを作成。
上記でチェックしたRealFaviconGenerator.netにアップロードします。
ファビコン書き出しだけでなく、HTMLコードも書き出してくれます。
プラットフォーム
アップロードした画像から標準のファビコンに加えて、下記の3種類が書き出されます。
iOSのウェブクリップ(ホームに追加した際に表示されるアイコン)
Android Chrome((ホームに追加した際に表示されるアイコン)
Windows 8 のタイル(スタート画面に追加した際に表示されるアイコン)
ファビコンのカスタマイズ
「Select your Favicon picture」ボタンから画像ファイルをアップロードすると下記の画面に遷移します。
各プラットフォームごとに調整が可能です。
HTMLコードを書き出し
ページの下部にファビコンの画像一式とHTMLコードを書き出すボタンがあります。
また、書き出す前にオプションで、ファビコンの配置ディレクトリ、画像圧縮率、画像の拡大縮小のアルゴリズム、サイト名称の変更が可能です。
「Generate your Favicons and HTML code」で書き出し!
ファビコンのファイル一覧
ダウンロードしたファイル一覧です。
「Favicon package」ボタンよりファビコン画像をダウンロードしアップロード。htmlのヘッダに書き出されたコードを記載すればOKです。