Webサイトファビコン/Faviconとは?サイズと作成ツール解説202305/25/2023ファビコンってなんじゃい?パソコンやスマホの画面にあるらしいがどこに?なかったらどうなる?ファビコンはわしでも作成できるんじゃろか?悩める爺そんなお悩みにお答えします。Illustrator・Photoshop歴10年以上。Illustratorを使ったイラスト制作はこちら>なのですが機械音痴でもあります。続きを当ガイド犬・よっしーに引き継いでもらいます。よっしーファビコンはファ○コンの一種だと思っていた作者。そんな作者に代わってワテがFavicon(ファビコン)について詳しく解説するさかい、読んでってな〜項目をタップして飛ばし読み☟Favicon/ファビコンとは?※現在サイト名をToolsに変更ファビコンとは、ブラウザのタブのホームページタイトルの横に表示される小さなアイコン(画像)のこと。FaviconFavicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したかばん語である。引用元:https://ja.wikipedia.org/wiki/Faviconicon(アイコン)は、簡単な絵柄で記号化したもの。あれば、動画の記号って思うよな?動画の記号が赤いと..YouTubeやなぁ。これはYouTubeのファビコンでもある。お気に入りにYouTube動画を登録すれば、この赤いアイコンが一緒にブックマーク欄に登録される。ファビコンは、「お気に入り」の目印アイコンってとこやな♪ファビコンは、各々のホームページを象徴する小さい顔。小さい顔に合わせた、シンプルなデザインがファビコンには向いている。ファビコンはどんなサイトでも設置できるわけやないで。無料ブログはダメで、独自ドメインサイト(有料)のみ。ウェブサイト運営者だけが自分のサイトに設置できるファビコン。...続きを見るFavicon/ファビコンの役割は?ファビコンは、ウェブサイトの認識性を高める役割がある。閲覧者が複数のタブを開いている場合でも、ファビコンを見れば特定のウェブサイトを素早く認識することができる。ブックマークバーに表示されることで、閲覧者は簡単にお気に入りのウェブサイトにアクセスすることができて便利!Favicon/ファビコンの効果は?ファビコンは、Webサイトのブランド認知度を向上させる効果がある。他サイトとの差別化もできる。独自のアイコンやロゴがあることで、閲覧者はウェブサイトをイメージしやすくなる。ファビコンはユーザー体験を向上させてくれる要素も。視覚的な識別として機能するので、閲覧者はタブを切り替える時により迅速に目的のWebサイトを見つけることができるようになるんや。favicon/ファビコンのデメリットは?デメリットは..著作権違反したら訴えられる恐れが!..ファビコンはWebサイトの顔でもある。企業はお金をかけたりして力を入れてるところも。せやさかい、ファビコンのデザインを何処かのをまるっとパクったりしたら..?訴えられるかもな..。なくても、見た人の信用を損ねることになる。良いサイトであっても低評価なイメージを持たれることになる。ならんように、ファビコンのデザインはオリジナルのデザインにしよう!Favicon/ファビコンがないと..?※現在サイト名をToolsに変更していますファビコンがないとWebサイトが非表示になる..とかはないから安心してな。テーマのマークになる。アメーバブログなどの無料ブログの場合、ファビコンはアメーバのマークになって好きなファビコンは設置できない。独自ドメインサイトを持っている人は、オリジナルのファビコンをつけることができる!Favicon/ファビコンのデザインは?効果的なファビコンはシンプルであることが最重要や。見ての通り小さいサイズで表示されるから、複雑なデザインやとよう見えへん。シンプルなアイコンは視覚的に識別しやすい。シンプルなデザインは、異なるプラットフォームやデバイスでの表示の差異が起きにくい。ファビコンはシンプルイズベストで決まり!Favicon/ファビコンのファイル形式は?ファビコンは画像で、決まった像ファイルでないとコンピューターに読み込まれへん。画像ファイルには、データ名の最後に付く拡張子というものでどんな形式のファイルなのかがわかる。撮影画像のデータ名「IMG_20230525.jpg」。.jpgが画像ファイルの形式=拡張子と言われる部分。Favicon(ファビコン)の一般的な画像ファイル形式は、「.jpg」「.gif」「.png」「.ico」。「〇〇〇.png」のように、データ名の末尾(拡張子)に当たる部分のこと。各ツールで作成したのち拡張子を選んで保存する。フォーマット「.png」。PNGフォーマットは透明なアイコンを作成することができて、単純なグラフィックデザインの保存に適しとる。ファビコン用ファイル形式「.ico」を推奨してる人もおるんやけど、スマホでの表示には「.png」へコードを変えなあかんらしい。作者は機械オンチなため、そないな高度なことはできひん。おまけに、本サイトでも使っているAFFINGER6のテーマに「.ico」は非対応なんや。「.jpg」「.png」はどちらがいい?「.png」がいいやろなぁ。透明で保存できるのはこの中では「.png」だけなんや。「.jpg」は、透明の部分は白になる。透明にしておいた方がええよ?理由は、どんなブラウザでも想像通りの表示になるから。ブラウザのタブが白やったら、透明部分が白でも違和感はない。タブの色を別の色にカスタマイズしているブラウザで見てみると..?透明部分の白がはっきりとわかる形になるんや。透明にしとけばカスタマイズされた色に染まるから違和感はないと思われる。好みの問題かもしれんけど..。気になる人は、「.png」をおすすめする!ファビコンのサイズ※現在サイト名をToolsに変更ファビコンのサイズは、ピクセル単位で指定されとる。一般的に、正方形のアイコンが最も一般的で、以下のサイズが推奨されておる。ピクセルは主に古いバージョンのブラウザやブックマークバーで使用されておった。このサイズでは、シンプルなデザインやロゴが効果的に表示される。どんなデザインのフォビコンもデータは画像。本サイトToolのファビコン。長方形部分は、黒い線に見えるやろ?でもほんまは、ピクセルと言ってドットの数の集まりやねん。本来、黒い線フチを拡大するとドットになっとってカクカクとなっとるんや。ゲームボーイの画面みたいな感じや。pixはpixel(ピクセル)という。1ピクセル=1ドット。せやからpixel数が大きいほど、ドットの数が多くて細部まで表現ができて、画質が鮮明になるんや。本サイトでも使用しているブログサイト作成ソフト、WordPress(ワードプレス)。512px以上が推奨されとる。512pxのサイズから、異なるデバイスや画面サイズに応じて自動的に表示してくれるんや。画像からファビコン用の画像サイズに変換してくれる無料ツールサイト。無料なのがいいところ。画像は好きな画像でOK!それを上の画像の様に、いろんなサイズに変換してくれるで。画像ファイルを選択をクリック。パソコンに保存されている、画像を選択。ファビコン一括生成をクリック。図形はイラストレーターで作成ファビコンダウンロードをクリック。指定可能な画像タイプはPNG,JPG,GIFです。512x512~700x700ピクセル画像が推薦サイズです。generator画像の保存形式は、上記をのみ。スマホで撮影した画像を使うなら、画像は容量が規定より超える場合が多い。他にも上記を超える高解像の画像はアップロードできひん..。メールに添付して画像のサイズを落とす画像をスマホのメールに添付すると、画像サイズを落とすことが可能に!メール添付の際に、画像サイズの変更の有無が選べる機能を利用するんや。やり方は、選んだ画像をメールに添付して、宛先は自分宛にする。iPhoneの場合、送信ボタンをタップすると..iPhone画面サイズを小さくできますよ?と縮小サイズ3種類を薦めてくる。お言葉に甘えて、縮小サイズを選択。大サイズでダメなら>中サイズ>小サイズに変換して自分宛に送れば、画像サイズは小さくなる。【Illustrator】イラストレーターで作成した当ファビコン先ほど説明した通り、ファビコンは最終的に画像データにせなあかん。ファビコン作成に使われるツールとして、ペイントソフトとドローソフトがある。ペイントソフトは、フォトショップやクリスタ、iPhone・iPadの手書きメモなど。それらは、ラスターデータと言って四角のドットで構成されとる。ラスターデータは解像度(ピクセル数)を意識せなあかん。ファビコンのサイズでも説明した通り、色んな媒体に対応するにはピクセル数は大きい方が良い。いって、解像度が大きすぎるとデータが重くなったり不具合が生じることがある。対になるのが、ドローソフト。ドローソフトはベクターデータと言って、数学的な概念で構成されとるんや。データが数式になってるんやないで?(作者も思ってた)ベクターデータは数学的概念で構成された、ベジェ曲線という計算手法で色んな図形を描けるんや。ベジェ曲線は、数学のデータやから拡大しても、カクカクしてへん!線は線のまま。Illustrator(イラストレーター)」。印刷物・デバイス、どちらにも対応できて劣化することなくサイズを無限大に変更可能!当ファビコンもイラストレーターで作成してるで。Illustrator編。Illustrator)を使ったファビコン作りのお悩みにお答えします。引用元:coconalaファビコンの作成、どうしてもムリ..そんな場合は、プロの手を借りる方法もある。個人のデザイナーさんへお仕事発注出来るサイトが「ココナラ」。ここやと比較的安価な料金で作成してくれるデザインナーさんがたくさん居てる。ファビコンを作ってください!と依頼すれば、ファビコン用のサイズで希望にそったデザインをこしらえてくれる。ココナラでは、料金設定も見れるし、今までの実績も見れる。それらを参考にデザイナーさんを探してファビコンを作ってもらえたら、お金はかかるけど一番簡単な方法やな。無料で登録できるから、「ファビコン」「アイコン」って一度検索してみて〜ココナラ初心者ガイドで詳しいやり方も確認してな。引用元:Adobeファビコンの作成がムリで、さらにお金をかけたくない場合..そんな場合は、プロが手がけたテンプレートを利用する方法もある。Illustratorと同じAdobe社のサービス。プロのデザイナーさんが作ったロゴを無料でダウンロードできる。ロゴの他には、文字ロゴや写真も豊富に取り揃えられとる。難点は、テンプレートなのでオリジナルではないということ。誰かとデザインが被る可能性がある。Expressを選択する場合、その点は考慮しておくれ。Expressを詳しく見るAFFINGER/WordPressファビコン設置方法ファビコンの設置方法は、当サイトで使用しているブログソフトウェア:WordPress(ワードプレス)のテーマ、AFFINGER6(アフィンガー6)のサイトの基本設定に設置する方法を解説。header.phpを編集する方法もあるんやけど..機械音痴の作者にはハードルが高いので割愛しますわ。先に言うとくと、テンプレート自体は無料やねん。...続きを見る設置場所の手順はWordPressからと同じ。「サイト基本情報」の右上「公開」をクリックAFFINGER・WordPress同様ブラウザのタブにファビコンが反映されたら成功や!どうや?Favicon(ファビコン)をまだ設置してへん人はぜひこれらの方法を取り入れてみてくれぃ!また、独自ドメインを取得しようと考えている人は、当サイトも利用しているエックスサーバードメインがおすすめ。...続きを見るこちらもぜひ参考にしてみて。先に言うとくと、テンプレート自体は無料やねん。テンプレートを使うには、サイト作成を手助けしてくれる有料のテーマが必要やねん。全て無料で済ませたいって人は、どんな感じのサイトに仕上がるのかサンプルも載せてるので参考程度にさらっと見て行ってくれな。Dogubacoは個人サイトの作成において、テーマを使っとる。個人ブログとは、会社や学校・施設ではなく、個人が制作しているウェブサイトに掲載する記事=ブログのことを指します。個人ブログ『Dogubaco(どうぐばこ)』を制作している西いちびこです。この記事ではブログマンガ・イラストの場合としての個人ブログを詳しく解説させていただきます。※ここからは当サイトガイド犬、よっしーの解説をお楽しみください。個人ブログとは?まずは個人サイトについて。個人サイトは、個人の創作物を展示する、ギャラリーや画廊のような役割がある。...2023/12/19サブドメイン名「Tools」というホームページを開設しました。サブドメイン名「Tools」ホームページを開設しました。Dogubaco(どうぐばこ)のサイトをご覧頂いている方々へ。いつも作品をご拝読頂き、誠にありがとうございます。このたび、マンガ・イラスト制作裏側のサブドメインのホームページを開設させていただきました。サブドメイン名はDogubacoで使用しているツールを紹介するサイト、ということで『Tools』と名付けました。作品により興味を持って頂きたく、制作情報を更新してまいりますので、今後ともどうぞよろしくお願いいたします。...エックスサーバードメイン取得で身バレ阻止!手続きレポファビコン(Favicon)の作り方・イラレ(Illustrator)編ニチゴ81(Nichigo81)このサイトの管理人です。Toolsは別サイトDogubacoで使用している様々なツールを紹介しています。解説には、当ブログガイド犬・よっしーも参加中。2023.08.29イラストレーター買い切り版愛用者レポ・価格&安く買うコツ【2024】2023.08.10CS6を使い続ける私。