🤳🏽 🌠 🎹 Favicon Today：フォーマット、サポート、自動化 🕚 😋 ♦️

現在、ファビコンはブラウザタブの16x16のアイコンだけではありません。これはインターフェースの重要なコンポーネントであり、プログレッシブWebアプリケーションでも重要な役割を果たします。ファビコンを接続して使用するには多くの方法がありますが、これについてはこの記事で説明します。

ファビコンはどの形式にする必要がありますか？

以前は、ファビコンの主な形式はICO形式でした。その主な機能は、この形式のファイルにアイコンのサイズに関するいくつかのオプションを保存できることでした。現在、ICO形式は廃止されたとみなされ、アイコンと対話するための新しい機能を備えたPNG形式に置き換えられました。

PNGに加えて、SVG形式がサポートされています。しかし、残念なことに、彼は現時点で低い支持を持っています。ただし、この形式はファビコンに最適であり、その使用は私たちの生活を大幅に簡素化します。状況がすぐに変わることを期待しましょう。

ファビコンは、他のいくつかの形式、たとえばGIFまたはJPEG形式で作成できますが、サポートの問題により使用が不適切になります。

HTML5およびサイズ属性

サイズ属性は、HTML5で実現しました。そのおかげで、ブラウザまたはデバイスは目的のファビコンのサイズを選択できます。 サイズ属性は、単位を指定せずに[幅x高さ]の形式で指定します。複数のアイコンが一度にファイルに保存される場合、スペースで区切ってサイズを設定できます。 anyキーワードは、たとえばアイコンがSVGベクトル形式で保存されている場合など、任意のサイズに拡大縮小できることを示します。

<link rel="icon" sizes="<>X<>"> <link rel="icon" sizes="<1>X<1> <2>X<2>* | any">

ICOを埋め立て地に送る時間ですか？

既に述べたように、ICO形式はすでに廃止されていると見なされる可能性がありますが、これは早急に取り除く必要があるということですか？いつものように、答えはあいまいです。 ICO形式がまだ役立つ場合があります。異なるオペレーティングシステムでのICO形式でのファビコンの正当な使用例をいくつか示し、代替案について説明します。

窓

Windowsから始めましょう。

バージョン11より前は、PNG形式はIEでサポートされていなかったため、IE10以前のバージョンでは、ICO形式を使用する必要があります。しかし、IE11では、PNGに安全に切り替えることができます。レガシーブラウザーの場合、マイクロソフトは、ICO形式のファビコンにサイズ16x16、32x32、および48x48を推奨します。

IE9以降、サイトはメニューとタスクバーにドッキングできました。IE11とWindows 8.1の登場により、ライブタイルの形式でドッキングサイトを作成できるようになりました。デフォルトでは、タイル上の画像はファビコンになりますが、大きくて幅の広いタイル用ではないため、特別なサイズの画像を指定する必要があります。これは、次の方法で行うことができます。Webページまたはブラウザー構成ファイルのマークアップにメタデータタグを追加します。

まず、最初の方法を見てみましょう。

<head>のメタデータを使用して、Windowsデバイスでファビコンを定義します。

 <meta name="msapplication-TileImage" content="images\tileimage.jpg">

大きなタイルのアイコンを指定する場合、次のメタデータを使用してこれを実行できます。

 <meta name="msapplication-square70x70logo" content="images/smalltile.png"> <meta name="msapplication-square150x150logo" content="images/mediumtile.png"> <meta name="msapplication-wide310x150logo" content="images/widetile.png"> <meta name="msapplication-square310x310logo" content="images/largetile.png">

タイルの背景色を指定できます。

 <meta name="msapplication-TileColor" content="#009900">

固定サイトの名前を指定できます。

 <meta name="application-name" content="Rick and Morty">

このメタデータが存在しない場合、 <title>の値が名前として使用されます。ページ。

Windowsの[スタート]メニューまたはデスクトップで、ピン留めされたサイトのラベルの上にマウスを置いたときに表示される追加のヒントのテキストを指定できます。

 <meta name="msapplication-tooltip" content="Title">

文書のアドレスを決定することもできます。

 <meta name="msapplication-starturl" content="./">

そして、ユーザーがどのページをタスクバーにドラッグしても、ピン留めされたサイトは指定されたアドレスを開きます。

他の多くのメタデータがあります。たとえば、ブラウザのナビゲーションボタンの色を定義したり、タイルを動的にしたりします。

IE11、Windows 8.1、およびEdge Windows 10以降では、ブラウザー構成ファイルを使用してWebサイトを固定できます。これは便利です。browserconfig.xmlファイルを1つ作成して維持し、同じタイルを使用するページが複数ある場合は各ページに含めます。

<head>のファイルを呼び出す：

 <meta name="msapplication-config" content="browserconfig.xml">

browserconfig.xml

 <?xml version=”1.0" encoding=”utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="/img/favicons/mstile-70x70.png"/> <square150x150logo src="/img/favicons/mstile-150x150.png"/> <square310x310logo src="/img/favicons/mstile-310x310.png"/> <wide310x150logo src="/img/favicons/mstile-310x150.png"/> <TileColor>#000000</TileColor> </tile> <notification> <polling-uri src="notifications/contoso1.xml"/> <polling-uri2 src="notifications/contoso2.xml"/> <polling-uri3 src="notifications/contoso3.xml"/> <frequency>30</frequency> <cycle>1</cycle> </notification> </msapplication> </browserconfig>

square70x70logo、square150x150logo、wide310x150logo、square310x310logo-さまざまなタイルサイズの画像が宣言される要素。

マイクロソフトでは、高ピクセル密度の画面をサポートするために、より大きな画像サイズを使用することをお勧めします。ソースイメージのサイズは、拡大および縮小できるように、ターゲットタイルのサイズの約1.8倍であることが望ましい。たとえば、70x70の場合、推奨サイズは128x128で、310x150のワイドタイルの場合、元の画像は558x270です。

サイトタイルが静的な場合、上記の要素で十分です。動的タイルが想定されている場合は、 <notification>要素を追加する必要があります。この要素には、src属性の対応するxml通知ファイルへのパスを含む最大5つの<polling-uri>要素を含めることができます。また、このタグ内には<frequency>要素が含まれ、その値は、通知を更新するためのサイトへの呼び出しの間隔を分単位で示します。つまり、ライブタイルは、たとえば30分ごとに更新されます。はい、値は任意ではなく、30、60、360、720、または1440のみです。

最後に、 <notification> タグ内に<cycle>要素もあります。これは、通知が繰り返される方法を担当します（0から7までの値を取ることができます）。テンプレートは、中、広、大のタイルでのみ使用できます。

新しいMetroインターフェイスは、ほとんどのプリインストールプログラムで使用される「白いシルエット」など、いくつかの新しい設計原則を提供します。

Windows通知プラットフォームを使用すると、サイトは最大5つのテキストメッセージ、または一度にタイル上で相互に周期的に置換される画像付きのメッセージを表示できます。これらのxml通知ファイルについては説明しません。ライブタイルには多くのパターンがありますが、そのうちの1つを次に示します。

 <tile> <visual lang="en-US" version="2"> <binding template="TileWide310x150ImageAndText01" <image id="1" src="images/image1.png" alt="alt text"/> <text id="1">Text Field 1</text> </binding> </visual> </tile>

テンプレート属性に引用符で囲まれているのは、 テンプレートの名前です。このテンプレートには、画像と小さなテキストが含まれています。大きな画像と中程度のタイトルに使用されます。実際、同様のパターンが多数あります。単にテキストを使用し、画像を使用し、複数の画像を使用し、複数行のテキストを使用するなどです。ほとんどの画像またはテキストテンプレートは、画像と同じタイルにテキストを配置します。しかし、タイトルにPeekが含まれるテンプレートでは、タイル上の画像とテキストが切り替わります。

テンプレートの詳細については、公式Webサイトを参照してください。

Mac OS

Mac OSでは、残念ながらあまり楽しくありません。 Mac OSでデスクトップにサイトを保存すると、HTMLコードを含むページのスクリーンショットとしてアイコンが表示されます。 Mac OSでウェブサイトをアプリケーションにできないということだけですが、できません。

Safariは、SVG形式が便利な場所です。 SVGを使用するには、値mask-iconでrel属性を指定する必要があります。すべてのSVG要素は黒でなければなりません。ただし、恐れないでください。色はcolor属性で変更できます。このSVGアイコンは、Safariでタブをドッキングするために必要です。ホバーの色は、 color属性で指定したとおりになります。

 <link rel="mask-icon" href="safari-pinned-tab.svg" color="#000ff">

このアイコンを指定しない場合、ブラウザにはサイトのドメインの最初の文字が表示されます。

ICOフォーマットが私たちにとってまだ役に立つかもしれない別のケースを思い出しました。 Yandex検索エンジンは、サイトヘッダーの横の検索結果にファビコンを挿入します。もちろん、スニペットの魅力を高め、結果としてクリック可能性を高めます。 Yandexでは、これらの目的にはICO形式を使用することをお勧めします。

iOS

iOSのSafariはタブにファビコンを表示しませんが、Mac OSの場合と同じようにブックマークに使用します。 iOSでは、ユーザーはサイトをデスクトップに追加でき、ネイティブアプリケーションのように見えます。これらのリンクはアイコンとして表示され、Webクリップと呼ばれます。

これを行うには、 rel = "apple-touch-icon"を追加し、 sizes属性を使用してサイズを指定します。各デバイスには、独自のアイコンサイズが必要です。 iOSデバイスは非常に多く、各デバイスには独自の画面解像度があるため、Appleが開発した仕様では、サイズの異なるアイコンで複数のタグを指定する機能をサポートしています。

 <link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">

アイコンがデバイスの推奨サイズに対応していない場合、サイズが最も近いアイコンが推奨サイズよりも大きくなります。ユーザーがiOSデバイスからサイトにアクセスすると、apple-touch-icon-precomposed.pngファイルが要求されます。これはiOSのスタイルである必要があります：丸い角、ハイライト、シャドウ。プロジェクトルートまたはrel =“ apple-touch-icon-precomposed”にその名前のファイルがない場合、apple-touch-icon.pngが要求されます。これはそのままで許可され、すべての効果はiOS自体によって適用されます。したがって、サイズごとにアイコンが必要です。しかし、これらのファイルさえない場合、iPhoneまたはiPadのデスクトップには美しいアイコンではなく、ページのサムネイル（スクリーンショット）が表示されます。

ブラックベリーはrel = "apple-touch-icon-precomposed"も使用すると噂されていますが、残念ながらチェックする方法がありませんでした。

iOSデバイスの現在のサイズについては、公式Webサイトをご覧ください。

一部の人は、9つの画像すべてがあまり必要ではないと主張するかもしれません。ただし、少なくともメインのApple Touchアイコンは180x180でなければなりません。他のデバイスは画像を縮小する場合があります。しかし、他のプラットフォームでもApple Touch Iconを使用しているため、宣言するのが最善です。

奇妙に聞こえるかもしれませんが、Apple Touchアイコンを探しているのはiOSデバイスだけではありません。他の高解像度PNGアイコンよりも人気があり、一般的であるため、Android Chromeなどの一部のブラウザーはそれらを使用します。したがって、それらを宣言することをお勧めします。これにより、互換性のあるデバイスまたはブラウザーを持つ訪問者がこれらのアイコンのいずれかを使用できるようになります。

iOSでは、Webアプリケーションのタイトルを指定できます。デフォルト値は<title>タグです。別のタイトルを設定するには、メタタグをWebページに追加します。

 <meta name = "apple-mobile-web-app-title" content = "AppTitle">

ところで、Webアプリケーションのステータスバーのスタイルを設定することもできます。

 <meta name="apple-mobile-web-app-status-bar-style" content="black">

色を変更したり、半透明にしたりできます。これは、サイトの外観にも影響します。

Android

AndroidデバイスはPNG形式を完全に理解し、マニフェストアプリケーションmanifest.jsonもサポートしています。このファイルでは、ホーム画面にインストールした場合のサイトの動作に関するすべてのパラメーターを指定できます。残念ながら、このマニフェストはまだiOS上のデバイスを読み取りません。 Androidがこのファイルを見つけられない場合、apple-icon-touchを使用します。

マニフェストファイルには多くのスペースパラメータが含まれている場合がありますが、ホーム画面にサイトを表示するために必要なものは次のとおりです。

 { "name": "Rick and Morty", "short_name": "Rick", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#b3adad", "background_color": "#b3adad", "display": "standalone" }

名前キーは、ホームデスクトップ上のアプリケーションの署名を定義します。このパラメーターが指定されていない場合、署名は<title>から<head>に取得されます。

short_nameキーは、フルネームに十分なスペースがない場合、アプリケーションの短縮署名を決定します。

キーアイコン -アイコンオブジェクトの配列を定義します。3つの値を取ることができます： サイズ 、 ソース 、 タイプ 。

theme_colorキーは、ステータスバーの色を決定します。 Android Lollipop用のchromeバージョン39以降、ブラウザインターフェースの色とブラウザタブの色を変更できるようになりました。

次のメタタグを追加して、 <head>で色を設定することもできます。

 <meta name="theme-color" content="#9CC2CE">

background_colorキーは、ホームデスクトップ上のWebアプリケーションの背景色を決定します。同じパラメーターは、アプリケーションを開いたときにアプリケーションの背景がどの色になるか、つまりマニフェストは読み込まれましたが、スタイルはまだ読み込まれていません。

表示キーは、Webアプリケーションの表示モードを決定します。たとえば、指定したスタンドアロンの値により、アプリケーションとしてサイトを開くことができました。

<head>の呼び出し：

 <link rel="manifest" href="manifest.json">

マニフェストには、Webサイトから実際のアプリケーションを作成する他の多くの素晴らしいパラメーターがありますが、それらはトピックに関連しなくなりました。

自動化

結論として、この記事のフレームワークで検討したことはすべて、手で書く必要はなく、自動化を忘れないでください。 favicon： realfavicongenerator.netに必要なすべてのサイズとフォーマットを迅速に生成できるサイトがあり、必要に応じて同時にコードを生成できます。

GulpとGruntの両方のビルドパッケージがあります。

覚えておくべき主なことは、今日のファビコンはアドレスバーとブラウザタブのアイコン以上のものだということです。

Favicon Today：フォーマット、サポート、自動化

ファビコンはどの形式にする必要がありますか？

HTML5およびサイズ属性

ICOを埋め立て地に送る時間ですか？

窓

Mac OS

iOS

Android

自動化

More articles: