Иконки с прозрачным фоном: Иконки прозрачный — 1,005 бесплатных иконок

13.04.2021 Facebook Twitter LinkedIn Google+ Разное

Как сделать иконку favicon.ico для своего сайта

Подробные инструкции / Создание сайтов

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

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

Иконки favicon появляется рядом со ссылкой в результатах поиска, например, в Яндексе:

Иконки favicon отображаются перед адресом просматриваемого сайта почти во всех браузерах, в Избранном или Закладках браузера:

Теперь научимся делать такие иконки для своего сайта или блога. Для этого нам понадобятся программы Adobe Photoshop CS3 и AWicons Pro. Если у вас нет этих программ и вы не знаете, где их можно бесплатно скачать, советую прочитать мою статью Чем бесплатно скачать любую программу.

1. Создаем в Photoshop или любом другом графическом редакторе иконку размером 16х16, сохраняем ее в формате GIF или PNG.

2. Открываем сохраненную иконку любой программкой для создания иконок и курсоров, например, AWicons Pro (она платная). Подобных бесплатных программ достаточно много, погуглите, скачайте и установите. Откройте программу и перетащите в нее заготовку своей иконки favicon. Если вы сохраняли иконку на белом фоне, в программе

AWicons Pro она выглядеть будет примерно так:

3. Если вид иконки устраивает, нажимаем F2 или Файл->Сохранить объект… и сохраняем иконку под именем favicon.ico:

Если фон favicon будет прозрачным, можно или сохранить в Фотошопе заготовку сразу с прозрачным фоном или удалить лишние пиксели в программе для создания иконок. Чтобы сделать прозрачный фон у favicon нужно изначально создать новый файл в Фотошопе с прозрачным фоном (Ctrl+N):

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

Саму иконку можно рисовать сразу в специальной программе, но лично мне удобнее в Фотошопе, да и возможностей по обработке картинки у Фотошопа несравнимо больше. Жаль только, что даже версия Photoshop CS3 не умеет сохранять иконки в формате ICO и приходится использовать специальные программы-конверторы. Но есть и второй способ, как при создании свой favicon.ico обойтись только Фотошопом.

После создания иконки favicon.ico ее нужно загрузить на свой сервер (Как загружать файлы по FTP) в корневую папку, где находится сайт и, желательно, во все подпапки.

После этого в HTML-шаблон своего сайта нужно добавить код вызова иконки. Это одна строчка между тегами HEAD:

1
2
3

<head>
      <link rel=»shortcut icon» href=»favicon.ico»></link>
</head>

Все. Если иконка имеет имя и формат favicon.ico, она загружена в корень сайта и в области HEAD HTML-шаблона вашего веб-сайта есть строчка загрузки – фавикон будет отображаться рядом с адресом вашего сайта или блога.

Руководство по созданию Favicon для всех платформ в 2019 году

Добро пожаловать в руководство по проектированию favicon. В этой статье мы подробно расскажем, как создать идеальный favicon, с конкретными советами по созданию иконок для Apple Touch, Windows 8, Android, Chrome, Opera и Safari. Также вы найдете удобное руководство по различным размерам и форматам favicon.

Итак, во-первых, что такое favicon? Сокращенно от англ. FAVorite ICON — «иконка для избранного» – это маленькие символы, которые появляются в строке URL и списке закладок. Сегодня favicon расширяет бренд сайта за пределы окна браузера во многих контекстах, но мы вернемся к этому позже.

На заре Интернета, создание favicon заключалось в прикреплении ссылки на файл иконки размером 16x16px, и на этом все. В настоящее время все немного сложнее – существуют разные размеры и процессы для разных контекстов. Создание правильного favicon – это наука.

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

Мы будем использовать шаблон Apply Pixels, чтобы легко генерировать различные требуемые размеры иконок, а в качестве примера – иконку Apply Pixels.

Логотип Apply Pixels, который используется в качестве примера favicon в этой статье

1. Сделайте его узнаваемым

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

2. Используйте свой логотип

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

3. Он должен быть понятным

Есть также несколько моментов, которые вы должны избегать. Не используйте favicon в качестве маркетингового инструмента – это означает отсутствие ценников, баннеров «new» или «updated» и т. д. На самом деле, вообще не помещайте текст в favicon. Текст плохо масштабируется, и высока вероятность, что он будет неразборчивым. Наконец, не используйте фотографию – она ​​будет размытой и неузнаваемой в таком мелком размере.

4. Создайте две версии

Когда в Internet Explorer 5 впервые появились favicon, они появились в строке URL-адреса и в списке закладок. Сегодня они также отображаются во многих других контекстах, включая списки закладок, контекстные меню и даже домашние экраны мобильных устройств и телевизоров. Из-за этого довольно трудно прогнозировать, как ваш значок будет отображаться для конечного пользователя.

Чтобы ваш favicon выглядел хорошо в различных контекстах, вы должны предоставить его в двух стилях:

  • Логотип на прозрачном фоне.
     Эта версия отображается в строке URL-адреса, списках закладок и в других местах, где favicon отображается рядом с URL-адресом или именем вашего веб-сайта.
  • Логотип на фоне со сплошной заливкой: эта версия используется в сетчатых закладках и контекстных меню, где браузер или устройство применяет маску к фону, для достижения единообразного контекста.

5. Создание favicon для десктопного браузера

Давайте начнем с самого простого favicon, который вам нужно создать: классическая иконка для классических десктопных браузеров. Этот тип favicon лучше всего работает на прозрачных фонах, так как зачастую он отображается в строке URL и в списках закладок

Favicon в классическом стиле отображается на панели закладок и в строке URL в Google Chrome

Вам нужно будет предоставить этот тип иконки в трех размерах, все в формате PNG с прозрачным фоном:

  • 16×16
  • 32×32
  • 48×48

Добавьте этот favicon в HTML

, как показано ниже:

6.

Создание иконки Apple Touch

Apple iOS использует иконки Apple Touch для представления веб-сайтов, сохраненных на домашнем экране iOS, в качестве закладок. Это означает, что иконка Apple Touch, как все иконки приложений iOS, будет округлена c помощью маски в форме суперэллипса, называемого сквиркл (squircle).

Он также будет отображаться на любом фоне, который пользователь

выбрал для своего домашнего экрана. Поэтому ваша иконка Apple Touch должна иметь сплошную заливку фона.

Вы можете использовать иконку Apple Touch 180×180, которая автоматически масштабируется для различных размеров iPhone и iPad. Это подойдет для большинства случаев. Если нет, вы можете предоставить дополнительные размеры для различных устройств Apple

Favicon Apple должна быть в формате PNG. Вы можете использовать иконку Apple Touch 180x180, которая автоматически масштабируется для различных размеров iPhone и iPad. Это подойдет для большинства случаев.

Если нет, вы можете предоставить дополнительные размеры для различных устройств Apple:

  • 60×60
  • 76×76
  • 120×120
  • 152×152
  • 180×180 (Обязательно)

Добавьте этот favicon в HTML

, как показано ниже:

7. Плитка Windows 8 и файл browserconfiguration.xml

Хотя Windows 8 больше не поддерживается Microsoft, многие пользователи планшетов продолжают работать на этой ОС. В зависимости от вашей пользовательской базы, вы можете также создать favicon для этой платформы.

Вот как могла бы выглядеть favicon Apply Pixels, в качестве плиток Windows 8:

Плитка Windows 558×270 является единственным не квадратным favicon.

Windows 8 использует плитки для представления веб-сайтов в пользовательском интерфейсе. Всего поддерживается пять размеров, один размер для Windows 8.0 и четыре размера для Windows 8. 1.

Плитка Windows 8 состоит из двух компонентов:

  • Передний план: ваш favicon с прозрачным фоном.
  • Фон: фон плитки, сгенерированный Windows.

Все плитки Windows должны быть в формате PNG с прозрачным фоном. Это размеры, которые вам нужно использовать.

Для Windows 8:

  • 144×144

И для Windows 8.1:

  • 128×128
  • 270×270
  • 558×270
  • 558×558

Windows 8.0

Цвет фона указывается в HTML-тегах и файле browserconfig.xml, которые необходимо предоставить:

Windows 8.1

Включает browserconfiguration.xml в корневой каталог вашего сайта:

<?xml version=»1.0″ encoding=»utf-8″?>

#2b5797

Примечание: Указанные размеры favicon в файле browserconfiguration. xml не соответствуют размерам, указанным выше. Это связано с тем, что в целях масштабирования Microsoft рекомендует предоставлять изображения, размер которых превышает стандартные размеры плитки.

8. Android, Chrome и Opera

Android, Chrome и Opera используют android-chrome-192×192.png и android-chrome-512×512.png, которые рекомендует Google.

С момента появления в Android адаптивных иконок к иконкам веб-сайтов, добавленных на домашний экран Android, будет применена маска 192×192. Поэтому иконка приобретает форму предпочитаемого пользователем стиля маскирования. Это может быть сквиркл, эллипс, прямоугольник, прямоугольник с закругленными углами или каплевидная фигура.

В этом случае favicon со сплошной заливкой маскирован в форме сквиркл операционной системы Android Pie. Другие фигуры включают в себя эллипсы, прямоугольник, прямоугольник с закругленными углами и каплевидную фигуру

Вам необходимо создать favicon в формате PNG со сплошным фоном следующих размеров:

  • 192×192
  • 512×512

Установите эти иконки, добавив файл site. webmanifest на свой сайт и разместив ссылку на него в тегах

:

Ниже приведен код для файла site.webmanifest:

{
«name»: «»,
«short_name»: «»,
«icons»: [
{
«src»: «/android-chrome-192×192.png»,
«sizes»: «192×192»,
«type»: «image/png»
},
{
«src»: «/android-chrome-512×512.png»,
«sizes»: «512×512»,
«type»: «image/png»
}
],
«theme_color»: «#ffffff»,
«background_color»: «#ffffff»,
«display»: «standalone»
}

9. Закрепленная вкладка Safari

Это единственный favicon, который необходимо предоставить в векторном формате в виде SVG-файла. Он отображается в виде пиктограммы, когда пользователь прикрепляет вкладку к окну браузера Safari.

В отличие от остальных favicon, этот создается из изображения в формате SVG

Эта иконка должна быть 100% черным SVG-файлом с прозрачным фоном. SVG может быть только одним слоем, и Safari требует, чтобы атрибут viewBox для SVG был установлен в «0 0 16 16».

Добавьте этот favicon в HTML

, как показано ниже:

10. Как насчет Google TV, Chrome Web Store и иконок Apple Touch для версий предшествовавших iOS 7?

А что насчет Google TV, Chrome Web Store и иконок Apple Touch для версий, предшествовавших iOS 7? Существует ряд размеров и форматы favicon, которые не были включены в эту статью, либо потому, что они практически устарели, либо потому, что они редко актуальны для обычного веб-разработчика. В общем, разработчики и дизайнеры должны стремиться поддерживать как можно более широкий спектр устройств и операционных систем, но иногда это просто не имеет смысла.

Например: Google TV был заменен на Android TV в 2014 году, а SDK был вовсе упразднен. Chrome Web Store, вероятно, имеет значение только в том случае, если вы создаете приложение, расширение или тему Chrome, а процент устройств iOS работающих под управлением iOS 7 или более ранней версии сейчас менее, чем ~1 %.

Шпаргалка

Итак, если вы хотите поддерживать полный набор устройств и браузеров, в таблице ниже указаны соответствующие размеры. Ранее favicon должен был быть предоставлен в формате ICO. Сегодня можно использовать файлы в формате PNG (за исключением иконки закрепленной вкладки Safari, которая должна быть представлена в формате SVG).

Если хотите узнать простой способ проектирования и экспорта всех размеров favicon, взгляните на наш шаблон.

Размеры

Фон

Формат

Классические десктопные браузеры

16×16

Прозрачный

PNG

32×32

Прозрачный

PNG

48×48

Прозрачный

PNG

Apple iOS

180×180

Сплошная заливка

PNG

Windows 8.0

144×144

Прозрачный

PNG

Windows 8.1

128×128

Прозрачный

PNG

270×270

Прозрачный

PNG

558×270

Прозрачный

PNG

558×558

Прозрачный

PNG

Google Android и Chrome

192×192

Сплошная заливка

PNG

512×512

Сплошная заливка

PNG

Opera Coast

228×228

Сплошная заливка

PNG

Safari Pinned Tab

Vector

Прозрачный

SVG

Перевод статьи applypixels.

Comments
Leave Comment