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

※本サイトは、アフィリエイト広告による収益を得て運営しています。リンク先での購入により売上の一部が本サイトに還元されることがあります。
ファビコンの作成(変換)ツール

ファビコンは随分昔に作ったままでしたので、この機会(ブログ更新再開)に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です。



この記事のタイトルとURLをコピーする
スポンサーリンク