ファビコンの作成(変換)ツール

2015年3月8日

ファビコンは随分昔に作ったままでしたので、この機会(ブログ更新再開)にiOSやAndroidに対応させたものを作成しました。
ウェブサイトを閲覧できるプラットフォームが増えたので、ウェブサービスを利用して、まずは現状確認から進めていきたいと思います。
※WordPressのテーマBonesだとheader.phpにファビコンの指定箇所があります。ファビコンを作成して指定ディレクトリに配置すればOKです。

favicon(ファビコン) Wikipedia

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」で書き出し!

ファビコンのダウンロードとHTMLコード

ファビコンのダウンロードとHTMLコード

ファビコンのファイル一覧

ダウンロードしたファイル一覧です。

書き出されたファイル一覧

書き出されたファイル一覧

「Favicon package」ボタンよりファビコン画像をダウンロードしアップロード。htmlのヘッダに書き出されたコードを記載すればOKです。