что это, для чего нужен, форматы favicon
#МаркетингFavicon — иконка сайта, в переводе «значок для избранного» (FAVorite ICON). Обычно Favicon сайта отображает логотип компании, первую букву ее названия или какое-либо изображение, характеризующее тематику/направленность сайта.
Где можно встретить Favicon и для чего он нужен
Фавикон можно увидеть:
- на открытой вкладке в браузере около названия страницы или сайта;
- в браузерной истории;
- в панели закладок;
- в панели «Избранное»;
- в мобильной и обычной выдаче поисковых систем.
Неважно, где именно вы увидите Favicon, ведь главная его задача — привлечь к себе внимание, запомниться и в будущем ассоциироваться с конкретным сайтом.
Favicon используется для повышения узнаваемости бренда, отличает его от конкурентов, создает эффект законченного, полноценного веб-проекта.
Фавиконы любимых сайтов запоминаются очень быстро.
Доступные форматы и основные параметры Favicon
У Favicon есть общепринятые форматы и ограничения, о которых должен знать каждый веб-мастер. В противном случае иконка сайта будет отображаться некорректно.
Самый известный, но уже немного устаревший формат Favicon — ICO. Плюсы этого формата заключаются в том, что в одном файле может одновременно храниться сразу несколько иконок разного размера.
Размеры — второй важный параметр для Favicon. Ранее иконки сайтов могли иметь размеры лишь 16 на 16 пикселей. А современные браузеры поддерживают изображения размерами 32 на 32 пикселя.
Для создания Favicon в интернете есть множество онлайн-сервисов — генераторов. Иконка для сайта может быть разработана в каком-либо графическом редакторе.
Поддержка браузерами
Ранее браузеры поддерживали исключительно ICO-формат, но сегодня веб-мастера могут использовать более широкий набор форматов Favicon:
- png;
- svg;
- gif;
- jpeg.
Исключение — браузер Internet Explorer 10 версии и более ранних. Он поддерживает исключительно формат ICO.
Все остальные современные браузеры (по типу Google Chrome, Mozilla Firefox и т. д.) могут работать с анимированными Фавикон формата png. И такое решение позволяет владельцам сайтов еще сильнее выделять свои ресурсы среди конкурентных.
Анимированные png-иконки сайтов отличаются высоким качеством изображения, которое не страдает ни в мобильном, ни в десктопном браузере. Основной недостаток иконок формата svg, gif, jpeg заключается в том, что не каждый браузер их поддерживает.
И если рассмотреть, например, svg-фавикон, то он тоже отличается высоким качеством изображения и может масштабироваться без его потери. Теперь все дело остается за браузерами, которые постепенно начинают поддержку иконок сайтов форматов svg, gif и jpeg.
Обновление системы иконок Spotify: почему и как произошли изменения
Новый образ в новом году! Если вы еще не видели, мы находимся в процессе развертывания обновленных иконок как в мобильных, так и в десктопных приложениях.
Текущий набор иконок был с нами с момента последнего редизайна, прошедшего в 2016 году. Хотя они хорошо служили нам, недавно мы поняли, что их необходимо обновить, чтобы привести в соответствие с эволюцией нашего визуального языка.
Определение проблемы
Чтобы обновить иконки, одна из наших команд по дизайн-системе Encore Foundation, объединилась с Робом Бартлеттом, опытным иконографом, который работал над редизайном 2016 года. Вместе мы определили ключевые проблемы, которые необходимо было решить:
Вес и толщина штрихов были слишком тонкими
Мы хотели пересмотреть вес наших иконок, основываясь на нескольких аспектах:
- В ходе эволюции нашего визуального языка за последние несколько лет мы все чаще заменяли текстовые кнопки на иконки, и делали их более заметными.
- Вдобавок ко всему, мы также увеличили размер и вес типографики, из-за чего тонкие иконки выглядели немного непропорционально.
- Самое главное, мы увидели возможность улучшить читабельность иконок, особенно когда они расположены поверх множества разных фонов.
У нас было несколько разных наборов иконок, которые нужно было объединить.
Со временем системы Encore разошлись, и мы решили создать новый набор, который мог бы вместить их все, сделав все более согласованным и простым в управлении.
Создание иконок и управление ими было не таким простым, как должно было быть
Мы увидели необходимость в целом упростить для команд систему иконок. Один из ключевых аспектов заключался в том, чтобы опираться на недавний переход на Figma, перенеся туда в полном объеме исходные файлы дизайна иконок и процессы их создания. Другой задачей было попытаться уменьшить количество размеров, которые нам приходилось создавать для каждой отдельной иконки, добавляемой в систему.
Обеспечение плавного перехода для всех
Мы хотели, чтобы это обновление казалось конечным пользователям плавным переходом. Именно по этой причине для подавляющего большинства иконок мы оставили текущую метафору нетронутой, чтобы пользователи могли найти свой путь, но наслаждались обновленным стилем иконок.
Так что нового?
Наряду с общим обновлением ключевое отличие заключается в том, что мы увеличиваем вес иконок, изменяя размер основного штриха. Мы перешли от 1px к 2px при размере иконки 24px.
Два более жирных размера: 24 и 16 пикселей
Мы увеличиваем толщину обводки и упрощаем систему иконок, поддерживая иконки только двух размеров:
24pxс размером обводки 2 пикселя (считается основным размером/размером по умолчанию)
16px с размером обводки 1,5 пикселя
Любые другие необходимые размеры будут масштабированными версиями этих двух размеров.
В результате получается более удобочитаемый и сбалансированный набор иконок и типографики.
Обновленный стиль во всем наборе
Мы объединили наборы, перерисовав каждую иконку в новом стиле с более толстыми штрихами. Подавляющее большинство иконок сохраняют ту же метафору, что и раньше.
Увеличена разница для активных состояний
Чтобы повысить ясность, активные состояния больше не используют только незначительные изменения веса, а вместо этого заполняют часть иконки.
Вот как мы это сделали
Партнерство с Робом Бартлеттом
Encore Foundation отвечает за все основные элементы языка дизайна Spotify. На несколько месяцев Роб Бартлетт присоединился к команде, чтобы обеспечить тесное и успешное сотрудничество.
Определение нового веса иконки
Одним из ключевых шагов в этом процессе было определение веса иконки, который мы будем использовать в будущем. В основном мы использовали толщину обводки 1px и знали, что хотим ее увеличить, но насколько? Мы попробовали несколько разных вариантов. После нескольких итераций мы остановились на двух новых весах. В основу этого решения легло два ключевых аспекта:
Чтобы достичь наших целей, новые веса должны были быть заметно жирнее, чем раньше. С 1,5pxи 2pxмы увеличивали толщину обводки на 50% для размеров 16pxи 100% для размеров 24px.
Новые веса должны были облегчить создание новых иконок. Это означало, что нужно оставаться как можно ближе к значениям целых пикселей или полупикселей, с которыми дизайнерам будет легче и быстрее работать.
Какие размеры мы будем использовать в будущем?
В нашем предыдущем наборе иконок было более 220 значков и 5 вариантов размера для каждого, то есть 1100 отдельных активов. Цель обновления заключалась в том, чтобы максимально сократить количество отдельных активов, тогда команды смогли бы быстрее и проще добавлять их в систему.
Мы уже знали, что Encore Web успешно перешел на использование иконок только размером 24px, но мы также должны были учитывать потребности всей системы. Используя аналитику, мы могли ясно видеть, что 16 и 24 пикселя были наиболее часто используемыми размерами иконок!
Было обнаружено, что 16-пиксельные иконки в основном использовались в десктопных приложениях, и в любых случаях, когда иконки могут быть еще меньше, например, индикаторы загрузки. Чтобы в этих случаях уменьшение масштаба работало правильно, 16px иконки должны были использовать всю ширину и высоту пространства иконки.
Мы определили, что увеличение размера до 24px будет работать в подавляющем большинстве случаев, когда нужны иконки большего размера.
В конечном результате мы сократили количество вариантов размеров в системе до 40% от предыдущего количества, используя 2 размера вместо 5 — на 660 индивидуально нарисованных иконок меньше. В будущем, когда мы будем вносить дополнения или изменения в набор, выигрыш в эффективности будет иметь большое значение.
Оптимизация создания иконок с помощью Figma
Еще одна важная задача заключалась в том, чтобы передать как можно больше информации о новых иконках в Figma, так как теперь это наш инструмент по умолчанию. Это означало несколько вещей:
- Весь процесс добавления иконок задокументирован в Figma.
- Все рекомендации по использованию новой структуры и визуального стиля доступны в Figma.
- Когда команды отправляют иконки, мы призываем их также делиться исследованиями, которые привели к окончательному дизайну. Это означает, что мы можем сформировать коллективную историю исследований, посвященных иконкам, в непосредственной близости от того места, где размещены все иконки.
- Для всех иконок доступны редактируемые исходные векторные версии, рядом с оптимизированными версиями, используемыми в производстве. Это означает, что любой дизайнер может легко использовать существующие иконки, когда рассматривает возможность добавления или редактирования системы иконок.
Благодаря тесному сотрудничеству с разработчиками нам также удалось автоматизировать почти все аспекты создания кода и активов, необходимых для различных платформ.
Что дальше?
Мы рады, что теперь все могут увидеть обновленные иконки в наших мобильных и десктопных приложениях, и они начнут постепенно появляться на других платформах в течение этого года.
Просматривайте тысячи изображений 16×16 для вдохновения в дизайне
Пользовательские значки
Набор крошечных иконок・16×16 px
Иконки 16×16
Исследование иконок
Iconset Digiwerft
Пользовательский интерфейс (16×16) — набор основных значков (wip)
Несколько иконок 16×16
50 бесплатных бизнес-иконок
50 бесплатных блочных значков
Набор мини-значков
Иконки Seolib.
ruзначки записи экрана Google Chrome
Tumblr — крошечные значки
Больше значков 16×16
Grassland Top Down Набор тайлов Pixel Art
16×16 Игровые ресурсы подземелья с видом сверху
Значки меню редактора классов
Набор значков продукта
Железный человек | Значок 16×16 пикселей
- Просмотр Бесплатный набор иконок — Pixel perfect 16×16 пикселей
Бесплатный набор иконок — Pixel perfect 16×16 пикселей
[2015] Иконки в стиле MS Office
Моноширина | Значок 16×16 пикселей
Консоли OpenEmu @2x Раунд 2
Google Fit | Значок 16×16 пикселей
ruЗарегистрируйтесь, чтобы продолжить или войдите в систему
Идет загрузка еще…
Учебное пособие по дизайну иконок — Дизайн иконок 16×16 Pixel
Маленькие значки, такие как 16×16 пикселей, часто игнорируются в дизайне значков, хотя, по моему мнению, именно в этом заключается настоящее мастерство.
В большинстве случаев простое уменьшение крупного значка не сработает, и часто поэтому для значков размером 16 × 16 пикселей допустимо рисовать их в немного другом, более двухмерном стиле, чем значки больших размеров.
При разработке небольших значков размером 16×16 пикселей я предпочитаю создавать их в Adobe Photoshop с помощью инструмента «Карандаш». Обратите внимание, что вы не можете просто нарисовать свою иконку, как вы можете, когда у вас есть больше доступного пространства в пикселях, вам на самом деле нужно построить ее из отдельных квадратных блоков, поэтому каждый пиксель очень важен. Понятно, что с помощью пикселей можно легко создавать горизонтальные и вертикальные линии и прямоугольные формы, но все остальное сложно. По этой причине мы склонны рисовать очень маленькие значки во фронтальной проекции.
В следующем учебном пособии по созданию значков показан пример небольшого значка папки, нарисованного в Photoshop, оптимизированного для размера 16×16 пикселей.
Сначала нарисуйте контур фигуры.
Выберите цвет для рисования, установив цвет переднего плана. В разделе «Рисование» на панели инструментов выберите инструмент «Карандаш». Задайте размер кисти — 1 пиксель, а затем перетащите в пределах изображения для рисования.
Чтобы нарисовать прямую линию, щелкните начальную точку на изображении. Затем, удерживая нажатой клавишу Shift, щелкните конечную точку.
Второй , покрасить внутри.
Чтобы заполнить часть изображения, выберите область одним из инструментов выделения. В противном случае градиентная заливка применяется ко всему активному слою. Выберите инструмент «Градиент». На панели параметров инструмента выберите тип линейного градиента. Установите цвет переднего плана на темно-желтый, а фон на светло-желтый. На изображении поместите указатель в то место, где вы хотите установить начальную точку градиента, и перетащите его, чтобы определить конечную точку.
Чтобы ограничить угол градиента кратным 45°, удерживайте нажатой клавишу Shift при перетаскивании.
Далее нарисуйте переднюю часть папки.
Теперь , нарисуйте блик и тень.
Создайте новый слой. Нарисуйте белую внутреннюю верхнюю границу толщиной 1 пиксель, чтобы создать эффект подсветки, и установите непрозрачность 50% для этого слоя. Затем на новом слое нарисуйте среднюю желтую внутреннюю нижнюю границу и выберите режим наложения «Умножение».
Вы можете увидеть различные этапы процесса создания значка в анимации 1:1 ниже:
Нужна помощь, чтобы значки размером 16 x 16 пикселей выглядели великолепно? Мы можем помочь!
Создайте крошечные значки
Наконец , сгруппируйте все слои.
В палитре «Слои» выберите все слои со значком папки и нажмите Ctrl+G (Windows) или Cmd+G (Mac OS), чтобы сгруппировать все слои в папку.
Часто бывает необходимо нарисовать дополнительный элемент или «глиф» в дополнение к основному элементу значка, чтобы придать значку дополнительную функцию, например, «открыть», «закрыть» и т. д.
Итак, создайте новый слой и нарисуйте маленькую стрелку. Теперь вы можете просто скопировать основной значок, такой как папка или страница, и поместить, например, стрелку сверху.
Когда вам нужно создать 16×16 или уменьшенную версию более крупного значка, простое уменьшение может привести к ряду проблем, наиболее распространенной из которых является изображение со слишком большим количеством деталей, которое просто выглядит размытым.
Идеальный маленький значок должен быть создан с нуля, а большой значок должен использоваться только в качестве основного ориентира. Не забывайте оставлять только основные компоненты изображения (крупные и, при необходимости, второстепенные объекты), любые мелкие детали следует отбрасывать, если они не критичны для общего образа/концепции.
