ファビコンを作成する方法:Logasterからのヒント、トリック、およびサービス
内容:
- Adobe Photoshopでファビコンを作成する方法
- GIMPでファビコンを作る方法 – GNU画像操作プログラムを
- ICOがPNGやGIFより優れているのはなぜですか?
- オンラインコンバーターを使用してPNGをICOに変換する方法
- WordPressでWebサイトにファビコンを追加する方法。
- まとめます
ファビコンは、ユーザーがお気に入り内または開いているブラウザタブ内でWebサイトを識別するのに役立つ小さなアイコンまたはバッジです。ファビコンは、ブラウザのWebサイトのアドレスまたは名前の近くに表示されます。ほとんどの場合、ファビコンはサイズが16px x 16pxの正方形の画像です。通常、ICO形式で保存されます。
この記事では、さまざまなグラフィックエディターを使用してWebサイトのファビコンを作成する方法を示します。また、ファビコンをWebサイトに簡単に追加する方法についても説明します。
これが必要です。
1) 512px x 512px以上の正方形のロゴ。ロゴはPNGで保存する必要があります。
2) グラフィックエディター(Adobe PhotoshopまたはGIMP)。
Adobe Photoshopでファビコンを作成する方法
透明な背景にファビコンを作成する方法は次のとおりです。
1) [ファイル] => [開く]を選択して、透明な背景でPNGロゴを開きます。コンピューターで適切な画像を選択してください。

2。消しゴムツールを使用して、ロゴから会社名を削除します。メインカラーを白に変更します。
3。ロゴのサイズを16px x 16pxに変更するには、[画像] => [画像サイズ]を選択します。

4。適切なサイズ(16px x 16px)を設定します。ファビコンは非常に小さく見えますが、心配しないでください!すべては計画通りに進んでいます。
5。[ファイル] => [名前を付けて保存]を選択して、画像を保存します。ファイルをPNG形式で保存します。
ファビコンに満足している場合は、このマニュアルのセクション4に直接進んでください。
会社の色でファビコンを作成する方法は次のとおりです。
1) PNGファイルを開きます。この場合、透明な背景の代わりに、ロゴに背景の会社の色が表示されます。

2。アイコンのみを残して、テキストを削除します。ピッカーツールを使用して、背景の色を選択します。次に、ブラシツールを使用して、ロゴから会社名を削除します。
3。クリックして画像の寸法を変更します。画像=>サイズを変更します。サイズを16px x 16pxに設定します。画像が比例して魅力的に見える場合は、PNG形式で保存し、このマニュアルのセクション4に進んでください。
GIMPでファビコンを作成する方法-GNU Image Manipulation Program
GIMPは、さまざまな種類のベクター画像を編集するためのグラフィックエディタープログラムです。このソフトウェアの主な利点は、イメージコンバーターを使用せずにICO形式でファビコンを作成できることです(Adobe Photoshopの場合のように)。
1) [ファイル] => [開く]をクリックして、エディターでロゴを開きます。

2) アイコンのみを残して、キャプションを削除します。次に、カラーパレットをクリックして、背景として使用するコーポレートカラーのコードを選択します。コードがわからない場合は、ピッカーツールを使用して、カーソルを背景の上に置いて左クリックします。色は自動的に選択されます。次に、ブラシツールを使用して、ファビコンから文字を削除します。
3) ロゴをクリックして、ファビコンの標準サイズ(16px x 16 px)に縮小します。画像=>画像サイズを変更します。
4。クリックしてロゴをエクスポートします:ファイル=>名前を付けてエクスポート…

5。エクスポート形式を選択します(ファイルの種類:Microsoft Windowsアイコン、拡張子:ICO)。[エクスポート]ボタンをクリックします。

できた!これで、ウェブサイトでファビコンを使用できます!
ICOがPNGやGIFより優れているのはなぜですか?
1。 互換性。ICO形式は、IE 5.0を含むすべてのブラウザーでサポートされています。
2。 エラー404はありません。最新のブラウザ(Chrome 4、Firefox 3.5、IE8、Opera 10、Safari 4)では、ファビコンをICO形式で保存する必要があります。
3。 ICOファイルには複数のアイコンを含めることができるため、異なるアイコン(16px x 16px、48px x 48px)に複数のファイルを作成する必要はありません。
オンラインコンバーターを使用してPNGをICOに変換する方法
PNGをICOに変換するには、さまざまなオンライン変換サービスを使用できます。online-convert.com に焦点を合わせることにし ましたが、 機能はほぼ同じであるため、他のツールを自由に使用できます。さぁ、始めよう:
1) ブラウザで オンライン コンバータ を 開き ます。左側のバーで、「イメージコンバーター=> ICOに変換」を選択します。

2。[ファイルを選択…]をクリックするか、単にファイルを対応するフィールドにドラッグして、コンピューターからファイルをアップロードします。[変換を開始]をクリックして続行します。

3。[ダウンロード]ボタンをクリックして、ICOのファビコンをコンピューターにダウンロードします。ファイルをクラウドストレージに送信するか、ZIP形式でダウンロードすることもできます。

WordPressでWebサイトにファビコンを追加する方法
最初に、ファビコン(favicon.ico)をWebサイトのルートフォルダーにアップロードする必要があります。
ルートフォルダーは、「index.php」や「wp-admin」、「wp-content」、「wp-includes」などの他のフォルダーを含む、すべての主要なWPファイルを含むWebサイトのメインディレクトリです。「favicon.ico」ファイルを「index.php」ファイルと同じフォルダーに保存する必要があります。
1) WordPress管理パネルを開きます。

2。「外観」セクションに移動します。

3。「テーマエディター」を開きます。

4。「Header」(または「Header.php」)という名前のファイルを選択します。編集する必要があります。

5。コードで、「<link rel = “ショートカットアイコン”」で始まり、「/ favicon.ico “/>」で終わる行を見つけます。<head> HTMLタグの下に、新しいコード文字列を挿入します。
コードは次のとおりです。<link rel = “shortcut icon” href = “<?php echo get_stylesheet_directory_uri(); ?> /favicon.ico “/>
ファビコンファイルの名前は「favicon.ico」です。ただし、他の名前を自由に選択できます。
6。変更を保存します。
まとめます
Webサイトを開発するとき、ファビコンを含む最も細かい詳細に注意を払う必要があります。このブランドの画像は、外観が欺くことができるという事実の完璧な例です。小さいながらも、ファビコンは企業のブランディングにおいて重要な役割を果たします。ウェブサイトのデザインに対する包括的なアプローチとユーザーへの注意を強調しています。さらに、Webサイトにファビコンを追加するのはとても簡単です。質問がある場合、またはファビコンを作成した経験を共有したい場合は、以下のコメントで歓迎します!
カテゴリー: デザイン