Размер иконки: Выбираем правильный размер и формат иконок – Иконка для своего приложения Windows. Стандартные размеры иконок

Выбираем правильный размер и формат иконок

Иконка для своего приложения Windows. Стандартные размеры иконок

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

Если изображение будет одно и маленькое, то иконка будет выглядеть некрасиво, пойдет квадратными пикселями.

То же самое касается и иконки для формы приложения, хотя на самой форме корректно будет отображаться и маленькая иконка 16×16 пикселей, при переключении по Alt+Tab уже будет заметно и некрасиво.

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

Еще момент — изображение должно, очевидно, быть квадратным.

Нарисовали, теперь нужно получить несколько изображений стандартных размеров:

— 16×16
— 32×32
— 48×48
— 256×256

Где-то читал рекомендацию, что нужен значок еще 128×128, но на практике пока не заметил, чтобы его наличие было критично.
Для Windows 7 и выше обязательно нужен значок 48×48
Обратите внимание, что размер значка рабочего стола по умолчанию в XP был 32×32, а в Windows 7 — 48×48

В значки для формы, а не для иконки экзешника, лучше не включать значок 256×256 в том случае, если приложение должно работать на XP.
В остальных случаях XP игнорирует значок 256×256, но ничего плохого при этом не происходит, а вот если такой значок используется для формы, то приложение может упасть.

Известно, что в одном файле ICO могут храниться несколько изображений разных размеров. Для сборки есть много приложений и онлайн-сервисов, но мы пользуемся простой бесплатной программкой icon sushi Копия

Пользоваться очень просто.
1. Открываем все нужные изображения
2. Выделяем их в окне программы:

3. Сохраняем иконку (File — Save as Multiple Icon)

ЗЫ. Чтоб два раза не вставать.
Кто-то просил картинки-кнопочки от XuliOrganizzer’а
Так Леша выложил картинки на Github

Это репост с сайта http://tolik-punkoff.com
Оригинал: http://tolik-punkoff.com/2018/02/23/ikonka-dlya-svoego-prilozheniya-windows-standartnye-razmery-ikonok-i-kak-sdelat-ico-fajl-s-neskolkimi-izobrazheniyami/

10 ошибок в дизайне иконок / Habr

Иногда в рамках одного набора встречаются слишком похожие друг на друга иконки и очень трудно понять, «что есть что». Если не читать подписи, то можно очень легко ошибиться и перепутать значки.

Иконки из раздела Utilities в Mac OS X. Я постоянно путаю их и запускаю не то приложение.

Проблема усугубляется, если включен мелкий размер отображения значков.

#2 Слишком много элементов в одной иконке

Чем иконка проще и лаконичнее, тем лучше. Очень желательно, чтобы количество объектов в одной иконке было бы минимальным.

Но дизайнеры компании Microsoft, вдохновленные новым форматом иконок в операционной системе Windows Vista, решили не мелочиться и нарисовали «на все деньги»:

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

#3 Лишние элементы

Иконка должна легко «читаться». Чем меньше на ней элементов, тем лучше. Желательно, чтобы значимым было все изображение, а не только его часть. Поэтому необходимо обращать внимание на контекст, в котором будут использоваться иконки.

Возьмем для примера набор иконок для работы с базой данных:

На первый взгляд все вполне прилично.

Но если в приложении (или в отдельном тулбаре) все действия происходят только с базой данных, то мы можем (и должны) убрать незначимую часть:

Смысл не потерян, но значки стали более различимыми.

Вот реальный пример использования лишних элементов в иконках BeOS 5:

Галочки тут совершенно не нужны. Кстати, почему они красные?

#4 Нет стилевого единства набора

Именно общий стиль объединяет несколько иконок в набор. Объединяющими факторами могут быть: цветовая гамма, перспектива, размер, техника рисования или же комбинация этих свойств. Дизайнер может держать эти правила в голове, если иконок в наборе немного. Если же иконок много и над ними работают разные дизайнеры (например, иконки для операционной системы), создаются специальные инструкции. В этих инструкциях подробно описывают, как нарисовать иконку, чтобы она гармонично вписалась в набор.

Буйство стилей в файле shell32.dll из Windows XP. Именно этот набор иконок предлагается по умолчанию пользователю, который хочет сменить иконку.

#5 Ненужная перспектива и тени в мелких иконках

Прогресс не стоит на месте: в интерфейсах появилась возможность использовать полупрозрачность, пропали ограничения на количество цветов, плюс появилась мода на трехмерность. Но пошло ли это не пользу? Не всегда! Особенно, если речь идет о иконках размером 16×16 и меньше.

Для примера возьмем менеджер приложений из GNOME 2.2.0 (RedHat 9):

Перcпектива в иконках такого маленького размера совершенно не нужна и даже вредна.

А вот менеджер приложений из Windows XP:

По стандарту иконке в Windows XP положена двухпиксельная черная тень. Но в размере 16х16 тень получается слишком большой и выглядит «грязно». Особенно неудачно выглядит иконка Address book.

#6 Слишком оригинальные метафоры

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

Примером такой излишней оригинальности может служить иконка корзины в OS/2 Warp 4, которая не корзина вовсе, а шредер.

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

#7 Нет учета национальных и социальных особенностей

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

Предположим, нам нужно нарисовать иконку приложения для работы с электронной почтой. Логично использовать метафоры реальной бумажной почты. Например, почтовый ящик.

Изображения позаимствованы из статьи про почтовые ящики в Wikipedia.

Ответ можно найти в руководстве по созданию иконок для Mac OS X: используйте универсальные и легко узнаваемые изображения. Не фокусируйтесь на второстепенных аспектах элементов. Пример: для иконки электронной почты предпочтительнее будет использовать изображение почтовой марки, чем трудноузнаваемого почтового ящика.

Идея с маркой отличная, но изображение орла — крайне спорный момент. Хороших вестей такая птичка не принесет.

Однако, нужно учитывать не только национальные особенности. Позволю себе вспомнить один курьезный случай. Была нужна иконка фильтра данных, метафорой для которого зачастую является воронка, её и нарисовали:

Ответ клиента был таков: «Мне не совсем понятно, почему вы нарисовали иконку фильтра в виде бокала для мартини!».

#8 Изображения реальных элементов интерфейса в иконках

Руководство по созданию иконок для Mac OS X предостерегает нас: не используйте в иконках элементы реального интерфейса. Но все напрасно! Например, можно увидеть вот такую иконку:

Или вот интересный пример из интерфейса браузера OmniWeb:

Обратите внимание на кнопки «Previous» и «Next». Редкий вид кнопок с подписями снизу! Ой! А они и не кнопки вовсе, а иконки!

#9 Текст внутри иконок

Эта ошибка чаще всего бывает в иконках приложений. Действительно, первое что приходит в голову — сделать иконку приложения из логотипа приложения. Чем же плох текст внутри иконки? Во-первых, он жестко привязан к языку и локализация затруднена. Во-вторых, если иконка мелкая, текст невозможно прочитать. В-третьих, в случае иконки приложения этот текст продублирован в виде названия приложения.

#10 Мимо пикселей

Как правило, эта проблема появляется, если рисовать иконки в векторном редакторе. В большом размере все выглядит красиво и четко. Но в реальности иконки мелкие и при растеризации анти-алиасинг «размывает» границы объектов.

Источник — http://turbomilk.ru/
Или с мого блога — http://mmaxis.info/

5 советов как выбрать иконки для сайта

Мир диджитал не стоит на месте, каждый год, месяц и даже день появляются новые тренды. И как же в этом многообразии направлений выбрать нужный стиль иконок для вашего сайта ?

Чем руководствоваться и как не оттолкнуть свою аудиторию?

Рассмотрим ответы на эти и другие вопросы в нашей сегодняшней статье.

1. Аудитория сайта

Для чего вообще нужны иконки на сайте?

Иконки должны акцентировать внимание на важных вещах и отражать ваши преимущества. Соответственно выбор иконок должен исходить в первую очередь из анализа целевой аудитории вашего сайта.

Например, пенсионер не поймет современных градиентных или залитых и слишком сложных по композиции иконок, так же как и молодая аудитория не воспримет с восторгом объемные, вышедшие из моды иконки.

Общие рекомендации по подбору стиля иконок основываясь на целевой аудитории вашего сайта:

• Не используйте современные , креативные и «сложные» иконки , если аудитория вашего сайта 45 +
• Для молодежных проектов, старайтесь подобрать креативные и яркие иконки
• Если вы не уверены или еще не выяснили свою целевую аудиторию – правильным выбором будут современные иконки, но в приглушенных постельных тонах. Они не отпугнут возрастную аудиторию, кричащими цветами и сложной композицией и не заставят думать молодую аудиторию, о том, что ваша компания застряла в 2000-х годах

2.Стиль иконок

Условно мы можем поделить иконки на три большие группы

• Контурные (другие названия — строуковые, лайновые )
• Залитые (градиентом, сплошным цветом, двумя цветами и тд.)
• Объемные иконки которые долгое время были на всех сайтах во время движения стиля скевоморфизм. Самый яркий представитель – apple со своими первыми версиями ios.

Выбор стиля иконок зависит от наполнения сайта, общей композиции и направления вашей деятельности.

Если ваш сайт минималистичен и лаконичен, вы можете использовать залитые иконки, чтобы акцентировать внимание на важном.

Если ваш сайт корпоративный и строгий — рекомендуем контурные легкие иконки, которые подчеркнут ваш стиль и строгость.

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

Однако, если вы питаете симпатию к объемным иконкам, вы можете использовать вместо плоских иконок, 3D модели.

Это оживит ваш дизайн и не будет смотреться старомодно.

3.Функциональность иконок

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

Они должны наглядно показывать смысл текста/ действия к которому они относяться.

Зачастую неправильно подобраные иконки просто запутывают пользователя и он уходит с вашего сайта так и не разобравшись, «куда нажать и что делать».

Выбирайте иконки учитывая их функциональность и ваши пользователи будут вам благодарны.

4. Единство иконок и стиля

При выборе иконок для вашего сайта, так же следует помнить о таких важных вещах, как :

• Иконки должны сочетаться с вашим сайтом. Если у вас строгий сайт, в легком, серо-белом цвете, не стоит выбирать кричащие, сложные и слишком яркие иконки.
• Если вы не заказываете у дизайнера иконки для вашего сайта, а выбираете сами, запомните, что иконки должны быть стилистически одинаковые на всем сайте.
• Если вы выбрали залитые иконки, то все иконки должны быть такими.
• Если вы выбрали иконки «рваные» — когда в некоторых местах обводка иконки прерывается, значит на всех иконках обводка должна быть прерывистой.

Это самый простой пример, на самом деле нюансов в соблюдении стиля очень и очень много, это и толщина обводки, скругление углов, построение композиции, общность элементов и многое другое.

Соблюдая эти простые правила и сравнивая иконки между собой, вы спустя время научитесь видеть общность стиля у иконок.

5. Размер иконок

Да, размер имеет значение.

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

Слишком маленькие иконки, для рассмотрения которых хочется достать лупу, так же, ничего хорошего для вашего сайта не сделают.

Самая большая ошибка – это композиционно сложные, многоцветные иконки в маленьком размере, что толку, от того, что в ваших иконках отображена чуть ли не улыбка моны- лизы, если пользователь просто не разглядит ваше произведение искусства ?

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

Вот и все !

Не сомневайтесь, соблюдая эти простые советы вы подберете для вашего сайта идеальные иконки.

Как создать иконки для приложений на Android и iOS

Иконка приложения для Android

1. Разрешение экранов устройств

Приложения для Android разрабатываются с учетом размера устройства и разрешения экрана.

Графика и разметка в приложениях измеряются в единицах — DPI (количество точек на дюйм).

2. Категории DPI

• Low DPI (LDPI) = 120DPI
• Medium DPI (MDPI) = 160DPI
• High DPI (HDPI) = 240DPI (Nexus S, SGS2)
• Extra High DPI (XHDPI) = 320DPI (Galaxy Nexus, Nexus 4, SGS3)
• Extra Extra High DPI (XXHDPI) = 480DPI (HTC One и SGS4)

Размер и формат иконок запуска приложения (launcher icon) для Android

Иконка приложения должна разрабатываться специально для Android. Используйте инструкции по разработке иконок от Android в стиле Material Design, не подражайте визуальным элементам и стилям других платформ.

Главное:

Иконка запуска приложения должна быть 32-битной, в формате PNGs с альфа-каналом (с прозрачным фоном).

Базовый размер — 48dp, с краями 1dp — для низкого разрешения. Чем выше плотность пикселей экрана (DPI), тем больше отображается деталей. Для остальных разрешений нужно увеличить масштаб на 400% 192 x 192 dp (с краями 4dp).

Хотите идеальную иконку для любого разрешения и не ищете легких путей? Сделайте несколько иконок разных размеров для всех вариантов разрешений, воспользовавшись таблицей ниже. Можно включить дополнительные значения для последовательного увеличения размеров. Например, иконки 96 x 96 пикселей xhdpi могут содержать промежуточный размер 88 x 88 пикселей с отступами в 4 пикселя с каждой стороны. Отступы образуют легкую тень и гарантируют четкость иконки на любом фоне.

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

Иконки приложения для публикации на Google Play

Иконка приложения для публикации в Google Play должна быть 512 x 512 пикселей, с высоким разрешением.

Эта иконка используется только для Google Play и не заменяет иконку запуска приложения (launcher icon). Иконка публикации на Google Play должна содержать тот же контент, что и иконка запуска приложения, за исключением некоторых идентификационных знаков.

Раздел “Рекомендуемые”

В разделе «Рекомендуемые» можно продемонстрировать потенциальным пользователям графические возможности приложения. 

Требования к иконке в разделе «Рекомендуемые» :

• JPEG или 24-битный PNG (без альфа-канала)
• 1024 х 500 пикселей

Расположение

Картинка для раздела «Рекомендуемые» располагается над сведениями о приложении в Play Маркете. Если загружен проморолик, поверх нее будет расположена кнопка «Воспроизвести».

Советы

• Не размещайте важную информацию по краям, особенно в нижней трети рамки.
• Логотип поместите по центру, выровняйте по горизонтали и вертикали.
• Для текста используйте крупный шрифт.
• Помните, что картинка может показываться отдельно, без иконки приложения.

Цели иконки приложения

У иконки приложения есть 3 основных цели:

1. Продвижение бренда, рассказ о цели приложения.
2. Помощь пользователю в поиске приложения в Google Play.  
3. Функция запуска.

Продвижение бренда

Создайте уникальную и незабываемую иконку. Используйте цветовую схему Вашего бренда. Не пытайтесь рассказать слишком много с помощью иконки. Простой значок производит лучшее впечатление. Не включайте название приложения в иконку — название будет всегда показываться рядом с иконкой.

Образцы иконок приложений.

Помогите пользователю найти приложение в Google Play

Иконка должна привлекать внимание пользователя во время скроллинга. Качественный дизайн иконки — однозначный сигнал, о том, что Ваше приложение такого же высокого качества.

Для разработки иконки приложения лучше обратиться к дизайнеру.

Правила дизайна иконки для Android

• Смотрится детально и четко в небольшом размере.
• Сочетается с любым фоном.
•  Освещается верхней подсветкой.  
• Может быть уникальной формы.
• Не является обрезанным вариантом большего изображения.
• Имеет одинаковый вес с другими иконками.

Для 3D-иконки:

• Перспектива не противоречит другим иконкам.
• Располагается ее по ходу движения.
• Имеет небольшую глубину.

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

Правильно и неправильно

Иконка для приложения на iOS

Размеры 

У каждого приложения должна быть маленькая и большая иконка. Маленькая иконка используется на домашнем экране и в системе после установки. Большая иконка нужна для App Store.

Устройство или контекст

Размер иконки

iPhone 6s Plus и выше, iPhone 6 Plus и выше

180x180px

iPhone 6s и выше, iPhone 6 и выше, 
iPhone SE и выше

120x120px

iPad Pro

167x167px

iPad, iPad mini

152x152px

App Store

1024x1024px

Необходимо создать несколько маленьких иконок разных размеров для различных устройств. Маленькая и большая иконки должны соответствовать друг другу, но могут различаться количеством деталей.

Также маленькие иконки нужны для показа:

• в поиске Spotlight,
• в приложении настроек смартфона.

Если у вас нет маленьких иконок, iOS уменьшит главную иконку приложения для показа в этих директориях.

Устройство

Размер иконок 
в поиске Spotlight

Размер иконки настроек

iPhone 6s Plus и выше, 
iPhone 6 Plus и выше

120x120px

87x87px

iPhone 6s и выше, iPhone 6 и выше, 
iPhone SE и выше

80x80px

58x58px

iPad Pro, iPad, iPad mini

80x80px

58x58px

Внимание:

не добавляйте к иконке настроек наложение или границу. iOS автоматически добавляет отступ на 1 пиксель ко всем иконкам, чтобы они хорошо смотрелись на белом фоне в параметрах настройки.

Правила дизайна иконки для iOS:

Подкупающая простота

Найдите элемент, который передает суть приложения и поместите его в простую, запоминающуюся форму. Аккуратно добавьте детали. Слишком сложные содержание или форма иконки плохо различимы, особенно в уменьшенных размерах.

Четкий фокус

Создайте иконку с четким фокусом, который привлекает внимание и идентифицирует приложение.

Узнаваемость

Никто не будет анализировать иконку, чтобы понять ее значение.

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

Без прозрачности, простой фон

Иконка должна быть без прозрачности, фон не загроможден. Простой фон не подавляет другие элементы рядом.

Без надписей

Используйте надписи только как часть логотипа. Название приложения появляется под иконкой на домашнем экране. Не добавляйте в иконку слова, которые повторяют название или являются инструкциями к приложению, например, “Смотри” или “Играй”. Если дизайн иконки включает слова, добавьте только значимые для содержания приложения.

Без фото, скриншотов и элементов интерфейса

Не включайте в иконку фотографии, скриншоты или элементы интерфейса. Детали на фотографии сложно рассмотреть в маленьком размере. Скриншоты не расскажут о цели приложения. Элементы интерфейса в иконке вводят пользователя в заблуждение.

Без точных копий продуктов Apple

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

Не помещайте повсюду в интерфейсе иконку приложения

Пользователя может сбить с толку иконка приложения, встречающаяся повсюду в интерфейсе. Просто используйте цветовую схему иконки в интерфейсе. См. Цвет.

Протестируйте иконку на разных обоях

Люди выбирают различные обои для домашних экранов, поэтому вы должны протестировать иконку приложения на различных фонах.

Сохраняйте углы иконки квадратными

Система округляет углы иконки автоматически.

Вот и все! Желаем удачи и много красивых иконок для ваших приложений.

Размер фавикона для сайта

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

Такой мелочью может стать, например, фон кнопки, неправильно подобранный шрифт какого-то небольшого элемента и даже фавикон. И вправду, посмотрите сами- крупные, известные сайты имеют индивидуальную иконку, которая обозначает его в разделе “Закладки” в браузере пользователя. Без нее разработчикам ресурса не удалось бы создать ту композицию, к которой они стремились изначально.

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

Иконка сайта

Сперва определимся, что же представляет собой этот элемент. Прямо сейчас взгляните на название вкладки вашего браузера. Как видите, слева от него есть маленькое изображение, обозначающее упрощенную версию логотипа ресурса. Такая же картинка есть и возле названия сайта, отображенного в результатах поисковой выдачи. Именно на нее ориентируется пользователь, когда видит титул.

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

Предназначение фавикона

Итак, картинка возле заголовка сайта служит для идентификации. Это ее первоначальное предназначение: выразить сайт, назание которого мы видим, и выделить его в глазах остальных. Делается это максимально просто за счет использования графики: мы интуитивно воспринимаем информацию в картинках гораздо быстрее и легче, чем в текстовом формате. Фавиконы способствуют нам в этом. Но не стоит забывать, что размер фавикона минимален в глазах пользователя. Это не логотип в “шапке” сайта, который может содержать дополнительные сведения в виде надписей, каких-то уточнений или контактной информации. Все, что может быть изображено в иконке возле названия, должно максимально подходить под размер фавикона. А он, как уже было обозначено, просто миниатюрный (всего 16 на 16 пикселей).

Как подобрать фавикон?

Так каким же образом вебмастер может разработать иконку для своего сайта? Следует заметить, что просто сжать логотип сайта, чаще всего, не получится. На эмблемах, которые ставят в виде лого того или иного ресурса, зачастую видны разные элементы, которые не всегда будут корректно отображаться в миниатюрном виде. Лучше сразу же отказаться от такой затеи.

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

Многие используют в виде фавикона стилизованную первую букву названия сервиса. Так поступают, например, Bing, Yahoo, Yandex, Wikipedia, Google. Есть и другой подход — если у вас короткое имя сайта, можете установить его в качестве фона своей иконки. Чтобы размер фавикона (в пикселях он достигает, повторю, 16 на 16 точек) позволял корректно показывать эту надпись, она должна быть не длиннее 3 букв. Так поступает, например, сервис Aol.

Как создать фавикон?

Сделать иконку для названия сайта можно несколькими способами. Конечно же, самый простой — это работа с разными готовыми решениями. Речь может идти о каких-нибудь сервисах или программах, которые позволяют из полноценного изображения сделать иконку путем уменьшения его. Однако, я бы рекомендовал заняться разработкой такого логотипа собственными силами. Это, во-первых, даст возможность чему-то научиться; а во-вторых, предоставит большее количество инструментов. Все, что вам нужно будет уметь для этого -что рисовать, а также знать, какого размера фавикон должен быть в конечном варианте. О размере иконки для сайта мы поговорим чуть позже, а пока отметим некоторые тонкости работы с такими изображениями. В частности, не упоминая размер фавикона для сайта, следует уточнить формат такого изображения. Как отмечают опытные дизайнеры, картинка должна быть сохранена в виде .PNG (24-битном), либо же как файл.ICO.

Произвести сохранение картинки можно, например, при помощи Photoshop, где и будет рисоваться эмблема.

Размеры фавикона

Итак, теперь поговорим о том, насколько большой должна быть картинка, которую мы видим рядом с названием сайта в поисковой выдаче. По умолчанию, как уже говорилось, ее размер составляет всего 16 пикселей (по каждой из сторон). Однако если вы попробуете редактировать это изображение в “Фотошопе”, сами убедитесь в том, насколько это неудобно. Поэтому рекомендуем работать с увеличенной картинкой, которую в дальнейшем можно будет просто сжать по краям и сохранить в требуемом формате.

Мультиплатформенность

Однако говоря о том, какого размера фавикон должен быть на вашем сайте, нужно помнить еще одну вещь. Не все платформы отображают картинку ресурса одинаково. Например, устройства с Retina-дисплеем “видят” ваш фавикон в размере 32 на 32 пикселя. А в Safari и на новой платформе Windows, и вовсе, эти иконки достигают размера 64 пикселей.

Поэтому рекомендуем сохранить разные версии иконки и в дальнейшем просто предусмотреть ее изменение в зависимости от платформы пользователя. Еще один интересный момент — можно попробовать загрузить иконку в наибольшем формате, рассчитывая на то, что она будет “сжиматься” в зависимости от браузера.

Посторонние редакторы

Конечно, хорошо, если вы разбираетесь в Photoshop и знаете, какой размер фавикона должен быть и как его достичь, сохраняя свое изображение. Однако есть масса новичков, которые просто не сталкивались с графическими редакторами настолько плотно раньше, поэтому не могут так просто нарисовать нужное изображение. Чтобы помочь таким вебмастерам, существуют различные сервисы, позволяющие в автоматическом режиме делать интересующую вас иконку. Многие из них даже бесплатны, что и вовсе не требует никаких вложений со стороны пользователя.

Для работы иногда нужно лишь зарегистрироваться, но, как вы понимаете, делается это единожды — ведь не так часто компании меняют фавикон. Взгляните хотя бы на Google, который каждый день изменяет логотип, но не трогает иконку.

Как установить фавикон?

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

Для этого полученное изображение необходимо сохранить с именем favicon.ico и поместить в корень своего ресурса. Все, теперь ваше изображение станет распознаваться автоматически, и по происшествии некоторого времени оно будет привязано к вашему сайту.

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

<link rel=»shortcut icon»href=»адрес иконки” />

Установить код следует в шапку сайта.

Выводы

Итак, прочитав нашу статью, вы разобрались с тем, какого размера должен быть фавикон для сайта и что это вообще такое. Также, я думаю, вы поняли, что поиск подходящей иконки для вашего ресурса — это необходимость, ведь это играет вам на руку как с точки зрения повышения узнаваемости, так и в плане какого-то дополнительного выделения среди ваших конкурентов. По крайней мере, крупнейшие сайты поступают таким же образом, что можно брать в качестве яркого примера. Да и потом, усилий это особых не вызывает — сделав фавикон раз и установив его правильно на свой сайт, вы можете забыть о нем на следующие несколько месяцев.

Поэтому смело экспериментируйте, придумывайте что-то новое, старайтесь — и все получится!

Требования к иконкам для приложения для Android \ AndDev \ Сообщество разработчиков для Android

Помните, что изменения происходят достаточно часто с каждым крупным релизом, так что всегда стоит проверять текущие гайдлайны

Плотность экрана

Для иконок существует пять различных значений плотности экрана. Иконки с более низким разрешением создаются от базовой.

Иконки приложения (Launcher icons)

Иконки в ActionBar, Dialog и Tab

Иконки контекстного меню (Small Contextual Icons)

Иконки уведомлений (Notification icons)

Большую коллекцию иконок в стиле Material Design вы можете найти здесь