簡単ファビコン作成!ファビコンジェネレーターのご紹介

Nov 12, 2016

簡単ファビコン作成!ファビコンジェネレーターのご紹介

2016-11-12 最終更新日:2016-11-13
blog web favicon ファビコン

サイトを作成する上で必須になってきていますファビコンについてご紹介します。 サイト表示にはわかりやすいfaviconを入れることがもはや当たり前になってきていますが、最近は対応ブラウザや機種によっても変わってきますので一括で出力できるFavicon Generatorをご紹介します。

⇒公式サイトはこちら

作成方法

ファビコンの作り方は簡単です。あらかじめPNG、JPG、SVGのいずれかのファイルを用意しておきます。私はpngファイルで作成しています。300x300ぐらいのサイズが良いと思います。最低70x70が必要です。

FaviconGenerator

トップページのSelect your Favicon pictureをクリックして画像を選択します。 因みに試しにファビコンを作成したい場合はDemo with this pictureをクリックすれば仮のアイコンを作成することが出来ます。

FaviconGenerator

あらかじめHTML5のアイコンを作っておきましたのでこちらを選択します。

FaviconGenerator

するとすぐに変換されます。

FaviconGenerator

設定画面が出てきますが、入力するのはApp nameというところだけです。HTML5と入力しました。

FaviconGenerator

Generate your Favicons and HTML codeというボタンをクリックします。

FaviconGenerator

Favicon packageをクリックしてダウンロードして完了です。 アイコンファイルがzipにて圧縮されていますので解凍してサイトのindex.htmlファイルと同じ階層にアップロードして head内に

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
</pre>

を記入してできあがりです。

公式サイトのトップページにCheck your faviconという項目にアドレスを記入するところがありますのでここで確認が出来ます。

FaviconGenerator

このようにチェックが完了できると緑色で表示されます。うまくいかない場合はエラー表示で赤く表示されます。

参考になれば幸いです。


∞Tadashi Suyama∞

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

Similar Posts

最近の投稿

アイキャッチ
速さ・時間・距離の計算

さて、最近は寒くなってきましたね。日本海側は大雪で大変な状態になっています。 外にも出られずちょっとした運動もしずらいですね。室内運動かジムに行くということになりますね。 そんなことを考えて...

14 Jan 2017

アイキャッチ
複数のチャットサービスをまとめてひとつで管理する方法

GmailやOutlook、Slackやチャットワークなどを使っている方も多いかと思います、このサービスを一元管理するアプリがありました。その名もFranz(フランツ)です。[⇒公式サイト](h...

07 Jan 2017

アイキャッチ
明けましておめでとうございます

明けましておめでとうございます。 本年もよろしくお願いします。 今年の初詣は天候も良く人も多かった気がしますね。 勝田神社の夜中に行って参りました。大晦日深夜の初詣は何十年ぶりのことでしょ...

04 Jan 2017

アイキャッチ
年末年始のお知らせ

今年ももう終わりですね。 当事務所は12/30〜1/3までお休みでございます。 1/4日から営業開始いたします。 よろしくお願いします。 ### 年末年始の営業時間 12/30-1/...

29 Dec 2016

アイキャッチ
いざというときのためのバックアップ

皆さん、こんにちは。クリスマスも終わり、あっという間に年末ですね。 データ整理とバックアップしてますか? 私はやっておりますが、先日不幸なことになりました。NASが故障してさらに中に入っている...

25 Dec 2016

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

blog web favicon ファビコン
フッターイメージ