ずぼらな私の2023年のファビコン事情（SVGでダークモード対応）
2023/05/03: 下部にさらにズボラな案を追加、FAQも追加しました。 デモサイトを作りました。リポジトリはこちら。 favicon（ファビコン）てなに？ みんなだいすき、ブラウザのタブの妖精、この小さいアイコンたちです。 サイトに設定されているファビコンをチェックするには Chrome だと Favicon Detector 拡張を使うと便利。ぜひインストールしていろんなサイトを見てみてくださいね！ こちらは Spotify のファビコンを Favicon Detector 拡張でチェックした例です。 ところでファビコン、こんなにいる？ つらつらと…長い…全部いるのこれ？ <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-tou
2024年版、ファビコン画像の作成方法と設置方法、さまざまなデバイスに対応させるには6種類のファイルが必要
2024年のファビコンを極める: 本当に必要なファイルはほぼ6つ（翻訳）｜TechRacho by BPS株式会社
はじめに モダンブラウザで使われるファビコンの作り方を見直して、今こそアイコン生成であくせくするのを終わりにしましょう。昨今のフロントエンド開発者は、ブラウザタブやらタッチ画面やらにWebサイトの小さなロゴを表示する、ただそれだけのためだけに静的なPNGファイルを20個以上扱わなければなりません。よりスマートな方法で、現代のニーズに合う最小限のアイコンセットを使う方法を紹介します。 ファビコンは見かけよりもずっと幅広く奥深いトピックで、実は誰もがファビコンについてしっかり学びたいと思っていることもわかってきました。本記事全体の内容を実質わずか2行のスニペットに凝縮したものも紹介していますので、今ファビコンで苦しんでいる方は（正確な使い方をご存知なら）そちらをお使いいただけますが、そこをぐっとこらえて記事を最後までお読みいただくことをおすすめいたします。 🔗 忙しい人向け: ウルトラショー
How to Favicon in 2024: Six files that fit most needs—Martian Chronicles, Evil Martians’ team blog
Author: Andrey Sitnik, Author of PostCSS and Autoprefixer, Principal Frontend EngineerTopics: Frontend, CSSPrefer SVG over PNG, trust browsers to downscale, drop obscure formats—the ultimate, exhaustive guide to favicons for modern web. Includes steps for static HTML and Webpack. It's time to rethink how we cook a set of favicons for modern browsers and stop the icon generator madness. Frontend de
ブラウザのFavicon(ファビコン)でユーザーを追跡する「スーパークッキー」とは？
ブラウザのタブなどに表示されるFavicon(ファビコン)は、サイトのシンボルとして重要なアイコンです。しかし、このファビコンにはCookie(クッキー)のようにユーザーを追跡可能な「スーパークッキー」の問題が潜んでいると、研究者らが警鐘を鳴らしています。 Tales of Favicons and Caches – Persistent Tracking in Modern Browsers (PDFファイル)https://www.cs.uic.edu/~polakis/papers/solomos-ndss21.pdf supercookie • workwise https://supercookie.me/workwise ファビコンとは、サイトのシンボルマークとしてタブやURLの隣などに表示される小さなアイコンのことです。 イリノイ大学シカゴ校のセキュリティー研究者らは2021
SVG形式のファビコンを設置しよう
正しいfaviconの設定方法を対応ブラウザ別にまとめる | Glatch（グラッチ） – 夫婦で活動するフリーランスWeb制作ユニット
サイト制作で忘れられがちな印象があるfaviconの設定ですが、とっても重要なので正しい書き方で設定しましょう！ <link>でfaviconを指定することがありますが、以下の記述をよく見かけるかと思います。 <link rel="shortcut icon" href="/path/favicon.ico"> rel属性にshortcutの記述が必要なのは、IE8以下の対応が必要なときのみです。 shortcutは非準拠ですので使わないようにしましょう。 古いブラウザに対応する必要がないサイトであれば、rel属性にshortcutは不要ですし、ファビコンの画像もpngやgifが問題なく使用できます。 そこで、どのブラウザまで対応するかによりどう記述すればよいかが変わってくるので、一覧にまとめました。 IE8以下も含めたIE、Chrome、Firefox、Safari、Opera、Edge
faviconやホーム画面アイコンの指定方法2017 [無料ホームページ作成クラウドサービス まめわざ]
faviconの設定方法をネット検索すると、大量の情報が表示されます。 矛盾する情報もあり、新旧の情報が混在し、情報の取捨選択に難儀します。 ここでは、そうしたネット上の情報から一旦離れ、独自のテストを行った結果をご紹介いたします。 スマホのタブ選択時のアイコンなど調査対象を広げ、2017年7月の現時点で「結局どうしたらいいの？」にお答えします。 また最後に、まめわざでのfavicon設定方法をご紹介いたします。
![faviconやホーム画面アイコンの指定方法2017 [無料ホームページ作成クラウドサービス まめわざ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/cf6baf1cfc28148bcc9fcc86e7f0b5c556c55615/height=288;version=1;width=512/https%3A%2F%2Fmamewaza.com%2Fimg%2F1501463077569s.gif)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
◎ Mac標準のソフトのみでfavicon.icoを作成する方法