Рубрика «favicon»

в 16:29, , рубрики: favicon, ruvds_перевод, Блог компании RUVDS.com, Работа с иконками, разработка, Разработка веб-сайтов

Пришло время переосмыслить используемый нами подход к подготовке наборов фавиконов для современных браузеров и остановить безумие генераторов фавиконов. В наши дни фронтенд-разработчикам приходится иметь дело с более чем 20 статическими PNG-файлами только для того чтобы вывести на вкладке браузера или на сенсорном экране миниатюрный логотип сайта. В этом материале раскрывается более разумный подход к работе с фавиконами, который направлен на подбор минимального количества файлов, использование которых способно решить большинство «фавиконных» задач, стоящих перед современным веб-разработчиков.

Фавиконы в 2021 году: шесть самых важных файлов - 1

Известно, что создание фавиконов — это гораздо сложнее, чем многим хотелось бы. Поэтому я, чтобы не мучить тех, кто уже достаточно от всего этого настрадался, кто точно знает, что делать, собрал всю суть статьи в паре примеров кода. Но я, всё равно, советую читать этот материал целиком.
Читать полностью »

в 5:05, , рубрики: browserconfig, favicon, html, webclip, Разработка веб-сайтов

Что такое favicon и для чего он нужен?

Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.

image

Favicon играет важную роль в веб-приложениях. Он может улучшить внешний вид сайта в выдаче, повышает узнаваемость вашего сайта, помогает пользователю быстро найти необходимую страницу в закладках и вкладках.

Кроме того, пользователь может добавить страницу вашего сайта на главный экран телефона или сохранить как веб-приложение. В таком случае с помощью favicon можно быстро найти сайт среди большого количества других приложений.

Какой формат использовать для favicon?

Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.

О каких платформах пойдет речь в этой статье?

  • Classic desktop browsers
  • Android Chrome
  • iOS Safari Web Clip
  • Mac OS
  • Windows

Читать полностью »

в 9:03, , рубрики: browserconfig, favicon, html, pwa, sizes, Разработка веб-сайтов

На сегодняшний день favicon — это не просто значок 16x16 во вкладке браузера. Он является важной составляющей интерфейса, а также играет немаловажную роль в прогрессивных веб-приложениях. Существует немало способов подключения и использования favicon, о которых я расскажу в данной статье.
Читать полностью »

в 16:01, , рубрики: favicon, html, javascript, браузеры, веб-дизайн, Веб-разработка, оповещения

Как отобразить количество оповещений в названии вкладки браузера - 1

Веб-сайты и веб приложения с постоянно обновляющимся контентом должны оповещать об обновлениях в том случае, если пользователь ушел с вкладки, но не закрыл ее.

Существует пара наиболее распространенных способов оповещения пользователя. С одной стороны, социальные сети Facebook, Twitter и LinkedIn указывают определенное число, которое соответствует количеству обновлений. С другой стороны, Trello отображает небольшой красный кружок поверх favicon.

Trello Facebook and Twitter notifications
Оповещения Trello, Facebook и Twitter

В этом уроке мы воссоздадим подобные оповещения. Посмотрите демо (англ.), чтобы понять, чем мы будем заниматься.

▶Посмотреть на GitHub
▶Демо (рус.)
Читать полностью »

в 14:38, , рубрики: canvas, favicon, html5, javascript, thumbnail, Веб-разработка, метки: , , , ,

yandex browserПрошло уже почти два месяца как Yandex порадовал некоторых пользователей новым продуктом — Yandex Браузером. Несмотря на невероятную динамику развития продуктов в этой области (Chrome и Firefox), Яндексу удалось привнести в свой браузер ряд новых идей.

Из всех особенностей этого браузера больше всего меня зацепило их дизайнерское решение относительно изображений сайтов в «быстрых закладках» (Speed dial). Люди любят глазами и поэтому приятно видеть у себя в новом табе не пустую белую страницу, а красочные картинки. Беда только в том, что лично я, чаще всего, смотрю на подпись под этой картинкой или же на favicon, так как по скриншоту сайта бывает очень сложно его узнать. Эту проблему дизайнеры яндекса, на мой взгляд, решили очень элегантно. В данном посте мы посмотрим, как реализовать эту идею на клиентской стороне.

Читать полностью »

в 10:59, , рубрики: canvas, favicon, javascript, tinycon, веб-дизайн, Веб-разработка, метки: , ,

Piecon — динамическая круговая диаграмма в фавиконе
Крошечная (2 килобайта в минифицированном виде) JavaScript-библиотека Piecon генерирует круговую диаграмму на месте фавикона. API предельно прост и состоит из трёх методов объекта Piecon.
Читать полностью »

в 11:46, , рубрики: favicon, Google, метки: ,

Google 2012 Google 2009 Поисковый гигант сменил фавиконку, которая жила у него с 2009 года.
Новая иконка выросла в два раза и избавилась от мельтешения цветов, которое многим не нравилось.
так комментировали попытку Google менять фавикон
в 2008 — «эта скрюченная буковка g выглядела просто омерзительно»
в 2009 — «цветастая ляпня»
Что скажете теперь?

Старая иконка всё ещё доступна на google.ru
Все фавиконки Google одной картинкой:
Google поменял фавиконку поиска

Читать полностью »

в 12:11, , рубрики: canvas, favicon, javascript, JFavicon, JS, динамика, оповещения, сайты, счетчик, метки: , , , , ,

image

Данная библиотека является доработкой tinyicon с использованием всех пожеланий пользователей. Давайте разрабатывать вместе ©

Представляю Вам новую библиотеку JFavicon. Сразу после подключения ее к сайту и инициализации Вы получаете удобный инструмент для динамического изменения favicon. В ее функционал входит:

  • Автоматическая установка favicon
  • Изменение favicon, в зависимости от каких-либо событий
  • Счетчик, с возможностью смены стиля, прямо в favicon
  • Динамическое изменение title страницы

Читать полностью »

в 12:11, , рубрики: canvas, favicon, javascript, JFavicon, JS, веб-дизайн, динамика, оповещения, сайты, счетчик, метки: , , , , ,

image

Данная библиотека является доработкой tinyicon с использованием всех пожеланий пользователей. Давайте разрабатывать вместе ©

Представляю Вам новую библиотеку JFavicon. Сразу после подключения ее к сайту и инициализации Вы получаете удобный инструмент для динамического изменения favicon. В ее функционал входит:

  • Автоматическая установка favicon
  • Изменение favicon, в зависимости от каких-либо событий
  • Счетчик, с возможностью смены стиля, прямо в favicon
  • Динамическое изменение title страницы

Читать полностью »

в 11:28, , рубрики: canvas, favicon, javascript, javascript library, метки: , , ,

Tinyicon это небольшая библиотека для манипуляции с favicon сайта для передачи информации о новых событиях. Для браузеров не поддерживающих canvas счетчик отображается в title страницы.

image

Читать полностью »

Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js