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

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

最近の投稿

アイキャッチ
ワードプレス管理画面にログインできない対処法

今回はワードプレスについてです。 先日、管理画面には入れなくてかなり焦りました。ページは普通に表示されているのですが、管理画面には一切入れず、ページは機能していませんばかり。。。。 サーバー...

25 Mar 2017

アイキャッチ
Git最初の一歩

今回は分散型バージョン管理システムのgitについてです。ギットと読みます。 [公式サイト](https://git-scm.com/) ファイルのバージョン管理と思っていただければいいと思い...

18 Mar 2017

アイキャッチ
web-makerクロームエクステンション

すぐにJavascriptやcssを試して見てみたいというときがありますよね?そんなときはweb-makerが役立ちます!マークダウンも試せます、ちなみにクローム限定です。 すぐにjavasc...

14 Mar 2017

アイキャッチ
ドメイン移管について

ドメイン移管についての手順です。頻繁にすることでもないので忘れがちなので備忘録をかねて書き記しておきます。 ドメインの移管される側と移管する側の立場になって考えていきます。 仮定として佐藤さ...

07 Mar 2017

アイキャッチ
リンクタグの_blankについて

今回はちょいメモです。最近はあまりリンクにtarget="_blank"をつけることはなくなったのですが、これをする場合はrel="noopener noreferrer"をつけた方が良いという...

25 Feb 2017

著者

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

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

タグクラウド

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