東京上野のWeb制作会社LIG仕事も遊びもいいオフィス。デザインシェアデザイナーのサリーです。ブックマークしたサイトのfaviconを眺めるのが好きです。小さくて細かいものが並んでいるときゅんとします。今日はfavicon作成時に気をつけている点や、コツ・アイデアをごちゃまぜにまとめてみました(設置方法は省いています)。自己流の部分もあるので、参考程度に読んでいただけると幸いです。※この記事は、2013年3月14日に公開された記事を再編集したものです。サイズについてみなさんはfaviconはどのサイズで作っていますか?サイズは基本の基本のようですが、実はサイトによってやり方がさまざまで、結構悩みどころだったりします......。作っている方や、両方作ってマルチアイコン(※)にする方もいると思います。※複数のサイズのアイコンをico形式で1つのファイルにまとめたアイコン画像のことそこで、代表的なサイズをひとつひとつ整理してみました。64px:高解像度のWindowsサイトアイコンなどなど、現在では20種類以上のfaviconサイズがあると言われていますが、その中でも押さえておきたいものをピックアップしました。ウェブクリップアイコンについては、こちらの「スマホ対策!faviconを設定するなら「ウェブクリップアイコン」も忘れずにね!」を参考にしてみてください。使用するOSもあり...きりがなくなってきました。ショートカットアイコンはfaviconが使用されます。たくさんのサイズのアイコンを毎回用意するのは正直大変ですよね。大きなサイズでひとつ作って縮小して使いまわすこともできますが、思うように綺麗に縮小してくれなかったり、古いブラウザは対応していないこともあるようです。ふたつをマルチアイコンにすれば充分だと思っています。なったときにブラウザによって見え方が違ったり、思うように綺麗に縮小されないことがありました。)きっちり完璧に作りたい方は、すべてのサイズをマルチアイコンにするのも手ですが、ファイルサイズが大きくならないように気をつけましょう。フォーマットについて基本その2です。favicon画像は「.png」や「.gif」でも表示できますが、古いブラウザは対応していないものもあるので、マルチアイコンにもできる「.ico」が一番好ましいです。「.ico」への変換方法Webサービス・ツールでもgifやpngからicoへの変換ができますが、Photoshopにプラグインを入れることでもico形式で書き出しができるようになります。Formats」のフォルダに入れればOKです(OSやPhotoshopのバージョンによってファルダの場所は違いあり)。Photoshopからそのままマルチアイコン化する方法がわからず......。いうわけで、マルチアイコンにする場合はpngで書きだしてから下記サービスを利用しています。複数マルチアイコンを作ろう!http://ao-system.net/multiicon/透過させるかわいいfaviconを見つけても、背景が白いままで透過されていないとちょっと残念に感じます。すごく簡単なことですが、デザインに含まれていなければ背景は透過させたほうが手間がかかっているように見えます。綺麗に透過されたfaviconのサイトTwitterhttp://twitter.com/Dropboxhttps://www.dropbox.com/ja/次のページコツは、ドットを意識すること。ANALYZE」を導入後、CVR改善に成功した品川美容外科のWeb担当者に話を聞いてきた。2019.12.31281年末年始のイマこそ!マーケティングを学びたい人必見・Udemyおすすめ動画講座5選【1/9まで新春セール実施中!】2019.12.2525130歳独身彼女なし。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。