Smoozサービス終了に寄せて
202012_smooz.md Smoozサービス終了に寄せて 前置き この文章と、それに含まれる考察や各サービスへの脆弱性報告などはmala個人の活動であり、所属している企業とは関係ありません。 一方で私は、企業が閲覧履歴を収集して何をしたいのか、所属してる企業や他社事例について、ある程度詳しい当事者でもあります。 一般論として書けることは書けるが、(業務上知り得た知識で開示されてないものなど)個別具体的なことは書けないこともあり、また観測範囲に偏りがある可能性もあります。 Smoozに報告した脆弱性2件 最近、Smoozというスマホ向けのブラウザアプリに2件脆弱性の報告をした。 この記事を書いている時点で、Smoozの配布が停止されていて、修正バージョンの入手が出来ない。 2件目についてはまだ返事が来ていない。 脆弱性情報の開示にあたって特段の許可は得ていないが、開発元からも利用停止す
最近のデバイスやブラウザに対応させる最小限のファビコンセットには、6種類のファイルで対応できます。ブラウザはもちろん、スマホやタブレットにも対応し、さらにSVGも含めて6種類だけです。 ファビコンに必要な6種類のファイル、ファビコンの設定方法、ファビコン画像を作成する方法について紹介します。 How to Favicon in 2024: Six files that fit most needs by Andrey Sitnik Sitnik氏は、PostCSS, Autoprefixer, NanoIDの制作者です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2024/2/28: 元記事がアップデートされたので、当記事もアップデートしました。 はじめに ファビコンの設定方法 -ショートバージョン ファビコンの設定方法
ブラウザのタブやブックマークに表示される「Favicon(ファビコン)」は、ウェブサイトを印象づける重要な要素です。そんなファビコンを作成しウェブサイトに表示させる最新の方法について、フロントエンドエンジニアのAndrey Sitnik氏が解説しています。 How to Favicon in 2021: Six files that fit most needs — Martian Chronicles, Evil Martians’ team blog https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs ファビコンは2000年代初頭に生まれたコンセプトで、インターネットに公開するウェブサイトはファビコンを備えているべきだとSitnik氏は主張。しかし、ウェブサイト
2024年のファビコンを極める: 本当に必要なファイルはほぼ6つ（翻訳）｜TechRacho by BPS株式会社
はじめに モダンブラウザで使われるファビコンの作り方を見直して、今こそアイコン生成であくせくするのを終わりにしましょう。昨今のフロントエンド開発者は、ブラウザタブやらタッチ画面やらにWebサイトの小さなロゴを表示する、ただそれだけのためだけに静的なPNGファイルを20個以上扱わなければなりません。よりスマートな方法で、現代のニーズに合う最小限のアイコンセットを使う方法を紹介します。 ファビコンは見かけよりもずっと幅広く奥深いトピックで、実は誰もがファビコンについてしっかり学びたいと思っていることもわかってきました。本記事全体の内容を実質わずか2行のスニペットに凝縮したものも紹介していますので、今ファビコンで苦しんでいる方は（正確な使い方をご存知なら）そちらをお使いいただけますが、そこをぐっとこらえて記事を最後までお読みいただくことをおすすめいたします。 🔗 忙しい人向け: ウルトラショー
SVG形式のファビコンを設置しよう
2022年4月27日 SVG, Webサイト制作 つ・い・に！ファビコンもSVG形式が対応されるようになりました！SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要はありません！やったね！少し工夫すればダークモードにも対応できますよ！さっそくみていきましょう！ ↑私が10年以上利用している会計ソフト！ SVGファビコン設置方法 1. SVG形式のファビコン用画像を用意 グラフィックツールでファビコンにしたい画像を用意します。サイズは特に気にしなくてもOK。正方形であればどのサイズでもきれいに表示されます。今回はIllustratorを使って32x32pxのものを用意しました。 SVG形式で保存します。 2. HTMLファイルに記述 あと
Favicon そのSEOの価値とブログで注意すべき5つのポイント（辻正浩のブログSEO入門） - 週刊はてなブログ
ブログ運営で大切なことは、公開した記事がきちんと読まれることです。週刊はてなブログではSEO専門家の辻正浩さんに、現在のFavicon（ファビコン）の重要性と注意すべきポイントについて寄稿いただきました。どうぞお読みください。 SEO専門家の辻正浩( id:t-w-o )です。はてなブログのSEOをサポートしている外部スタッフとして、これまでも何度かはてなブログのSEOについてご紹介*1してきました。今年の6月から株式会社JADEを立ち上げてJADEの辻として活動しています。 今回は、はてなブログでも対応可能なFaviconの価値についてご紹介します。 モバイル検索結果にFaviconが登場 検索結果で選ばれるためのFaviconの作り方 5つのポイント サイズは48ピクセルの倍数 透過は使わない 複雑なものにはしない 正しく指定をする あなただけのFaviconに Faviconを設定す
絵文字をファビコンとして表示する簡単な方法
2021/5/17追記 2021年5月現在、Safariではこの方法に対応していません。Safari用に別途ファビコンを用意する必要があります。 ちょっとしたWebサイトを作るときに地味に面倒なのがファビコンです。わざわざ画像を作るのも、どこかからちょうど良い画像素材を持ってくるのも、アップロードするのも面倒だったりします。 そんなときは絵文字をファビコンとして使いましょう。 やり方 先にやり方を載せておきます。これをHTMLの<head>の中へコピペすればファビコンとして絵文字が表示されます。 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text x=%2250%%22 y=%2250%%22 style=%
ブラウザのタブなどに表示される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
GitHub を狙った Reverse Proxy 型フィッシングサイトの探索と報告 - ぶるーたるごぶりん
GitHub の Reverse Proxy 型フィッシングサイトの発見と報告 こんにちは、でじこだにょ 今回は GitHub を狙った Reverse Proxy 型のフィッシングサイトを探していこうと思います。 （長いので、Reverse Proxy 型のことをプロキシ型と略しちゃいます） 結論から書くと、２４件のフィッシングサイトを新規に発見して報告しました。 今回はそれらのフィッシングサイトの探し方のほか、フィッシングサイトの検出方法や、 セーフブラウジングなどの話をしつつ、 今回見つけたフィッシングドメインに対して、簡単ではありますが、調査と考察を行ってみたいと思います。 探そうとしたきっかけ 数日前、 Twitter を見ていたところ、こちらのツイートが流れてきました。 あっぶね GitHubだと思ったら全然違ったわ pic.twitter.com/SRtHUu3XDM— ./
ダークモード時の画像の扱い方
2023年2月7日 CSS, Webサイト制作 以前から個人的にダークモードの対応を推奨しています。基本の書き方は過去記事「Webサイトをダークモードに対応させよう」を読んでもらうとして、今回は画像まわりのダークモード実装方法を中心に紹介します！ ↑私が10年以上利用している会計ソフト！ 画像の明度や彩度を落とす 明るい背景色の場合、画像は鮮やかで明るい色合いが目に止まりやすいですよね。しかしダークモードでは、まわりが暗くなるので画像だけ派手に眩しく見えてしまいます。そこで、CSSの filter を使って、ダークモードのときは明度や彩度を調整するといいでしょう。 実装するには filter プロパティーに、明度は brightness() 、彩度は saturate() を指定します。カッコの中にパーセントで割合を書けば完了。明度・彩度両方指定するなら以下のように値を続けて書きます。 @
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
note株式会社は、12月21日（水）よりnoteのロゴデザイン、モーショングラフィックス、サウンドロゴをリニューアルして、オリジナルフォントを新たに作成しました。本リニューアルは、あらゆる人がオンラインでの活動拠点に使うプラットフォームとしてnoteが進化することを宣言するものです。 ロゴをはじめとした新しいVI（ヴィジュアル・アイデンティティ）のデザインは、ひとびとの生活に寄り添う企業のブランドを手がけてきた日本デザインセンター代表・原研哉氏が担当。コーポレートロゴも新しいサービスロゴと統一します。 新しいVIについてデザイン：原研哉（日本デザインセンター） （1）ロゴデザイン （2）iOS / Androidアプリのアイコン （3）モーショングラフィックスとサウンドロゴ 以下よりご視聴ください。 （4）note font ※オリジナルフォント （5）ロゴの展開 封筒、レターヘッド、
ファビコンを簡単に作成できる無料ツール！テキスト・画像・絵文字から生成でき、各デバイスのサイズにも対応 -favicon.io
数回 or 1クリックするだけで、デスクトップ・タブレット・スマホに適した複数サイズのファビコンを簡単に生成できる無料オンラインツールを紹介します。 ファビコンは、テキスト・画像・絵文字から簡単に生成でき、日本語や自分の画像からでも生成できます。また、複数の画像サイズ・フォーマット、それらの実装コードも生成してくれる優れものです。
Nodesign.dev | Tools and resources for non artistic developers
Search Nodesign.dev | Tools and resources for non artistic developers May 11, 2024 The ultimate collections of illustrations, art, pictures, fonts, images, icons, css frameworks, favicon generators, color palettes, backgound generators, ui inspirations and many more nodesign tools. Get to know the best online favicon generators so that you have a selection of your favorite websites open in differe
GitHub - jonasstrehle/supercookie: ⚠️ Browser fingerprinting via favicon!
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
ダークモードに対応している時に、SVGファビコンのカラーをCSSで変更するテクニックを紹介します。 当ブログはダークモードに対応していませんが、ダークモードの周りもいろいろ充実してきましたね。 画像: ツイートより 元ネタは、下記ツイートからです。 💡 Change the color of your favicon when dark mode is enabled.#codyhousenugget pic.twitter.com/Hie9Pgt9MQ — CodyHouse (@CodyWebHouse) July 7, 2020 ファビコンをSVG画像にする利点は、スクリーンの解像度を気にすることなく、1つのファイルでファビコンを提供できることです。対応ブラウザはIEを除く、すべての主要なブラウザでサポートされています。
The prospects for troubled banking-as-a-service startup Synapse have gone from bad to worse this week after a United States Trustee filed an emergency motion on Wednesday. The trustee is asking…
HTML Boilerplates
Start your web project by generating and downloading your custom HTML Boilerplate.
ブログアイコン（favicon）をGoogleのガイドラインに準拠するよう変更しました - はてなブログ開発ブログ
はてなブログでは、「ブログアイコン（favicon）」の仕様をGoogleのガイドラインに沿うように変更いたしました。 先日、Googleより検索結果一覧にファビコンを表示する変更が行ったという発表がありました。はてなブログでは、すでに「ブログアイコン（favicon）」機能を提供しており、利用者が任意の画像を設定することが可能でしたが、ガイドラインに沿わない点がありました。以下の変更を行うことで、Googleのガイドラインに準拠いたしました。 変更点 パソコン版やレスポンシブデザインではてなブログを閲覧中にも、apple-touch-icon を出力する iPhoneでレスポンシブデザインのブログをホームに追加する場合や、iPadでブログをホームに追加する際に、アイコンが表示されるようになります システムの都合により、「ブログアイコン」のgif画像対応をサポートの対象外とします お手数を
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
[レベル: 初級] 先週アナウンスされたモバイル検索結果の新しいデザインがほぼ完全にロールアウトしました。 ファビコンが表示され、URL がページタイトルの上に位置します。 この記事では、ファビコン表示の新しいモバイル検索結果に関する追加の情報を解説します。 日本は URL にサイト名なし 日本の Google では、URL にサイト名は入りません。 トップページの URL がそのまま表示されます。 HTTPS サイトの場合は、https:// が含まれた URL になります。 左は日本語の検索結果です。 ウィキペディアの URL がそのまま表示されています。 そのあとにパンくずリストが続きます。 右は英語の検索結果です。 サイト名である “Wikipedia” が URL（パンくずリスト）の先頭です。 URL に関しては場所が変わったものの、表示形式に関しては以前と同じです（以前から、日
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. ). And you can embed CSS within an SVG with a <style> element. That CSS can use a prefers-color-scheme media query, and as a result, a favicon that supports dark mode! < pre rel=”HTML”> < svg wid
Building an adaptive favicon Stay organized with collections Save and categorize content based on your preferences. In this post I want to share thinking on how to build an adaptive favicon with SVG. Try the demo. Browser tabs shown adapting to MacOS system light and dark theme changes. Try the Demo If you prefer video, here's a YouTube version of this post: Overview A custom favicon is a great wa
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 検索結果に表示されるファビコンを定義する サイトにファビコンが設定されている場合、Google 検索の検索結果に表示されることがあります。 ファビコン 実装 Google 検索の検索結果にサイトのファビコンが表示されるようにする方法は次のとおりです。 ガイドラインに沿ってファビコンを作成します。 ホームページのヘッダーに次の構文の <link> タグを追加します。 <link rel="icon" href="/path/to/favicon.ico"> Google は、link 要素の次の属性に基づいてファビコンの情報を抽出します。 属性
Webデザイナー、UI/UXデザイナーの@sdesignlaboです。 最新のファビコン（favicon）のサイズ一覧と作り方について解説します。 本当に必要なファビコンだけをピックアップしました！ ファビコンサイズや作り方についてWebデザイン初心者の方にも分かりやすく解説いたします。
[レベル: 初級] 先日 Google はモバイル検索結果にファビコンを表示するようにしました。 このファビコンはドメイン単位、もう少し正確に言うとサブドメイン単位で決定されます。 したがってページ単位でファビコンを切り替えることはできません。 トップページで設定されたファビコンを取得 ヘルプページと検証結果から判断する限りでは、トップページで設定されたファビコンを検索結果に表示するファビコンとして Google は取得するようです。 ホームページのヘッダーに次の構文の <link /> タグを追加します。 Google では、ホームページをクロールするたびにファビコンの有無、またはファビコンの更新の有無を確認します。ファビコンを変更し、Google にその変更を知らせたい場合は、サイトのホームページのインデックス登録をリクエストできます。 ※強調は僕による ページごとにファビコンを変える
Lea Verou had a dang genius idea to use an emoji as a favicon. The idea only recently possible as browsers have started supporting SVG for favicons. Chuck an emoji inside an SVG <text> element and use that as the favicon. Here’s the one-liner in use: <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22
こんにちは。NFLabs. Offensive Teamの岩崎です。 本記事はNFLabs. アドベントカレンダー 10日目の記事となります。 近年、多くのWebサービスではCDN(Content Delivery Network)と呼ばれるWebコンテンツ配信サービスが利用されております。CDNは世界中に分散配置されたコンテンツサーバの中から、ユーザに対しネットワーク的に近いロケーションからコンテンツを返すことで効率的なコンテンツ配信(高速配信や多くのユーザへの同時配信など)を実現する技術です。 また、昨今はDDoS攻撃対策を目的としてオリジンサーバを秘匿する用途で利用されるケースも増えております。 本記事ではCDNのオリジンサーバのIPアドレス(以降、オリジンIP)を調査する方法について共有いたします。 特定方法 1. 特徴的なレスポンスを基にした調査 2. 関連するドメイン名の調査
はじめに 新しく作成したサイトにfaviconの設定をしようとしたら、たくさんの詰まりポイントがありました。 記述内容が多すぎる… 結局どれが必要なの？ ダークモードで画像が見えない！ Safariだけ画像が出てこない！ そこで今時の記述の仕方や、画像データの仕様について、まとめました。 同じように詰まった人の参考になれば嬉しいです。 結論 指定方法 faviconを表示させたいページのhead内に以下の記述を追加します。 <head> <link rel="icon" sizes="16x16" href="/favicon.ico" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link r
You should be using SVG favicons. They’re supported in all modern browsers right now. Also, you probably don’t need all these icon links and sizes you’re copying from projects to projects. Let’s find out what’s the absolute minimum required, word by word. IconThe main favicon can be an SVG of any size. The type type=”image/svg+xml” is unnecessary. <link rel="icon" href="favicon.svg">Mask iconFor S
Define a favicon to show in search results - Search Console Help
Send feedback Stay organized with collections Save and categorize content based on your preferences. Define a favicon to show in search results If your site has a favicon, it can be included in Google Search results for your site. Favicon Implementation Here's how to make your site eligible for a favicon in Google Search results: Create a favicon that follows the guidelines. Add a <link> tag to th
How to Create a Favicon That Changes Automatically | CSS-Tricks
I found this Free Favicon Maker the other day. It’s a nice tool to make a favicon (true to its name), but unlike other favicon generators, this one lets you create one from scratch starting with a character or an emoji. Naturally, I was curious to look at the code to see how it works and, while I did, it got me thinking in different directions. I was reminded of something I read that says it is po
GitHub - projectdiscovery/httpx: httpx is a fast and multi-purpose HTTP toolkit that allows running multiple probes using the retryablehttp library.
Usage: ./httpx [flags] Flags: INPUT: -l, -list string input file containing list of hosts to process -rr, -request string file containing raw request -u, -target string[] input target host(s) to probe PROBES: -sc, -status-code display response status-code -cl, -content-length display response content-length -ct, -content-type display response content-type -location display response redirect locati
[レベル: 中級] そのサイトのファビコンを表示する検索結果を PC 検索で Google は広範囲にテストしているようです。 ファビコンを表示する検索結果は今年の 5 月にモバイル検索で導入されました。 ファビコンが付くだけではなく、パンくずリストの URL がページタイトルの上に位置します。 モバイル検索と同じデザインの検索結果を PC 検索にも Google は導入するのかもしれません。 テストが多数目撃される こちらは、Twitter に投稿されたファビコン付きの検索結果です。 パンくずリストが付いたパンくずリストがページタイトルの上に位置しています。 こちらは、現状の検索結果です。 ページタイトルの上ではなく下に、パンくずリストもしくは URL が位置しています。 ファビコンはありません。 PC 検索結果の新しいデザインは数多く目撃されているようです。 英語検索だけではなく、ブラ
OMG, SVG Favicons FTW!
This article explores the world of SVG favicons. We cover adding them to HTML, using emojis, inlining them as data URIs, supporting dark mode, and animations. Chinese Version / 中文版 I’ve been working on some side projects recently (Style Check and bedrocss), and as with any project I work on long enough, I got to the point where I wanted to add a favicon. I decided to play around with SVG favicons.
Loading...
1. Faviconジェネレーター Faviconジェネレーターは、ブラウザ上で利用でき、画像ファイルからファビコンを作成できるツールです。.jpg（.jpeg）や.png、.gifなどの画像ファイルを基に、拡張子が.icoのファビコン用画像を作成してくれます。ファビコン用画像はその場でプレビュー表示できます。また、ファビコンのサイズは16 × 16pxから256 × 256pxまでの7種類の中から選べます。 サイズを同時に複数選択することも可能です。その場合、選択したサイズのアイコン画像を1つのファイルにまとめたマルチアイコンが作成されます。 2. Dupli Checker（デュプリチェッカー）のファビコン作成 Dupli Checker（デュプリチェッカー）の「ファビコン作成」は、.ico形式と.png形式のファビコンが作れて、ダウンロード可能サイズが豊富な無料ツールです。.jpg（
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. It’s the first thing your eyes look for when you’re switching tabs. That’s one way of explaining what a favicon is. The tab area is a much more precious screen real-estate than what most assume. If done right, besides being a label with icon, it can be the perfect billboard
検索結果でファビコンが表示や更新されないことに関する記事ですが、内容の真偽に関して保証はできませんので読まれる方はその点留意ください。 ファビコン表示に関するGoogleのヘルプ 検索結果に表示されるファビコンを定義する – Search Console ヘルプ 以降はこのページからの引用を交えて記載します。 検索結果にファビコンが表示や更新されない場合のチェックポイント(私案) robots.txtの画像検索よけ(User-agent: Googlebot-Image)の範囲にファビコン用画像ファイルが含まれていないか? ルートドメイン直下にページがあるか?(※詳細は後述) APIエンドポイントで表示されるか？(※詳細は後述) ファビコンの画像ファイル更新後、8-10日待ったか?(7日目に反映される場合を確認) ファイル名そのままで上書きして変更されない場合は、ファビコン画像のファイル名
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2024年版、ファビコン画像の作成方法と設置方法、さまざまなデバイスに対応させるには6種類のファイルが必要
最新の手法でブラウザのタブに表示される「Favicon(ファビコン)」を作成するとこうなる
ブラウザのFavicon(ファビコン)でユーザーを追跡する「スーパークッキー」とは？
ずぼらな私の2023年のファビコン事情（SVGでダークモード対応）
noteはロゴをリニューアルしました。引き続き、クリエイターエコノミーを牽引していきます｜note株式会社
SVGファビコンのカラーをダークモード時にCSSで変更できるの知ってた？
TechCrunch | Startup and Technology News
モバイル検索のファビコン スパムには手を出すな、ファビコンが表示されなくなる可能性あり
Dark Mode Favicons | CSS-Tricks
Building an adaptive favicon | Articles | web.dev
検索結果に表示されるファビコンを定義する - Search Console ヘルプ
【2024年最新版】ファビコン（favicon）のサイズ一覧と作り方
モバイル検索結果のファビコンは（サブ）ドメイン単位で取得される
How To Use an Emoji as a Favicon Easily | CSS-Tricks
CDNのオリジンIPを調査する方法について - NFLabs. エンジニアブログ
【2021年版】favicon（ファビコン）の設定方法と画像の作り方
Are you using SVG favicons yet? A guide for modern browsers.
Google、ファビコン付きの検索結果をPC検索でもテスト中
ファビコン作成ツール7選：無料ツールや作成サイトをご紹介 - Shopify 日本
The Making of an Animated Favicon | CSS-Tricks
Googleの検索結果におけるファビコンの表示と更新に関するメモ