ファビコンアイコンの作り方

ファビコンとは、ブラウザのアドレスバーの横にある小さな画像のことです。ブックマークタブの中であなたのサイトを際立たせ、ブランド認知度を高めるために使用することができます。もしあなたがサイトを持っていて、ファビコンを作ることを考えたことがないのなら、その決断を考え直すべきです。ソフトウェア開発者は、タブレットのホームスクリーンアイコンなど、アプリケーションのさまざまな側面にファビコンを利用することが増えています。幸運なことに、ファビコンのデザイン、作成、実装は、正しい手順に従えばほとんど誰でもできることです。

方法1

ファビコンをデザインする

1. あなたのウェブサイトを代表するファビコンを作成します。ウェブサイトの種類によってファビコンの外観を決めるべきです。あなたのブランドイメージに忠実で、人々に認識され、記憶に残るようなものをデザインしてみてください。あなたのファビコンは、人々がブラウザのタブを見たときに最初に目にし、人々のブックマークにも表示されます。

   • 例えば、食べ物のウェブサイトであれば、果物や野菜をデザインしたファビコンを選ぶことで、より印象に残るかもしれません。
   • 法律事務所や投資会社のウェブサイトであれば、伝統的で洗練されたファビコンが最適です。
   • 若い人向けのウェブサイトなら、遊び心のあるカラフルなファビコンを作ってみましょう。
2. 背景を透明にするかどうかを決めましょう。背景を指定しない場合、白で塗りつぶされ、ブランドと一致しない可能性があります。 背景を透明にすると、その人のブラウザの色になり、より合理的に見える場合があります。また、背景色があることで、前景の文字やグラフィックが引き立つ場合もあります。あなたのデザインに最適なものを決定し、それを念頭に置いて作成してください。

   • 最も基本的なファビコンは16x16の正方形で、背景色があります。
3. 読みやすいファビコンを作りましょう。使用するファビコン画像は小さいため、訪問者を混乱させることなくブランドを伝えることができることが重要です。読みにくいファビコンはネガティブな印象を与え、訪問者の心にあなたの提供できる仕事の質について疑問を抱かせる可能性があります。 複雑すぎる画像やロゴは、16x16や32x32ピクセルに縮小しても見栄えがよくありません。

   • 既存のロゴが複雑すぎるのであれば、ファビコンサイズでも認識できるように、シンプルにする戦術が使えます。会社名全体を表示する代わりにイニシャルを使ったり、写真を使う代わりにシンプルなアイコンをデザインしたりしましょう。
   • すでにシンプルなロゴがある場合は、画像を縮小してファビコンに設定することができます。アイコンファイルに変換する前に加工する必要があるかもしれません。
   • サイト全体のテーマを表すオブジェクトの写真を使うこともできます。
4. 美しいファビコンを作成しましょう。ファビコンの構造は「形」と呼ばれます。ファビコンは通常、円や正方形のような形をとります。ファビコンをデザインするときは、一般的に、これらの基本的な形のいずれかに収まるようにするのがよいでしょう。なぜなら、自由な形の形は、16x16ピクセルでは混濁したり混乱したりすることがよくあるからです。デザインのもう一つの重要な側面は、美的統一性と呼ばれます。美的統一性には、ファビコンのさまざまなコンポーネントの詳細とサイズ、およびファビコンのバランスの取り方が含まれます。細部が均一であればあるほど、ファビコンはまとまって見えます。たとえば、ファビコン内で異なるフォントタイプやサイズを使用すると、目に美しくなく、ファビコンが混乱したり、乱雑に見えたりします。

   • 美的統一のもう一つの例は、ファビコンの図形全体の角を丸く維持することです。
   • 形を変えたアイコンの良い例は、Googleのファビコンです。四角から丸に変わりました。
5. あなたのブランドに合った色を使いましょう。ファビコンを作成するときは、8ビット（256色）または24ビット（1670万色）の色深度で作成すると、モダンブラウザで動作します。 選択した色が、ウェブサイトの他の場所でも見られるか、ブランドと何らかの関連があることを確認してください。ウェブサイトやロゴ、アプリケーションにない色を使ったファビコンは印象に残らず、人々はそのアイコンをあなたのブランドと関連付けることができません。

   • ファビコンの色のクリエイティブな使い方には、システムの状態によって色が変わるGitHubや、背景色によって色が変わるTrelloなどがあります。
   • ファビコンで最もよく使われる色は、赤と青です。
6. ファビコンをデザインするときは、読者を考慮しましょう。あなたのブランドを識別する以外に、あなたのファビコンは訪問者にとって魅力的に見える必要があります。異なる嗜好、興味、社会規範を持つ人々は、異なる視点から異なるアイコンを見るでしょう。私たちの社会には文化の違いが存在し、あなたが引き付けようとしているオーディエンスを混乱させたり、反発させたりする可能性があります。

   • 例えば、Mac OS Xでは、メールの世界共通のシンボルである切手を使用しています。郵便受けは世界各地で異なるため、郵便受けを使っても効果は薄いでしょう。
7. 友人や同僚の意見を聞くファビコンは驚くほどグラフィカルではありませんが、あなたのブランドの重要な一部です。例えば、Twitter、Gmail、Facebook、wikiHowのようなお気に入りのウェブサイトを思い浮かべてみてください。デザインを見る目がなかったり、どのようなデザインにすべきか困っている場合は、デザインに詳しい友人やグラフィックデザインの仕事をしている友人に相談してみよう。

   • 無料でデザインのアドバイスをしてくれる人がいないか、友人のネットワークに尋ねてみましょう。
   • 大企業であれば、社内にファビコン画像を作成できるグラフィックデザイナーがいる。

方法2

ファビコンを作成する

1. 写真編集ソフトを使ってファビコンを作成する。Adobe PhotoshopやIllustratorなどの写真編集ソフトを使ってファビコンの画像を作成することができます。これらのソフトウェアでは、画像のサイズを変更したり、適切な形式でエクスポートしたりすることもできます。手書きでファビコンを作成できるソフトウェアもあります。

   • また、オンラインで見つけることができるファビコン専用の編集プログラムもあります。
   • 検索エンジンを使って、"favicon editors "と入力してください。
   • キャンバスのサイズを512x512ピクセルにしてください。この数字は、ほとんどの適用可能なファビコンサイズに分解され、なおかつ効果的に編集するのに十分な大きさだからです。
   • その他の一般的な写真編集ソフトウェアには、GIMP、PhotoScape、Paint.NETがあります。
   • このソフトウェアを使用する場合、.icoファイルを直接編集することはできませんが、.png、.jpg、または.gifファイルを使用して、後で変換することができます。
2. ファビコンのサイズを変更して保存します。32x32 pxはWindowsのデスクトップアイテムのサイズであり、16x16 pxはブラウザのタブにあるファビコンのサイズです。 ファビコンを大きなフォーマットで作成したら、そのサイズを小さくして、人々のブラウザでどのように見えるかを確認することが重要です。ファビコンが読めなかったり、審美的に美しくない場合は、元のデザインからやり直してください。あなたのウェブサイトやアプリケーションが使用される可能性の高いプラットフォームについて考え、すべてのベースをカバーするためにファビコンを作成します。

   • ハードウェアやソフトウェアによってファビコンのサイズが異なることに注意することが重要です。
   • その他のファビコンサイズには、標準iOSホーム画面用の57x57px、iPad用の72x72px、Google TV用の96x96px、Chromeウェブストア用の128x128px、Operaスピードダイヤル用の195x195pxなどがあります。
   • すべてのサイズをカバーしたい場合は、それぞれのサイズのファビコンを作成することができます。
   • ファビコンを別々のバージョンで保存しておくと、せっかくの作業が無駄になりません。
3. コンバーターを使用してファイルを結合します。.icoファイルの優れた点は、複数のファイルを組み合わせて作成できることです。ブラウザやソフトウェアによって異なるサイズのファビコンが必要になるため、これは便利です。あなたのファビコンがすべての異なるプラットフォームできれいに見えるようにするには、オンラインコンバータを使ってファイルを変換します。お好きな検索エンジンに「icon converter」と入力すると、これを行う無料のオンラインアプリケーションが見つかります。マージしたファイルを "favicon.ico "として保存する。

   • GIMPのような内蔵機能を持つプログラムを使うこともできるし、Adobe PhotoshopにICO FORMATというプラグインをダウンロードすることもできる。
   • 新しいファビコンや進行中の作品を保存できるように、新しいフォルダを作成する。
   • 検索エンジンで".ico converter "や "favicon generator "と入力して、使用できるさまざまなツールを見つける。

方法3

ファビコンを実装する

1. ウェブサイトエディタを使用している場合は、ファビコンをアップロードする。多くのウェブサイトエディタには、ファビコンをウェブサイトに自動的にアップロードできるフォームが組み込まれています。この機能が内蔵されているウェブサイトエディタを使用している場合は、ウェブサイトの設定メニューで「ファビコンをアップロードする」または「ファビコンを追加する」というオプションを探します。favicon.icoファイルを選択し、サイトにアップロードします。

   • ウェブサイトエディタにファビコンをアップロードする場所が見つからない場合は、手動でアップロードする必要があります。
2. ファイルをサイトのルートディレクトリにアップロードします。あなたのウェブサイトがファイル転送プロトコルまたはFTPをサポートしている場合は、FTPクライアントを使用して新しいfavicon.iconファイルをルート（インデックス）ディレクトリにアップロードすることができます。 そうでない場合は、ウェブホストページに移動して画像を手動でアップロードする必要があります。既存のfavicon.icoファイルを新しいファイルで置き換えることを忘れないでください。
3. ファイルをヘッダーに追加します。あなたのサイトのPHPファイルとCSSファイルにアクセスできる場所を探してください。サイトのheader.phpファイルにアクセスし、編集します。<header>タグの下に"<link rel="shortcut icon" href="<?PHP echo get_stylesheet_directory_uri(); ?>/favicon.ico" />"と入力します。これであなたのサイトとファビコンがつながるはずです。

   • PHPを使用しているため、あなたのヘッダーファイルを使用するすべてのサイトが同じファビコンを持つことになります。
4. ブラウザを更新してください。ファビコンのアップロードが完了したら、ブラウザを更新してアドレスバーの横に新しい画像を表示させることができます。更新したファビコンの画像に直接移動するには、". "と入力します。

   • ファビコンが最初に表示されない場合は、ブラウザのキャッシュをリセットする必要があるかもしれません。
   • キャッシュをクリアするには、ブラウザの設定からインターネット一時ファイル、クッキー、履歴を削除してください。

この記事は、CC BY-NC-SAの下で公開された「 How to Create Your Own Favicon Icon 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。