【2018年版】Webサイトのファビコンや各種アイコンの正しい設定方法 | Web Design Trends
Webサイトにファビコン（favicon）を設定しておくことで、ブラウザのタブやGoogleの検索結果にアイコンが表示されるようになります。 今回は、2021年現在のファビコン（favicon）の設定方法とおすすめの作成ツールについてご紹介したいと思います。 ファビコン（favicon）とは？ ファビコンとは、Webページごとに設定されるブラウザのタブなどに表示されるアイコンのことです。 PCのブラウザでWebサイトを開くと、タブごとにサイト名の隣にアイコン画像が表示されますが、その画像はWebページ側で指定したアイコンが表示されるようになっていて、ブラウザでの見た目が分かりやすくなるだけでなく、Webサイトのブランディングやイメージ作りにも影響を与えます。 ファビコンは、主に下記の箇所に表示されます。 必ずファビコンを設定しないといけないわけではありませんが、ファビコンが設定されていない
1つのアイコンで2色設定できるアイコンフォントを使ってみる - FOXISM
アイコンフォントって便利ですけど、基本的にフォントなので1色しか使えないですよね。でもフォントファイルを工夫すれば2色使えるんじゃないかと思って試してみました。 元ネタ この辺を読んだのと、前々からモヤモヤ考えていたのをやってみた感じです。上の2つはどちらもSVGを使ってやっていますが、それを（わざわざ）アイコンフォントでやってみよう、と。 サンプル alarm_clock arrow_down arrow_left arrow_right arrow_up booknote camera cart clock coffee compass heart home image magnifier mail map pencil setting website こんな感じです。 仕組み アイコンを表示する部分のhtmlはよくある感じで <i class="icon2-image"></i> と
アイコンフォントのアクセシビリティと適切な利用方法
アイコンフォントは多くのウェブサイトでも使用されていますが、そのまま使用するだけではアクセシビリティを損なう可能性もあります。アクセシビリティを確保しながらアイコンフォントを利用する方法について解説します。 モバイル端末をはじめとして高解像度ディスプレイを搭載した端末が普及したことにより、ウェブサイトでも高解像度でも劣化しないで表現が可能なベクター形式のデータが用いられることが増えてきました。 ベクターデータの中で最も用いられているのはフォントデータではないでしょうか。フォントデータは複雑な色の表現が難しいとはいえ、スタイルシートのみで大きさや色をコントロールしやすいということもあり、アイコンなどの形状をフォントとして登録したアイコンフォントも多く使われています。 独自のフォントデータを配信するウェブフォントも、古くからブラウザにて実装されていたことや Font Awesome など、使用
Android,iOSアプリ用画像リソースとアイコンサイズのまとめ [2018年10月更新] - OPTPiX Labs Blog
R&D部の佐藤伸です。 スマートフォンのアプリ開発では、さまざまな解像度の端末に対応する必要があるために、複数の解像度の画像リソースを用意する必要があります。 詳細は本ブログ2014年5月の記事「Android,iOSアプリ用画像リソースとアイコンサイズのまとめ」でも解説いたしましたが、その後の新端末の登場などにより情報が若干古くなってしまいましたので、ここで現時点(2017年10月)での最新データを元に再度まとめてみました。 スマホアプリ開発の助けになれば幸いです。 【2018/10/31追記】 iOS関連の情報ですが、iOS 12 および iPhone XS/XS Max/XR は、それ以前(iOS 11 および iPhone X/8)からの変更はありませんでした。 Android アプリで必要な画像リソース Android では、ディスプレイの Density (dpi=dot pe
![Android,iOSアプリ用画像リソースとアイコンサイズのまとめ [2018年10月更新] - OPTPiX Labs Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/6e8147c4c5beafc83bfc36296845ad3b0cccd267/height=288;version=1;width=512/https%3A%2F%2Fwww.webtech.co.jp%2Fblog%2Fwp-content%2Fuploads%2F2014%2F05%2FAppResource.png)
FLAT ICON DESIGN -フラットアイコンデザイン- | WEBデザインやDTPですぐ使えるフラットアイコン素材がフリー（無料）ダウンロードできるサイト
フラットデザインに最適なフラットアイコン素材がフリー（無料）でダウンロードできる「FLAT ICON DESIGN」。 WEBデザインやDTP他、PPTなどでもすぐに使える商用利用可能なアイコン素材。利用規約はこちら ファイルのフラットデザインアイコン ノートのアイコン素材 あざらしのフラットアイコン 博士のフラットアイコン素材 はさみのフラットデザインアイコン ハンマー（とんかち）のフラットアイコン ドル袋のフラットアイコン素材 無料の暴れ牛のフラットアイコン素材 スペースシャトルのフラットデザインアイコン ギリシャのパルテノン神殿風のフラットアイコン 目玉のアイコン素材 にわとりのフラットアイコン素材 計算機のフラットアイコン素材 その2 コーヒーカップのフラットアイコン素材 バッファローのフラットアイコン 乳牛のフラットアイコン 海外の大学帽子のフラットアイコン おさるさんのフラット
クリエイティブなファビコンを設置しよう
2017年9月22日 Webサイト制作, 便利ツール Webサイトの制作時に、特に初心者さんが設置を忘れがちなファビコン。Webサイトをブックマークした際や、タブ表示した際にサイト名の横にちょこんと表示されている小さなアイコンのことです（Favourite + Icon = Favicon）。デバイスが増え、これまでとは設置方法が少し変わってきているのと、機能のついたファビコンも増えてきているので、その辺もあわせて紹介します！ ↑私が10年以上利用している会計ソフト！ ファビコンをデザインする ファビコンは16×16ピクセルとかなり小さいながらも、その存在は偉大です。複数のタブを開いている時や、ブックマークリストの中から、ひと目見てどのサイトか区別できるからです。 多くの場合、そのWebサイトのロゴマークを縮めたり、簡略化したものがファビコンデザインとして採用されています。CHANEL、A
プログラミング言語・webサービス・ファイルタイプ・ブラウザなど、web開発関連のアイコン・アイコンフォント 15 - NxWorld
プログラミング言語やフレームワークのロゴ、多くの開発者に利用されているwebサービスやツールのロゴ、シンプルでわかりやすくデザインされたファイルタイプ、フラットデザインで表現されたブラウザなど、いずれもweb開発に関連していると思うアイコン・アイコンフォントです。 普段のデザイン業務などにはほとんど使わないと思うものが多いですが、技術系ブログとかポートフォリオなんかでは便利そうです。 紹介しているアイコンを使用する際は、ライセンス等は各自で再度確認してください。 Devicons 言語・フレームワーク・Webサービス・ブラウザなど、Web開発関連のアイコンフォントセットで、見かけることの少ないツール系のロゴも多数用意されています。 Freebie: SVG Developer Icon Set SVGとAIの2形式が用意されている全17種類のアイコンセットで、見た目もカラーとモノクロの2タ
Material Icons - マテリアルデザイン向けに作られたGoogle製アイコン集 MOONGIFT
Googleが提唱しているフラットUIを発展させたデザインがマテリアルデザインです。アイコンを単純化して情報構造を明確にするだけでなく、さらにマウスオーバーやタップ時のアニメーション、色の変化をつけることでシステムがどういう状態にいるかが明確になります。 そんなマテリアルデザインにフォーカスして作られたアイコン集がMaterial Iconsです。 Material Iconsの使い方 Material Iconsは数百種類のアイコンが提供されています。 アクション系。 特徴としては一つのアイコンで終わりではなく、その状態によって斜線を引いたり、アイコンを重ねたアイコンがあることでしょう。 アラート、AV、コミュニケーション。 音量アイコン一つとっても、音量の大小、ミュート、設定不可などとパターンが作られています。 コンテンツとデバイス。 スマートフォンでも利用も想定されていますのでデバイ
アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう
2014年7月3日 SVG ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。 ↑私が10年以上利用している会計ソフト！ 2014年7月3日 追記：SVGスプライトの書き方について修正＆追記しました。 SVGってなに？ SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。 Appleがレティナディスプレイを発表して
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
AppleのUXエバンジェリストが教える、優れたアプリアイコンをデザインする6つの秘訣 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする ＞＞ 久々にこんなベタな記事を載せてみたかった、ということで今日もアプリで一獲千金の夢を描いているあなたに送る、より注目を集めるアプリアイコンのデザイン手法についてまとめた記事をThe Next Webから。リリースしても注目を集めるのは至難の業なのがスマホアプリの世界。SEOも微妙な感じですし、広告費を投入するしか露出の手段はないのか、、、という感じですが、アイコンのデザインが良ければ他アプリより目立った露出とダウンロードを獲得できるかも？それが全てではないでしょうが、プラスになるには間違いない、アイコンデザインのティップス集です。 — SEO Japan これは、アイコン用検索エンジンIconFi
画像の代わりに使えるアイコンタイプのWebフォントのまとめ
アイコン形式になったWebフォントを集めてみました。これだけ色々揃うと画像を使う場面も減ってくるかもしれませんね。 @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy i
６００以上のシンプルなベクターアイコンが入手できる「iconmonstr」:phpspot開発日誌
iconmonstr ６００以上のシンプルなベクターアイコンが入手できる「iconmonstr」。 次のようなシンプルなベクターアイコンが６００種類以上公開されています。 Twitterだと公式アイコンもありますし、若干アレンジしたデザインのものもあります。 とにかく種類が豊富でベクターなのでリサイズ可能というところでのアイコンをお探しの方には調度良いかも。 全体的にクオリティは統一されていて使いやすそうです 関連エントリ RetinaディスプレイOKなアプリ用PSDアイコン350 綺麗にデザインされたピクトグラムアイコン100個セット iOSのAppアイコン作成用PSDテンプレート フリーのアイコンフォント１０まとめ
商用利用も無料！手書き風アイコン122種類！
今日は私が集めているアイコンのいくつかを紹介させていただきます。今回は商用利用も無料(商用フリー)でOK！という気前のいい手書き風のアイコンをまとめました。ここで紹介するアイコンは全てリンクも不要で使えますが、ダウンロードして使うときは念のためライセンスの確認をしてくださいね！ ではどうぞ。 19 Freehand drawn sketch icons ダウンロード先:Visit site 実際に手書きで作成したものをスキャンしてイラレでクリーンアップしたものです。 HAND DRAWING ICONS SET ダウンロード先:Visit site まさに手書き中の手書きといったアイコンです。 Handycons 2 ダウンロード先:Visit site メディア関連の手書き風アイコンです。油絵っぽい感じが実にクールですね。 FreeHand ColorStroked icon pac ダ
商用利用も無料！ ピクトグラムのアイコン素材のまとめ
全部ダウンロードしたら、3000種以上！ 商用でも無料で利用できる、ピクトグラムのアイコン素材を紹介します。 ※アイコンをご利用の際は、必ずライセンスを確認してください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iconate.js - icon animation with css, javascript
手作り感がかわいい、オープンソースなアイコンフォント・「JAM icons」
Iconfinder | Download free icons
Noun Project: Free Icons & Stock Photos for Everything
IcoMoon App