1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. 様々なデバイスに対応したFaviconに一括変換してくれる「Real Favicon Generator」が便利!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
nasneの出荷が近日終了!後継機の予定なしの発表を受けて品薄に!?

nasneの出荷が近日終了!後継機の予定なしの発表を受けて品薄に!?

2012年から発売しているSONYのネットワークレコーダーの「nasne」がついに近日出荷が終了するとのアナウンスがされました。nasneとプレイステーション、スマートフォンをつ...

最大92%オフ!VEGAS全製品を安く入手できるスーパーチャンスキャンペーン!

最大92%オフ!VEGAS全製品を安く入手できるスーパーチャンスキャンペーン!

現在ソースネクストでは、VEGAS全製品を安く入手できるスーパーチャンスのキャンペーンを実施しており、最大で92%オフでVEGASシリーズの製品を販売しています!キャンペー...

24時間限定でEaseUS Todo PCTrans Proが無料で手に入るキャンペーン!

24時間限定でEaseUS Todo PCTrans Proが無料で手に入るキャンペーン!

EaseUS Softwareは、PC引っ越しソフト(データ移行ソフト)であるEaseUS Todo PCTrans Pro 10.5の最新版の公開にあたって、EaseUS Todo PCTrans Pro 10.5のライセンスコード...

PWA(ServiceWorker)で「ホーム画面に追加」を実装する方法!

PWA(ServiceWorker)で「ホーム画面に追加」を実装する方法!

先日の記事でNetaGearやDuelLinks.netでも「ホーム画面に追加」を実装して、WEBサイトをアプリのようにスマホのホーム画面に簡単に追加可能な「ホーム画面に追加」ボタンを...

NetaGearに「ホーム画面に追加」ボタンなど追加するアップデートを行いました!

NetaGearに「ホーム画面に追加」ボタンなど追加するアップデートを行いました!

久しぶりにNetaGearのアップデートを行いました。主な変更点は3つでNetaGearに何度かアクセスしている人に表示される「ホーム画面に追加する」ボタンが表示されて、スマホ...

Amazon EchoシリーズがMusic Unlimitedに新規登録すると半額に!無料体験でも可能!

Amazon EchoシリーズがMusic Unlimitedに新規登録すると半額に!無料体験でも可能!

Amazonでは、Amazon Music Unlimitedへの新規登録で対象のAmazon Echoシリーズが50%OFFになるキャンペーンを開催中です!キャンペーン期間は2019年6月11日(火) 00時00分~6...

通信できない時だけ表示されるChromeの恐竜ゲームで遊ぼう!

通信できない時だけ表示されるChromeの恐竜ゲームで遊ぼう!

今回は、Google Chromeで通信ができない(オフライン)時にだけ表示されるゲームについて紹介したいと思います。すでに知っている人もいるかも知れませんが、Google Chromeに...

遊戯王デュエルリンクスのカード検索サイト「DuelLinks.net」を作りました!

遊戯王デュエルリンクスのカード検索サイト「DuelLinks.net」を作りました!

本日2019年6月8日より遊戯王デュエルリンクスのカード検索サイトであるDuelLinks.net(デュエルリンクスどっとねっと)を公開しました!遊戯王デュエルリンクスのゲーム内で...

初心者でも簡単に動画編集が可能なMovavi Video Editorを使ってみた!

初心者でも簡単に動画編集が可能なMovavi Video Editorを使ってみた!

今回紹介するのは初心者でも誰でも簡単に動画編集が可能なソフトのMovavi Video Edittorを紹介したいと思います。動画編集ソフトもプロ用な多機能なものなど色々なものがあ...

NetaGear RSS News

Now Loading

Article

様々なデバイスに対応したFaviconに一括変換してくれる「Real Favicon Generator」が便利!

Webデザイン > html+CSS+javascript 
Favicon_Generator_000.png

今回紹介するのはサイトのFaviconを様々なデバイスに対応した状態で一括変換してくれる「Real Favicon Generator for all platforms」です。スマートフォンのiOS/Android、PCのWindows/Macなどで対応したFaviconを一括生成してくれます。Faviconと言えば基本的にfavicon.icoを指しますが、ここ最近ではスマートフォン向けの「ホームに追加」した際のアイコンも用意しなければなりません。大きなFavicon画像さえ用意すればあとはこのサイトで変換するだけで簡単にマルチデバイスで対応して使えるようになります。

画像を変換してくれるだけでなく、表示用のタグも作成してくれます。なので、一括変換したFaviconファイルをサーバー上にアップロードして、それらの表示用タグをコピーしてhtmlテンプレートのhead内にコピー&ペーストしてあげるだけで使えるようになります。

Faviconとは?


favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンです。サイトを表示すると上のタブにアイコンが表示されるのがファビコンです。お気に入りやブックマークしたときにも用いられており、favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したもの。

サイトを作る上でFaviconは何げに重要です。サイトを表示すればそのファビコンはまず間違いなく表示されますし、複数のタブを開いているときはそのアイコンで認識する際にも役に立つので、ひと目でそのサイトであるとわかりやすいファビコンが求められます。

Faviconをマルチデバイスに対応で一括変換する方法!


Favicon_Generator_001.png
1 Real Favicon Generator for all platformsにアクセスして、「Select your Favicon picture」を押して、一括変換したいファビコンの画像ファイルを選択します。※最小画像サイズは70x70の画像(PNG、JPG、SVG)で、最適な結果を得るには画像は260x260以上にする必要があります。



Favicon_Generator_002.png
2 Favicon for iOSやFavicon for Android Chromeなど設定を変えることができます。基本的にはデフォルトのままで大丈夫です。

Favicon_Generator_003.png
3 一通り設定を確認したら「Generate your Favicons and HTML code」を押します。

Favicon_Generator_004.png
4 これでFaviconは完成したので「Favicon package」を押して、Faviconをダウンロードしてきます。自分のサイトのhtmlのhead内に表示されているコードをコピーして貼り付けて保存をします。

Favicon_Generator_005.png
5 ダウンロードしたzipファイルを解凍すると様々なデバイス向けのFaviconファイルが用意されています。これらを自分のサイトのサーバー上にアップロードします。これでマルチデバイスでのFaviconの設定は完了です。

Favicon_Generator_006.png
6 最後にFavicon Checkerを使って、Faviconが正しく設定されているか確認して問題なければOKです!

Favicon_Generator_007.png
これでスマホで「ホームに追加」を押したときに表示されるアイコンも設定完了です。実際に追加してみるとこんな感じになります。

今回の個人的感想




今回はファビコンを一括変換可能なサイトの「Real Favicon Generator for all platforms」の紹介でした。サイトを作っている人にとっては馴染みがあるファビコンですが、それ以外の人にはあまり意味のない記事かもしれませんね。しかし、ファビコン自体はサイトを表示する上で誰しも目にするものなので、無下にもできません。

サイトを表示する際にタブにファビコンが表示されますし、ブックマークした際にもファビコンが表示されます。最近だとスマートフォンで「ホームに追加」をした際にも使われます。設定しないとデフォルトのサイトの頭文字を使った適当なアイコンで表示されるようになります。スマートフォン用のファビコンは別途サイズの大きいpngファイルを用意しないといけないのですが、それも含めてこのサイトでは作ってくれるのでありがたいですね。

このサイトはスマートフォン用のアイコンは用意してなかったので、デフォルトの適当アイコン画像でしたが、これからはしっかりとしたアイコンが表示されるようになりました。ぜひサイトを作っている方は「Favicon Generator for all platforms」を活用してみてはいかがでしょうか?

Related article

COMMENT TO THIS ENTRY

Most Popular

Now loading...

Social Links

Sponsored Link

Popular Article

Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位15位が表示されます。今ならリンクするだけで簡単に上位に表示されます。