Favicon (иконка сайта) | SEO-портал

Иконка Favicon (фавиконка) — маленький, но очень важный атрибут сайта. Из материала вы узнаете о том, зачем нужна фавиконка, какое значение она имеет в SEO, а также о том, как создать и подключить Favicon в формате ICO и других форматах к своему сайту.

Зачем нужна иконка Favicon для сайта?

Иконка сайта Favicon (от англ. Favorite Icon — иконка для избранного; также: фавиконка, пиктограмма сайта, значок сайта) — небольшая (16×16 px) картинка (как правило в формате ICO), отображаемая во вкладках и закладках браузера, а также имеющая значение в SEO-оптимизации.

Иконка сайта в браузере

Главное назначение иконок Favicon: отображение в элементах интерфейса браузеров, облегчающее их использование.

Иконка сайта во вкладках браузера

Все современные интернет-обозреватели отображают иконку сайта во вкладках:

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

Фавиконки при большом количестве вкладок

Иконка сайта в закладках браузера

Кроме отображения во вкладках, иконка сайта отображается в закладках браузеров (в ссылках на «избранные» страницы), а также в панелях со ссылками:

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

Иконка сайта перед адресной строкой браузера

Некоторые браузеры отображают пиктограмму сайта перед адресной строкой, а также в выпадающем списке URL-адресов выпадающей строки:

Значение иконки сайта в SEO

Favicon является SEO-фактором, т. к. она отображается в сниппетах поисковой выдачи Яндекса и Google (в мобильной поисковой выдаче фавиконки стали отображаться с мая 2019-го, а в десктопной — с начала 2020-го года), в некоторой мере влияя на их кликабельность (вероятность перехода на сайт из поисковой выдачи), которая является положительным поведенческим фактором ранжирования.

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

Из всего вышесказанного следует, что фавиконка:

• отображается в интерфейсе браузеров: вкладках, закладках и перед адресной строкой (Internet Explorer, Safari),
• способствует узнаваемости сайта,
• облегчает работу пользователей в браузере,
• является визитной карточкой сайта в браузере,
• отображается в сниппетах поисковой выдачи,
• может влиять на кликабельность сниппета,
• может косвенно влиять на ранжирование страниц сайта.

Иконка сайта и ПС Яндекс

Favicon отображается в поисковой выдаче Яндекса и может непосредственно влиять на внешние поведенческие факторы.

Favicon в сниппетах Яндекса

Фавиконка сайта отображается напротив заголовков сниппетов:

Favicon в сниппетах выдачи Яндекса

Наличие (отсутствие) и привлекательность фавиконки может отражаться на кликабельности сниппета поисковой выдачи Яндекса, косвенно влияя на ранжирование.

У Яндекса существует отдельный поисковой робот, индексирующий файлы favicon в формате ICO и в других форматах. Обновление фавиконок в выдаче Яндекса – явление достаточно редкое, занимающее около месяца.

Предупреждение об отсутствии файла

Если иконка сайта не отображается в Яндексе, то обратите внимание на наличие предупреждения «Отсутствует файл favicon на сайте» в разделе «Диагностика сайта» сервиса Яндекс.Вебмастер:

Указание на отсутствие фавиконки в сервисе Яндекс.Вебмастер

Проверка наличия Favicon в индексе

Фавиконки добавляются в индексную базу и отображаются в поисковой выдаче в виде изображений в формате PNG. Проверить наличие иконки сайта в индексе Яндекса можно по ссылке:

http://favicon.yandex.net/favicon/[абсолютный URL-адрес]

Например: http://favicon.yandex.net/favicon/https://seoportal.net

Если фавиконка проиндексирована, то она отобразится на странице в формате PNG.

Проверка Favicon на соответствие требованиям

Если иконка сайта не проиндексирована, и (или) в Яндекс.Вебмастере присутствует указанное выше предупреждение об её отсутствии на сайте, то проверьте файл на соответствие требованиям.

Чтобы фавиконка отображалась в результатах поиска, необходимо разместить картинку (файл favicon.ico) размером 16×16 пикселей в корневом каталоге сайта. Предпочтительный формат пиктограммы сайта — ICO, но возможны и другие форматы: GIF, JPEG, PNG и BMP.

Яндекс.Помощь

Требования к иконке сайта

Чтобы избежать проблем с отображением иконки сайта Favicon в интерфейсе браузеров и сниппетах поисковой выдачи Яндекса, необходимо, чтобы файл иконки соответствовал определённым требованиям.

Для фавиконок существуют требования:

• к названию файла,
• к геометрическому размеру,
• к формату файла,
• к размещению,
• к HTML-разметке.

Теперь детально рассмотрим перечисленные требования к файлу фавиконки.

Название файла

Традиционно файл иконки сайта принято называть favicon, но фактически он может называться как угодно, если в HTML-коде указан явный путь к иконке сайта. Иначе говоря: если в корне сайта размещена иконка favicon.ico (именно в формате ICO), а в HTML-коде нет ссылки на неё, то браузер всё равно обнаружит иконку по её названию и будет отображать по назначению. Если же фавиконка сайта будет называться иначе, чем favicon.ico, или иметь расширение, отличное от ICO, при этом в HTML-коде не будет явной ссылки на неё, то браузер не сможет её обнаружить.

Во избежание проблем с отображением иконки сайта в браузере и сниппетах поисковой выдачи Яндекса, файл иконки следует называть «favicon.ico».

Геометрический размер

В Справке Google сказано, что геометрический размер фавиконки должен быть кратным 48 и составлять не меньше 48×48 px. Во вкладках, закладках и перед адресной строкой браузеров, а также в сниппетах поисковой выдачи значок Favicon отображается в размере 16×16 пикселей, поэтому делать картинку более 48×48 px не имеет смысла.

Значок сайта должен быть квадратным и иметь размеры, кратные 48 пикселям, например 48 x 48, 96 x 96, 144 x 144. Файлы SVG конкретного размера не имеют. Поддерживаются значки всех допустимых форматов. Убедитесь, что значок сайта хорошо выглядит при разрешении 16 x 16 пикселей, так как для показа в результатах поиска масштаб значка будет изменен. Учтите, что добавлять значок размером 16 x 16 пикселей не следует.

Справка Google

Формат файла

Традиционным форматом Favicon является ICO, однако современные браузеры могут отображать фавиконки и в других форматах:

Как отмечалось ранее, если пиктограмма сайта будет создана не в формате ICO, то в HTML-коде необходимо явно указывать путь к файлу, иначе браузер (а также робот Яндекса) не сможет определить иконку для отображения.

Иконка сайта Favicon в формате ICO поддерживается всеми современными браузерами.

Размещение на сайте

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

Если на сайте применяется одна фавиконка, то её следует размещать в корневом каталоге сайта.

HTML-код иконки для сайта

Прописывать Favicon в HTML-коде не обязательно, если фавиконка соответствует следующим требованиям:

• имя файла: favicon,
• формат файла: ICO,
• размер значка сайта должен быть кратным 48, т. е. не менее 48×48 px,
• размещение файла: корневой каталог сайта.

В иных случаях (например, если для отдельных страниц применяются отдельные иконки) необходимо указывать тег <link> для Favicon в HTML-коде.

Какой должна быть иконка сайта?

Несмотря на свой скромный размер, Favicon является отличительным символом сайта в глазах как пользователей, так и поисковых систем, а её наличие и привлекательность играют не последнюю роль в кликабельности сниппетов поисковой выдачи Яндекса.

Привлекательность

Иконка сайта должна быть уникальной, привлекательной и запоминающейся, поэтому к её созданию необходимо подойти серьезно, с учётом всех возможностей:

Используйте уникальную фавиконку

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

Фавиконка должна быть контрастной

Иконка сайта, несмотря на свой скромный размер, должна быть четкой: пользователь должен ясно видеть, что изображено на картинке, иначе он её не запомнит и не оценит.

Подумайте об использовании анимации

Браузеры Firefox и Opera отображают анимацию в иконках сайта форматов ICO и GIF. Однако не следует злоупотреблять этой возможностью. Слишком навязчивая анимация в иконке сайта может отвлекать внимание пользователей.

Учитывайте возможность применения прозрачности

Все форматы для файлов Favicon, кроме JPG, позволяют использовать эффекты прозрачности и полупрозрачности. При необходимости следует этим пользоваться.

Уникальность

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

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

Контрастность

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

---

Исходное изображение

---

Размытая иконка

---

Резкая иконка

---

Оптимальная контрастность

Анимация в Favicon

Некоторые браузеры могут отображать анимацию фавиконок с расширениями ico и gif:

---

Статичная иконка

---

Анимированная иконка

Создать анимированный Favicon можно с помощью графических редакторов или специализированных онлайн-сервисов.

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

При создании анимированного Favicon руководствуйтесь следующими правилами:

• хорошо подумайте, подойдёт ли вашему сайту анимированная фавиконка,
• не используйте слишком много кадров: иконка сайта — не видеоролик,
• не используйте высокую скорость смены кадров, чтобы не отвлекать внимание пользователей.

Эффект прозрачности

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

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

При определении прозрачности фона для иконки сайта руководствуйтесь следующими принципами:

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

Как сделать Favicon для сайта?

Существует несколько способов создания фавиконок в формате ICO и в других форматах: с помощью онлайн-генераторов, узконаправленных программ или графических редакторов. Мы рассмотрим процесс создания в онлайн-генераторе и в программе Photoshop.

Онлайн-генератор favicon.cc

В сервисе favicon.cc можно создавать фавиконки только в размере 16×16 px, поэтому рекомендуем использовать другой способ для создания значка 48×48 px (согласно информации в Справке Google).

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

Перейти к генератору favicon.cc

Возможности сервиса

Favicon.cc позволяет:

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

К условным недостаткам генератора можно отнести:

• отсутствие русской версии,
• экспорт файлов только в формате ICO.

Создание новой фавиконки онлайн

Чтобы сделать пиктограмму сайта в режиме онлайн, перейдите в сервис favicon.cc и следуйте инструкциям:

1. кликните Create New Favicon,
2. в области «Color Picker» в правой части окна размещены инструменты для рисования:
   • палитра цветов — для определения цвета карандаша,
   • Transparency — ползунок определения степени прозрачности,
   • Last Used Colors — панель быстрого выбора из последних применяемых цветов,
   • transparent — устанавливает прозрачный цвет («стирка»),
   • move — позволяет переместить все пиксели в редакторе.
3. разобравшись с инструментами, приступайте к рисованию иконки для сайта в редакторе,
4. все изменения будут сразу отображаться в натуральную величину (16×16 px) в области «Preview»,
5. скачать готовую фавиконку можно по клику на Download Favicon.

Создание Favicon в онлайн-генераторе

Создание анимированной фавиконки

Генератор favicon.cc позволяет легко сделать анимированную иконку favicon.ico для сайта в режиме онлайн:

1. кликните Use Animation под окном редактора,
2. раскроются дополнительные инструменты для работы с кадрами:
   • номер кадра указан прямо под редактором Favicon,
   • в выпадающем списке напротив номера можно выбрать частоту смены кадра,
   • Clear Frame — очистка окна редактора (текущего кадра),
   • Append New Frame — добавление нового чистого кадра (откроется в редакторе),
   • Copy Previous Frame — позволяет скопировать пиксели предыдущего кадра в текущий,
   • Delete Frame — удаление текущего кадра,
   • animate preview — активация демонстрации анимации в области «Preview»,
   • в выпадающем списке напротив чекбокса можно выбрать количество циклов анимации.

Онлайн-конвертер Favicon

Функционал favicon.cc позволяет конвертировать изображения из форматов JPG, JPEG, GIF, PNG, BMP, ICO, CUR в формат ICO с преобразованием их размера:

1. кликните Import Image,
2. выберите файл для преобразования размером не более 5 Мб,
3. определите способ преобразования размера изображения до квадратных пропорций:
   • Keep Dimensions — с сохранением пропорций исходного изображения,
   • Shrink to square icon — сжимая или растягивая изображение.
4. кликните Upload для конвертации.

Онлайн-конвертер favicon.cc

Готовые бесплатные фавиконки

Сервис favicon.cc позволяет бесплатно просматривать, редактировать и скачивать созданные с помощью данного генератора фавиконки:

1. чтобы перейти к списку готовых фавиконок кликните:
   • Latest Favicons — последние созданные иконки,
   • Top Rated Favicons — самые популярные иконки,
2. кликните по названию понравившейся фавиконки,
3. кликните:
   • Download Favicon чтобы скачать копию фавиконки,
   • Edit Copy of Icon чтобы приступить к редактированию копии фавиконки.

Создание Favicon в Photoshop

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

Особенности программы

Графический редактор Adobe Photoshop не нуждается в представлении. Но как сделать иконку для сайта в «фотошопе»? Достаточно просто, если вы уже знакомы с интерфейсом программы, и достаточно сложно, если вы не имеете практики работы в Photoshop.

Не будем перечислять возможности фотошопа при работе с изображениями (это другая тематика и слишком большой объём информации), но разберём условные недостатки программы, с которыми можно столкнуться при создании Favicon:

• Сложный многофункциональный интерфейс

  Программа Photoshop предназначена для качественной обработки изображений (в частности фотографий). Для быстрого освоения подойдут другие узконаправленные программы по созданию фавиконок.

• Нет возможности сохранять файлы в формате ICO

  Но можно сохранять иконку в формате BMP и заменять расширение на ICO.

• Нет возможности создавать анимационные Favicon в формате ICO

  Но можно создавать анимационные фавиконки в формате GIF.

Для изображений и инструкций данного материала применялась русифицированная версия Adobe Photoshop CC 2015.

Рисование Favicon

Нарисуем иконку для сайта в программе Adobe Photoshop CC:

1. открываем программу,
2. кликаем Файл → Создать,
3. в появившемся окне устанавливаем высоту и ширину 16 px и жмем ОК,
4. для удобства рисования:
   • масштабируем изображение (клавиши CTRL + + и CTRL + -),
   • включаем сетку: (клавиши CTRL + '),
   • настраиваем сетку: (Редактирование → Настройки → Направляющие, сетка и фрагменты…),
   • используем инструменты для рисования в зависимости от необходимости (карандаш, кисть и др.).

Рисование Favicon в Photoshop

Сохранение фавиконки

Стандартный функционал Photoshop не позволяет сохранять файлы в формате ICO. Для этого можно воспользоваться простым трюком смены формата BMP на ICO:

1. кликаем Файл → Сохранить как,
2. в окне сохранения в соответствующем текстовом поле указываем имя файла favicon, а в поле «Тип файла» из выпадающего списка выбираем BMP и сохраняем,
3. открываем Total Commander и меняем расширение файла на ICO.

Смена формата Favicon с BMP на ICO

Создание Favicon из изображения

Если у вас есть готовое изображение (например, полноразмерный логотип), вы можете сделать из него фавиконку с помощью Photoshop:

Создание иконки для сайта из изображения в Photoshop

1. откройте исходное изображение в Photoshop,
2. измените пропорции изображения в соотношении 1×1 (форма квадрата) с помощью:
   • кадрирования (клавиша C),
   • изменения размера изображения (клавиши ALT + CTRL + I),
   • изменения размера холста (клавиши ALT + CTRL + C),
3. перейдите в режим изменения размера изображения (клавиши ALT + CTRL + I):
   • уменьшите изображение до 16×16 px,
   • в выпадающем списке «Ресамплинг» для оптимальной четкости выберите «Бикубическая (с уменьшением)»,
   • вы можете поэкспериментировать с другими вариантами ресамплинга, оценивая результат в том же окне,
4. сохраните файл как указано выше (клавиши ALT + S), или в другом веб-формате (клавиши ALT + CTRL + SHIFT + S).

Изменение размера и настройка четкости фавиконки

Создание анимированной Favicon

Для создания анимированной пиктограммы сайта в формате GIF:

1. открываем статичную фавиконку в программе,
2. кликаем Окно → Шкала времени,
3. кликаем Создать анимацию кадра,
4. выбираем кадры и:
   • дублируем слои для новых кадров,
   • редактируем слои для новых кадров,
   • настраиваем отображение слоёв в кадрах,
   • устанавливаем частоту смены кадров.
5. переходим в «Сохранить для Web» (клавиши ALT + CTRL + SHIFT + S):
   • выбираем тип файла GIF,
   • в разеле «Анимация» выбираем число повторов «Постоянно»,
   • сохраняем картинку.

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

Перед подключением фавиконки в HTML-коде необходимо правильно создать и установить файл Favicon на сайте: по умолчанию браузеры ищут фавиконку по названию favicon.ico в корневой папке сайта. Если иконка не соответствует какому-то из требований (название, расширение и размещение файла), то следует указывать на неё в HTML-коде.

HTML-код для Favicon

Чтобы прописать иконку сайта в HTML-коде применяется тег link с атрибутами rel, type и href, размещаемый в разделе head:

<link rel="shortcut icon" type="image/x-icon" href="http://site.net/favicon.ico">

Возможные значения атрибутов тега <link> для Favicon

Атрибут	Значение	Пояснение
rel	icon	Указывает, что тег link определяет Favicon для страницы. Указанные значения равнозначны.
	shortcut icon
type	image/x-icon	Атрибут должен содержать MIME-тип файла Favicon. Данные значение применяются для иконок формата ICO.
	image/vnd.microsoft.icon
	image/gif	Для фавиконок в формате GIF.
	image/jpeg	Для фавиконок в формате JPEG.
	image/png	Для фавиконок в формате PNG.
	image/bmp	Для фавиконок в формате BMP.
	image/svg	Для фавиконок в формате SVG.
	image/apng	Для Favicon формата APNG.
href	[относительный URL]	Например: /favicon.ico
	[абсолютный URL]	Например: http://site.net/favicon.ico
	[Код base64]	Например: data:image/x-icon;base64,AAABAA…

Примеры подключения

Рассмотрим примеры указания на иконку сайта в HTML-коде.

HTML-тег для favicon.ico

Если иконка не подключена в HTML-коде, браузеры пытаются обнаружить её по следующему правилу:

<!-- равносильный HTML-код тега link для favicon.ico, размещенного в корне сайта: -->
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="http://site.net/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="http://site.net/favicon.ico">
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="http://site.net/favicon.ico">
<link rel="icon" type="image/x-icon" href="http://site.net/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- данным указаниям браузеры следуют по умолчанию даже при их отсутствии в HTML-коде -->

В остальных случаях необходимо включать тег link для Favicon c соответствующими значениями атрибутов.

HTML-тег для Favicon других форматов

Для подключения фавиконки в формате, отличном от ICO, указывайте соответствующий MIME-тип фавиконки в атрибуте type. Например:

<!-- HTML-код для иконки в PNG-формате: -->
<link rel="shortcut icon" type="image/png" href="http://site.net/favicon.png">

По возможности применяйте иконки в формате ICO, чтобы избежать возможных проблем с их отображением.

HTML-тег для Favicon вне корневого каталога

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

<!-- HTML-код для фавиконки, расположенной не в корневой папке: -->
<link rel="shortcut icon" type="image/png" href="http://site.net/template/favicon.png">

Такой код HTML-тега link целесообразно применять на отдельных страницах сайта со своими уникальными (отличными от главной иконки сайта) фавиконками.

Отдельные страницы сайта могут иметь свою фавиконку, доступную по указанным в HTML-коде URL-адресам.

HTML-тег для фавиконок с нестандартным названием

Для подключения иконки сайта, имеющей название, отличное от favicon, не забудьте указать это в атрибуте href. Например:

<!-- HTML-код для иконки с нестандартным названием файла: -->
<link rel="shortcut icon" type="image/x-icon" href="http://site.net/ikonka.ico">

Во избежание возможных проблем с отображением используйте фавиконки с именем favicon.

HTML-тег для фавиконок в base64

Чтобы не подключать файл фавиконки к веб-странице, можно вставить в атрибут href тега link код Base64:

<!-- HTML-код для иконки в base64 -->
<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAI1nsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREQAAABERERERAAAAEREREBEAAAARARAAEQAAABEBEAARAAAAEQEQABEAAAARARAAEQAAABEBERERAAAAEQEREREAAAARAREQAAAAABEBERAAAAAAEQEREAAAAAARAREQAAAAABEBERARAAAAEQEREREAAAAREREREQAAABEREEIAAABCAAACTkAADk5AAA5OQAAOTkAADk5AAABCQAAAQkAAA85AAAPOQAADzkAAA85AAAJOQAAAQgAAAEIAAA">

Такой способ HTML-подключения Favicon работает во всех браузерах, кроме Internet Explorer. Чтобы получить код изображения, воспользуйтесь любым декодером Base64.

Лучшие бесплатные коллекции векторных иконок / Хабр

Привет, Хабр! Сегодня я хочу представить вам огромную коллекцию из 51 набора бесплатных векторных иконок. Да, есть потрясающие ресурсы Flaticon или Iconfinder, но бывают случаи, когда необходима именно группа иконок в едином стилистическом оформлении. Определиться с выбором, вам поможет эта подборка. Я старался собрать не как можно больше, а действительно самое лучшее.

Среди веб-разработчиков существует много споров о том, что лучше: иконочный шрифт или SVG спрайты? Четкого ответа на этот вопрос нет. Каждый выбирает свое. Данные наборы иконок вас неограничиывают в выборе, поскольку представлены в различных форматах: @font-face, SVG, EPS, AI, PSD, Sketch.

В целом данная подборка содержит более 10 000 иконок, охватывающих множество категорий: интерфейсы, технологии, наука, спорт, маркетинг, среда, транспорт и тд. Полые, заполненные, цветные, во Flat, Material, Elegant, Cartoon, Hand drawing стилях.

Responsive Icons (100 иконок, PSD, AI, EPS, SVG)

Icon-Works (130+ иконок, Webfont)

Feather (130 иконок, PSD, SVG, Webfont)

Linea (730+ иконок, SVG, Webfont)

Icony (100 иконок, SVG, PSD)

Free iOS Icons Pack (100 иконок, PSD, Webfont)

Touch Icons (340 иконок, PSD, AI, SVG)

Simple Line Icons (100 иконок, AI, EPS, SVG, PSD)

Themify Icons (320+ иконок, SVG и Webfont)

Elegant Line-Style Icons (100 иконок, AI, SVG)

Pixeden Icon Font Pack (170 иконок, Webfont)

Summer and Essentials Icon Set (50 иконок, EPS, AI, PNG)

Webicons (100 иконок, AI, EPS)

Stroke Icons (80 иконок, PSD, AI, Webfont)

Microns (231 иконок, SVG, Webfont)

Outlined Icons (150 иконок, PSD, SVG, AI, Webfont)

LineIconSet v1.0 (200 иконок, EPS)

Someicons (153 иконок, EPS, SVG)

Universal Icons (100 иконок, SVG)

Flat Color Icons (300+ иконок, SVG)

Iconia (100+ иконок, Webfont)

Typicons (336 иконок, SVG, Webfont)

Geoph (80 иконок, AI, PSD)

Evil Icons (70 иконок, SVG)

Stroke Gap Icons (200 иконок, AI, PSD, SVG, Webfont)

Unigrid (100 иконок, AI)

Amenities (100 иконок, EPS, PSD)

Elegant Icons (360 иконок, Webfont)

Lightwing (60 иконок, Webfont)

Tonicons (500 иконок, EPS, Sketch, Webfont)

Epic Icons (1000+ иконок, Webfont)

Lynny Icons (900+ иконок, EPS, AI)

Helium (100 иконок, AI, EPS, SVG, Webfont)

Essential Icons (77 иконок, EPS, PSD, AI, SVG)

Dripicons (95 иконок, Webfont)

Cinema (200 иконок, SVG)

Open Iconic (200+ иконок, SVG, Webfont)

Twig (100+ иконок, SVG, Webfont)

MFG Labs Iconset (160+ иконок, Webfont)

PrestaShop Icons (300+ иконок, EPS, Webfont)

Subway (300+ иконок, Webfont)

Entypo (400+ иконок, Webfont)

Fundation Icons (100+ иконок, Webfont)

Ionic Icons (~750 иконок, Webfont)

Material Icons (~1000 иконок, SVG, Webfontg)

Font Awesome (1000+ иконок, Webfont)

Squid Solid, Flat and Line Icons (150 иконок, EPS, AI, PSD, SVG)

Roundicons (60 иконок, PNG, SVG, EPS, PSD, AI)

Retinaicons (200 иконок, AI)

Swifticons (92*3 иконок, EPS, AI, PSD, Sketch SVG)

Ballicons 2 (36 иконок, PNG, SVG, PSD)

Больше спасибо всем за внимание.

50 сайтов с бесплатными иконками

Ребята из проекта Canva знают о сайтах с бесплатными иконками буквально все — составили список из 50 наиболее популярных и интересных.

Теперь есть из чего выбрать!

• 1001 Free Downloads. Плоские иконки.
• AlienValley. Наборы иконок в обмен на email.
• All-Free Download. Векторы, PNG, PSD. Бесплатно.
• Behance. Дизайнерские иконки. Придется пофантазировать в плане поиска.
• Best PSD Freebies. Бесплатные иконки в PSD.
• Blugraphic. PSD, PNG и векторные иконки. Поиск по тегам. Еженедельная подборка бесплатных иконок.
• Captain Icon. Форматы: EPS, PSD, PNG, SVG и иконочный шрифт. Можно кастомизировать цвет и размер.
• CSS Author. Еженедельные подборки бесплатных иконок.
• Creative Tail. Иконки, которых больше нигде нет.
• Dafont. 50 иконочных шрифтов. Проверяйте правила использования.
• DevianArt. 200 000 иконок. Некоторые художники предпочитают делиться только с участниками DevianArt.
• DesignBurger. Наборы иконок от Behance, Freepik и других.
• Dreamstale. Бесплатные и иконки премиум-класса. Требуется ссылка на автора.
• Duckfiles. Иконки для персонального и коммерческого использования. В свободном доступе.
• Dribbble. Иконки для личного и коммерческого использования. Кстати, здесь мы берем иллюстрации для рассылки.
• Dryicons. 5 000 иконок, 77 наборов.
• Ego Icons. 1500 премиальных иконок и 100 бесплатных векторов. Посетите и дочерние сайты.
• Entypo. Иконки 20×20 в SVG. Требуется атрибуция.
• Endless Icons. PNG и SVG.
• Flat Icon. Форматы: SVG, EPS, PSD or PNG. Иконки можно скачать в виде шрифта. Обратная ссылка обязательна.
• Free Goodie For Designers. PSD, SVG и векторные иконки.
• Freebiesbug. Бесплатные PSD.
• Freepik. Форматы: PNG, EPS, SVG. Требуется указание автора.
• Fontello. Иконки в SVG. Выделите, чтобы скачать в виде шрифта
• Fribly. Наборы иконок от разных дизайнеров.
• Fusionplate. Еженедельные обзоры бесплатных наборов.
• Glyphicons. PNG. Минимализм, монохром.
• Good Stuff No Nonsense. Нарисованы от руки. Не требуется обратная ссылка.
• GraphicBurger. Если ищете милые иконки, вам сюда. Прямая загрузка, несколько форматов и размеров.
• GraphicsFuel. Бесплатные иконки.
• GraphicsBay. Роялти фри. Создатели обещают, что иконки уникальны.
• Gravual. Две коллекции: кухонная утварь и улица. Для коммерческого использования свяжитесь с правообладателем.
• IcoJam. Иконки от дизайнеров Icojam.
• Iconfinder. 554 437 бесплатных и небесплатных иконок. Для скачивания доступно несколько форматов и размеров.
• Iconmelon. Любопытная инструкция по применению. И иконки, конечно.
• Iconmonstr. Доступно несколько размеров. Бесплатно, без ссылок на автора.
• Iconic. Бесплатный набор из 223 иконок в SVG, растре и шрифтовом форматах.
• IcoMoon App. Более 4000 векторных иконок. SVN, PNG, PDF и шрифт.
• IconArchive. 590 918 иконок в 2 443 наборах.
• Icon Shock. Иконки собраны по категория. Чтобы использовать в коммерческом проекте, внесите разовый платеж.
• MrIcons. Более 100 000 иконок от веб-интерфейса до соцсетей.
• NounProject. Бесплатные иконки взамен на ссылку на автора. Чтобы снять ограничение, подключите тариф.
• Oxygenna. Наборы иконок в PNG, PSD и AI.
• Pixelsmarket. Иконки с известных и не очень сайтов.
• PixsHub. Собирает иконки по сети.
• Pixeden. Иконки в PNG. Разрешение: от 16×16 до 512×512.
• Smashing Magazine. Форматы: AI, PSD, SVG, PNG, CSH and Sketch. Большинство наборов не требуют обратной ссылки.
• Squid Ink. 2 000 векторных иконок в 17 категориях.
• Vecteezy. 60 страниц векторных иконок.
• Web Design Freebies. Сборник иконок с разных сайтов. Можно сразу посмотреть весь набор.

форматы, поддержка, автоматизация / Хабр

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

В каком формате должен быть фавикон?

Раньше основным форматом фавикона был формат ICO. Его главная особенность заключалась в том, что файл такого формата мог хранить в себе несколько вариантов размеров иконки. Сейчас формат ICO считается устаревшим, на смену ему пришёл формат PNG с новыми возможностями по взаимодействию с иконкой.

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

Фавикон может быть создан ещё в нескольких форматах, например, в формате GIF или JPEG, но проблемы с поддержкой делают их использование нецелесообразным.

HTML5 и атрибут sizes

Атрибут sizes пришел в нашу жизнь с HTML5. Благодаря ему браузер или устройство может выбрать необходимый размер фавикона. Атрибут sizes указывается в формате [ширина х высота] без указания единиц. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться до любого размера, например, если она хранится в векторном формате SVG.

<link rel="icon">
<link rel="icon" any">

Пора ли отправлять ICO на свалку?

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

Windows

Начнём, пожалуй, с Windows.

До 11 версии формат PNG в IE не поддерживался, поэтому для IE10 и более младших версий по-прежнему необходимо использовать формат ICO. А вот с IE11 смело можно переходить на PNG. Для устаревших браузеров Microsoft рекомендует размеры 16х16, 32х32 и 48х48 для фавиконов формата ICO.

Начиная с IE9, сайты получили возможность быть закрепленными в меню и панели задач, а с приходом IE11 и Windows 8.1 появилась возможность создавать закрепленные сайты в виде живых плиток. По умолчанию изображением на плитке будет фавикон, но только не для больших и широких плиток, для которых нужно задавать изображение специального размера. Сделать это можно следующими способами: добавив теги метаданных в разметку веб-страницы или файл конфигурации браузера.

Сначала давайте рассмотрим первый способ.

Определение фавикона в устройствах Windows с помощью метаданных в <head>:

<meta name="msapplication-TileImage" content="images\tileimage.jpg">

Если мы хотим указать иконки для больших плиток, это можно сделать с помощью следующих метаданных:

<meta name="msapplication-square70x70logo" content="images/smalltile.png">
<meta name="msapplication-square150x150logo" content="images/mediumtile.png">
<meta name="msapplication-wide310x150logo" content="images/widetile.png">
<meta name="msapplication-square310x310logo" content="images/largetile.png">

Можно указать цвет фона плитки:

<meta name="msapplication-TileColor" content="#009900">

Можно указать имя закрепленного сайта:

<meta name="application-name" content="Rick and Morty">

Если нет этих метаданных, то в качестве имени используется значение в <title&gt; страницы.

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

<meta name="msapplication-tooltip" content="Title">

Можно даже определить адрес документа:

<meta name="msapplication-starturl" content="./">

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

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

Начиная с IE11 Windows 8.1 и Edge Windows 10 можно закрепить веб-сайт с помощью файла конфигурации браузера. Это удобно: создать один файл browserconfig.xml и поддерживать, и подключать его на каждой странице, если у нас есть несколько страниц, которые будут использовать одни и те же плитки.

Вызов файла в <head>:

 <meta name="msapplication-config" content="browserconfig.xml">

browserconfig.xml

<?xml version=”1.0" encoding=”utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/img/favicons/mstile-70x70.png"/>
      <square150x150logo src="/img/favicons/mstile-150x150.png"/>
      <square310x310logo src="/img/favicons/mstile-310x310.png"/>
      <wide310x150logo src="/img/favicons/mstile-310x150.png"/>
      <TileColor>#000000</TileColor>
    </tile>
    <notification>
       <polling-uri src="notifications/contoso1.xml"/>
       <polling-uri2 src="notifications/contoso2.xml"/>
       <polling-uri3 src="notifications/contoso3.xml"/>
       <frequency>30</frequency>
       <cycle>1</cycle>
   </notification>
  </msapplication>
</browserconfig>

square70x70logo, square150x150logo, wide310x150logo, square310x310logo  — элементы, внутри которых объявляются изображения для различных размеров плитки.

Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей. Желательно, чтобы размер исходного изображения примерно в 1.8 раза превышал размер целевой плитки, чтобы его можно было увеличивать и уменьшать. Например, для 70х70 рекомендуемый размер 128х128, а для широкой плитки 310×150 исходное изображение имеет размер 558×270.

Если плитка сайта статическая, то вышеперечисленных элементов будет достаточно. Если же предполагается динамическая плитка, то необходимо добавить элемент <notification>. Этот элемент может включать в себя до 5 элементов <polling-uri>, содержащих в атрибуте src пути к соответствующим xml-файлам уведомлений. Также внутри этого тега содержится элемент <frequency>, значение которого указывает в минутах интервал между обращениями к сайту за обновлением уведомлений, то есть живая плитка будет обновляться каждые, например, 30 минут. Да, значение не произвольное, а только 30, 60, 360, 720 или 1440.

Наконец, есть внутри тега <notification> еще элемент <cycle>, отвечающий за способ повторения уведомлений (может принимать значения от 0 до 7). Шаблоны доступны только для средних, широких и больших плиток.

Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.

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

<tile>
  <visual lang="en-US" version="2">
    <binding template="TileWide310x150ImageAndText01"
      <image src="images/image1.png" alt="alt text"/>
      <text>Text Field 1</text>
    </binding>
  </visual>
</tile>

То, что написано в кавычках в атрибуте template  —  название шаблона. Этот шаблон содержит изображение и небольшой текст. Используется для больших изображений и средних названий. На самом деле, подобных шаблонов очень много: и просто c текстом, и просто с изображением, и с несколькими изображениями, и с несколькими строками текста, и так далее. Большинство шаблонов изображения или текста размещают текст на той же плитке, что и изображение. Но шаблоны с Peek в названии выполняют переключение между изображением и текстом на плитке.

Подробнее о шаблонах можно узнать на официальном сайте.

Mac OS

В Mac OS особо не разгуляешься, к сожалению. Если сохранить сайт на рабочий стол в Mac OS, то значок будет отображаться как скриншот страницы с html кодом. Просто так сайт приложением в Mac OS не сделать, но и не будем.

Safari — вот где нам пригодится формат SVG. Чтобы использовать SVG, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.

<link rel="mask-icon" href="safari-pinned-tab.svg" color="#00а0ff">

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

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

iOS

Safari в iOS вообще не отображает favicon во вкладках, но использует их для закладок, так же как и в Mac OS. В iOS пользователи могут добавить сайт на рабочий стол, и оно будет выглядеть как нативное приложение. Эти ссылки отображаются в виде значков и называются Web Clips.

Для этого нужно добавить rel=«apple-touch-icon» и указать размер с помощью атрибута sizes. Каждое устройство нуждается в своем размере иконки. Так как iOS устройств довольно много, и каждое устройство имеет свое разрешение экрана, спецификация, разработанная Apple, поддерживает возможность указать несколько тегов с иконками разных размеров.

<link rel="apple-touch-icon" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="apple-touch-icon-180x180.png">

Если значок не соответствует рекомендуемому размеру устройства, используется самая близкая по размеру иконка большего размера, нежели рекомендуемый. Когда пользователь заходит на ваш сайт с iOS устройства, запрашиваются файл apple-touch-icon-precomposed.png, который должен быть оформлен в стиле iOS: закругленные углы, блики, и тень. Если файла с таким названием в корне проекта или rel=«apple-touch-icon-precomposed» нет, будет запрошен apple-touch-icon.png, которому разрешено быть таким, какой он есть, а все эффекты будут наложены самим iOS. Соответственно, нужна иконка под каждый размер. А вот если нет и этих файлов, то на рабочем столе iPhone или iPad будет отображаться не красивая иконка, а миниатюра страницы — ее скриншот.

Ходят слухи что Blackberry будет тоже использовать rel=«apple-touch-icon-precomposed», но возможности проверить, к сожалению, не было.

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

Некоторые могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch Icon должна быть 180х180. Остальные устройства могут уменьшить изображение. Но некоторые другие платформы тоже используют Apple Touch Icon, поэтому лучше их объявить.

Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch Icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну из этих иконок.

В iOS можно указать заголовок веб-приложения. По умолчанию используется значение тега <title>. Чтобы задать другой заголовок, добавьте метатег на веб-страницу:

<meta name = "apple-mobile-web-app-title" content = "AppTitle">

Кстати, можно даже установить стиль строки состояния для веб-приложения:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Можно поменять её цвет, можно сделать полупрозрачной. Это тоже повлияет на вид нашего сайта.

Android

Устройства на Android отлично понимают формат PNG, а ещё поддерживают манифест веб-приложения manifest.json, в котором можно прописать все параметры того, как будет вести себя сайт, если его установить на домашний экран. Этот манифест пока, к сожалению, не читают устройства под IOS. А если Android не найдет этот файл, то он будет использовать apple-icon-touch.

Файл манифеста может содержать в себе ряд космических параметров, но тут находятся лишь те, которые нам необходимы для отображения сайта на домашнем экране:

{
  "name": "Rick and Morty",
  "short_name": "Rick",
  "icons": [
  {
    "src": "/android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/android-chrome-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
 }
],
  "theme_color": "#b3adad",
  "background_color": "#b3adad",
  "display": "standalone"
}

Ключ name определяет подпись в приложению на домашнем столе. Если этот параметр не указан, подпись будет взята из <title> в <head>;

Ключ short_name определяет укороченную подпись для приложения, если не хватает места для полного имени;

Ключ icons — определяет массив объектов иконок, может принимать три значения: sizes, src, type;

Ключ theme_color определяет цвет строки состояния. Начиная с 39 версии хрома для Android Lollipop появилась возможность менять цвет интерфейса браузера и цвет вкладки браузера.

Задать цвет можно и через <head>, добавив следующий мета-тег:

<meta name="theme-color" content="#9CC2CE">

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

Ключ display определяет режим отображения веб-приложения. Например, значение standalone, которое мы указали, позволило открывать нам сайт как приложение.

Вызов в <head>:

<link rel="manifest" href="manifest.json">

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

Автоматизация

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

Есть пакеты для сборки и для Gulp, и для Grunt.

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

Favicons, Touch Icons, Tile Icons и т. д. Что выбрать? / Хабр

От переводчика.
Это перевод статьи Филипа Бернарда с сайта css-tricks.com. Часть статьи, содержащую описание работы с созданным им сервисом, я позволил себе опустить. Если вы найдете ошибки, просьба сообщить о них в личном сообщении.

Статья содержит результаты проведенного им исследования, каким должен быть фавикон (и то что его заменяет), чтобы хорошо отображаться в различных случаях.

Фавикон был представлен в 1999 году, в Internet Explorer 5 (источник) и стандартизирован W3C несколько месяцев спустя. Это была маленькая иконка, представляющая сайт.

С тех пор большинство настольных браузеров следуют тенденции и используют фавикон тем или иным способом. Это очень просто, не так ли? Создать маленькую картинку и добавить в любой интернет-проект, чтобы сделать его «завершённым». Ничего сложного. Или нет?

Устроим викторину!

Каков основной файл фавикона?

Ответ: favicon.ico. Просто, чтобы удостовериться: это не PNG, переименованный в favicon.ico. Хотя, некоторые браузеры простят эту ошибку, ICO это другой формат, поддерживающий несколько версий изображения.

Вопрос: Какого размера должен быть favicon.ico?

A: 16х16. Стандартный.
B: 32х32. Разве фавикон не обновлялся некоторое время назад?
C: 64×64. Знаете, со всеми этими новыми экранами с высокой плотностью пикселей.
D: Ни один из перечисленных.

Ответ: D.

Формат favicon.ico изначально задуман Майкрософт и поддержан некоторыми другими производителями. Майкрософт рекомендует размеры 16х16, 32х32 и 48х48. Да, один ICO может содержать несколько изображений.

Браузеры обычно отображают фавикон на вкладках, и на обычных разрешениях, версия 16х16 выглядит хорошо:

16х16 на вкладке Chrome. Пока всё хорошо.

Но иконка 16х16 слишком мала для других мест: панели задач и рабочего стола.

16х16 в панели задач.

16х16 на рабочем столе. Не хорошо.

Когда иконка содержит несколько изображений, результат гораздо лучше.

16х16, 32х32 и 48х48 favicon.ico в панели задач. Выглядит как обычная программа.

16х16, 32х32 и 48х48 favicon.ico на рабочем столе. Идеально.

Вопрос: Каково назначение favicon.png?

На самом деле, чаще встречается другой файл, favicon.png. Люди часто спрашивают об этом.
Что это на самом деле?

A: Иконка для браузеров не поддерживающих favicon.ico. Такие как Firefox, наверно?
B: Иконка высокого разрешения. Знаете, со всеми этими новыми экранами с высокой плотностью пикселей.
C: Артефакт из прошлого. Теперь это новые иконки, например, Apple Touch icon.
D: Всё вместе.

Ответ: D.
Начиная с принятия HTML5, favicon.ico не слишком полезен. Был представлен атрибут sizes, позволяющий объявить несколько различных версии одной и той же иконки, и это могут быть PNG файлы:

<link rel="icon" type="image/png" href="/favicon-16x16.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png">
<link rel="icon" type="image/png" href="/favicon-96x96.png">

Так что мы должны объявлять?

Давайте посмотрим правде в глаза. Хотя, почти все настольные браузеры поддерживают favicon.ico, этот файл устарел. Да, вы по-прежнему можете использовать этот файл и всё будет работать, как задумано. Но серьёзно, это устаревший формат. Он не используется нигде, кроме веба. PNG поддерживается гораздо лучше.

favicon.ico — для старых версий IE. Для остальных браузеров и последних версий IE используйте PNG иконки. Так какие sizes необходимо определять? Скоро узнаем.

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

Согласно SmartInsights, больше 26% веб-трафика генерируется смартфонами и планшетами. Это будущее. Что нужно для поддержки этого мира?

A: favicon.ico. Это работало 15 лет назад, работает и сегодня.
B: PNG иконки. Вы сказали, что расскажете об этом.
C: Apple Touch icon. Кэп.
D: Здесь, всё равно, нет правильного ответа.

Ответ: D. Нужны PNG иконки. И Apple Touch icon. И плитки для Windows 8. И файл под названием browserconfig.xml.

Мобильные платформы гораздо более гетерогенны, чем обычные настольные браузеры. Размеры экранов и разрешения очень сильно варьируются и нет преобладающей операционной системы, такой как Windows, как это было во времена появления интернета.
Следствие: не думайте, что мобильный фавикон может быть одной универсальной картинкой или иметь универсальное объявление в HTML коде.

Вопрос: Какого размера должны быть PNG иконки?

A: 96х96 для Google TV
B: 196х196 для Android Chrome
C: 228х228 для Opera Coast
D: Все перечисленные

Ответ: D, и даже более. Например, 160х160 для старой версии быстрого набора Opera (давно в прошлом), или 128х128 для Chrome Web Store, всё сильно зависит от платформы, которую вы собираетесь поддерживать.

Вопрос: Каков размер Apple Touch icon?

Apple Touch icon используемые iOS для закладок и сайтов «на домашнем экране». На ум приходит 57х57, браво. Это правильно. Только это было 7 лет назад, когда был выпущен первый iPhone.

Ответ: Вплоть до 180х180.

После появления первого iPhone, было 3 важных релиза:

• iPad. С экраном гораздо большего размера.
• Retina-экраны. С удвоеной плотностью пикселов.
• iOS7. Плоский дизайн отличается на iPhone/iPad.

Всего есть 9 комбинаций.

Устройство	Экран	Версия iOS	Размер иконки
iPhone	Classic	6 и ниже	57×57
		7	60×60
	Retina	6 и ниже	114×114
		7	120×120
	6 Plus	8 и выше	180×180
iPad	Classic	6 и ниже	72×72
		7	76×76
	Retina	6 и ниже	144×144
		7	152×152

Старая 57х57 Apple Touch icon на блестящем Retina iPad. Мутно.

Большая 152х152 Apple Touch icon на Retina iPad. Аккуратно.

Если вы ответили неверно, не расстраивайтесь. Из 5000 популярных сайтов, которые предоставляют apple-touch-icon.png, менее 4% делают это правильно.

Некоторый могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch icon должна быть 152х152. Retina iPad под iOS 7 найдет что нужно, а младшие устройства могут уменьшить изображение.

Вопрос: Необходимо ли объявлять Apple Touch icon в HTML?

A: Не знаю. Надо же что-то ответить!
B: Да. Иначе как iOS найдет их?
C: Нет. Apple предлагает рекомендации, так что любое iOS устройство всё равно их надет.
D: Нет, но…

Ответ: D… но некоторые другие платформы тоже используют Apple Touch icon, лучше их объявить.

<link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png">

Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну их.

Вопрос: Как объявить плитку для планшетов на Windows 8?

A: Планшет на Windows 8? Что это такое?
B: favicon.ico. Наследие Стива Балмера.
C: Мета-теги. Два msapplication-TileColor и msapplication-TileImage.
D: browserconfig.xml.

Ответ: C для Windows 8 и IE 10, D для Windows 8.1 и IE 11. Ответ A в чем-то тоже верен.

Объявление для Windows 8.0 выглядит как-то так:

<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Windows 8.1 и IE 11 ожидают несколько версии изображения, объявленных в browserconfig.xml. Например:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <TileColor>#2b5797</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.

Плитки сайтов в Windows 8.

Вопрос: Каков размер плитки square150x150logo?

A: 150х150. Вы не умеете читать?
B: Иной.

Ответ: B, 270х270. Майкрософт рекомендует больший размер, в целях поддержки экранов с высокой плотностью пикселов.

Поздравляем, вы закончили викторину! Как вы это сделали?

Суть этих вопросов — показать какой сложной может быть действительность, несмотря на кажущуюся простоту. Времена, когда фавикон был единственным favicon.ico давно ушли. Но старые привычки сохраняются и могут привести к абсурдным ситуациям. Мы тратим дни на аккуратный отзывчивый дизайн и добавляем только 57х57 Apple Touch icon, подходящий только для старых устройств, которыми сегодня уже почти никто не пользуется.

Создание favicon для сайта 2020 / Песочница / Хабр

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

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

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

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

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

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

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

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

Classic desktop browsers

Начнем, пожалуй, с классического десктопа.

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

<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" rel="icon" href="…/favicon-120x120.png">

Для создания мульти-размерной иконки ICO можно использовать сервис-конвертер icoconvert. При генерации иконки необходимо выбрать следующие размеры: 16х16, 32х32, 48х48 (highest resolution icon).

Иконки PNG имеют следующие размеры: 16х16, 32х32, 96х96, 120х120. Зачем иконка 120х120? Яндекс Справка сообщает, что может воспользоваться иконкой данного размера.

Если обратить внимание на значение rel (тип ресурса), то icon – учитывается большинством браузеров, а shortcut icon – учитывается браузером IE.

Android Chrome

Android ожидает увидеть значок 192х192 в формате PNG, alpha-канал (прозрачность) приветствуется.

<link type="image/png" rel="icon" href="…/android-icon-192x192.png">

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

Сам файл манифеста формата json и объявляется следующей строкой:

<link rel="manifest" href="…/manifest.json">

Файл манифеста для Android Chrome можно сгенерировать с помощью сервиса RealFaviconGenerator.

{
 "name": "My Application",
 "short_name": "App",
 "description": "Application OK",
 "lang": "ru-Ru",
 "start_url": "/",
 "scope": "/",
 "display": "standalone",
 "theme_color": "#ffffff",
 "background_color": "#ffffff",
 "icons": [
  {
   "src": "\/res\/img\/icons\/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/res\/img\/icons\/android-icon -96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-512x512.png",
   "sizes": "512x512",
   "type": "image\/png"
  }
 ]
}

Иконки должны иметь следующие размеры: 72х72, 96х96, 144х144, 192х192, 512х512 в формате PNG, прозрачность приветствуется. Так как иконка может иметь прозрачный фон, то в манифесте можно указать цвет с помощью background_color.

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

Если же подключить к сайту манифест, то при открытии страницы пользователю может быть предложено сохранить сайт в качестве приложения. В данном случае вы имеет возможность объявить визуально ту же иконку (android-icon-192×192.png) или переделать дизайн иконки для приложения под свои нужды и объявить в манифесте с соответствующими размерами.

iOS Safari Web Clip

iOS Safari ожидает увидеть apple touch icon. Это иконка PNG формата 180х180, без alpha-канала (без прозрачности). Углы иконки будут автоматически скруглены, что упрощает создание apple touch icon.

Пользователи iOS также могут добавить сайт на главный экран, и он будет выглядеть как приложение. Такая ссылка отображается в виде значка и называется Web Clip.
Нижеперечисленные размеры иконок предназначены для поддержки различных устройств, например, для iPhone и iPad:

<link rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">

В коде нужно добавить атрибут rel=«apple-touch-icon» и указать размер с помощью sizes.

Если на сайте нет значка, размер которого является рекомендованным для устройства, то будет использована сама близкая по размеру иконка большего размера. Основная apple touch icon это иконка размером – 180х180. Остальные устройства могут умешать иконку.

При создании иконки не забывайте об отступах. Они должны быть не менее 4px со всех сторон. Это необходимо, чтобы ваша иконка не обрезалась, так как значок приложения в iOS имеет скругленные углы.

Следует отметить, что устройства под iOS не единственные, которые ищут apple touch icon. Некоторые браузеры, вроде Android Chrome, могут использовать apple touch иконки, так как они встречаются чаще других PNG иконок высоких разрешений.

Mac OS

В Mac OS дела обстоят совершенно иначе. Если пользователь попробует сохранить сайт на рабочий стол, то вместо иконки сайта будет отображен скриншот страницы с html кодом.

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

<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">

В коде нужно добавить атрибут rel=«mask-icon». Сама SVG-иконка должна быть черного цвета. Цвет иконки задается в атрибуте color=»#e52037″.

SVG-иконка используется в закрепленной вкладке (pinned tab – no focus) в монохромном виде. При наведении (pinned tab – focus) иконка будет закрашена в цвет, который имеет атрибут «color». В touch bar также передается цвет атрибута «color».

При создании иконки необходимо убрать все имеющиеся тени, сделать ее плоской и простой. Упростить иконку до одного объекта можно с помощью операций «Union» и «Flatten». Данные операции легко применить в программе Figma.

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

Windows

С Windows нужно немного запариться, чтобы сделать хорошо.

Для IE10 и более младших версий необходимо использовать формат ICO, так как до IE11 формат PNG не поддерживался.

С приходом IE11 и Windows 8.1 появилась возможность закреплять сайты в виде живых плиток. Для маленьких плиток используется по умолчанию favicon, а для больших и широких плиток необходимо задавать изображение конкретного размера. Это можно сделать с помощью добавления тегов метаданных в разметку сайта или создать browserconfig.xml (файл конфигурации браузера).

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

<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">

Данной строкой мы указываем цвет фона плитки:

<meta name="msapplication-TileColor" content="#2b5797">

Можно указать имя вашего веб-сайта:

<meta name="application-name" content="My Application">

Что такое browserconfig? Это XML-документ, в котором перечислены различные значки, соответствующие пользовательскому интерфейсу Metro UI.

Чтобы подключить файл browserconfig в разметке необходимо добавить следующую строку в head:

<meta name="msapplication-config" content="…/browserconfig.xml">

Сам файл будет выглядеть следующим образом:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="…/mstile-70x70.png"/>
            <square150x150logo src="…/mstile-150x150.png"/>
            <square310x310logo src="…/mstile-310x310.png"/>
            <wide310x150logo src="…/mstile-310x150.png"/>
            <TileColor>#ffc40d</TileColor>
        </tile>
    </msapplication>
</browserconfig>

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

В следующем списке приведены некоторые рекомендации по использованию различных размеров:

• Small — 70×70 (Рекомендуемый размер: 128×128)
• Medium — 150×150 (Рекомендуемый размер: 270×270)
• Wide — 310×150 (Рекомендуемый размер: 558×270)
• Large — 310×310 (Рекомендуемый размер: 558×558)

Например, для картинки 70х70 рекомендуемый размер 128х128. Это означает, что нужно создать картинку с прозрачным фоном размером 128х128, название которой будет mstile-70×70. То же самое нужно проделать с остальными размерами.

Подготовка favicons

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

Например, в моем случае вес всех изображений был 200кб, после сжатия 50кб. Качество изображений практически не изменилось. Вы можете воспользоваться любым удобным сервисом для сжатия картинок. Я использовала iloveimg.

Заключение

Последовательность подключения в разметке веб-сайта:

<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" rel="icon" href="…/favicon-120x120.png">
<link type="image/png" rel="icon" href="…/android-icon-192x192.png">

<link rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">

<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">

<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">
<meta name="application-name" content="My Application">
<meta name="msapplication-config" content="…/browserconfig.xml">

<link rel="manifest" href="…/manifest.json">
<meta name="theme-color" content="#ffffff">

С помощью последней строки кода «theme-color» можно закрасить адресную строку и строку уведомлений в любой цвет. В значении content задается цвет.

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

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

иконок сайта — 1,572 бесплатных векторных иконки

• Авторы
• Пакеты
• Дополнительные инструменты

  Прочие товары

  Freepik Бесплатные векторы, фото и PSD Онлайн-редактор Freepik Редактируйте свои шаблоны Freepik Slidesgo Бесплатные шаблоны для презентаций Рассказы Бесплатные редактируемые иллюстрации

  Инструменты

  Образец значка Создавайте шаблоны значков для своих обоев или социальных сетей

  Google Suite

  Иконки для слайдов и документов +2.5 миллионов бесплатных настраиваемых значков для ваших слайдов, документов и таблиц
• английский
  • Español
  • английский
  • Deutsch
  • Português
  • 한국어
• Стать автором
• Стоимость
• Бесплатная регистрация
• Логин

Авторизоваться регистр Редактировать профиль

• Загрузки

  Что это?

• Моя подписка
• Следующий
• Служба поддержки

---

• Выйти

фильтры

Тип

Значок

пак

---

Лицензия

Все

Свободно

Премиум

---

Кураторское содержание

Выбор FlaticonНовинка ,

SEO и веб-иконок — 103 226 бесплатных векторных иконок

• Авторы
• Пакеты
• Дополнительные инструменты

  Прочие товары

  Freepik Бесплатные векторы, фото и PSD Онлайн-редактор Freepik Редактируйте свои шаблоны Freepik Slidesgo Бесплатные шаблоны для презентаций Рассказы Бесплатные редактируемые иллюстрации

  Инструменты

  Образец значка Создавайте шаблоны значков для своих обоев или социальных сетей

  Google Suite

  Иконки для слайдов и документов +2.5 миллионов бесплатных настраиваемых значков для ваших слайдов, документов и таблиц
• английский
  • Español
  • английский
  • Deutsch
  • Português
  • 한국어
• Стать автором
• Стоимость
• Бесплатная регистрация
• Логин

Авторизоваться регистр Редактировать профиль

• Загрузки

  Что это?

• Моя подписка
• Следующий
• Служба поддержки

---

• Выйти

фильтры

Лицензия

Все

Свободно

Премиум

---

Кураторское содержание

Выбор FlaticonНовинка

---

Сортировать по

,

веб-иконок — 135 496 бесплатных векторных иконок

• Авторы
• Пакеты
• Дополнительные инструменты

  Прочие товары

  Freepik Бесплатные векторы, фото и PSD Онлайн-редактор Freepik Редактируйте свои шаблоны Freepik Slidesgo Бесплатные шаблоны для презентаций Рассказы Бесплатные редактируемые иллюстрации

  Инструменты

  Образец значка Создавайте шаблоны значков для своих обоев или социальных сетей

  Google Suite

  Иконки для слайдов и документов +2.5 миллионов бесплатных настраиваемых значков для ваших слайдов, документов и таблиц
• английский
  • Español
  • английский
  • Deutsch
  • Português
  • 한국어
• Стать автором
• Стоимость
• Бесплатная регистрация
• Логин

Авторизоваться регистр Редактировать профиль

• Загрузки

  Что это?

• Моя подписка
• Следующий
• Служба поддержки

---

• Выйти

фильтры

Тип

Значок

пак

---

Лицензия

Все

Свободно

Премиум

---

Кураторское содержание

Выбор FlaticonНовинка ,

3397 пакетов значков веб-сайта — Пакеты векторных значков — SVG, PSD, PNG, EPS и шрифт Icon

• Авторы
• Пакеты
• Дополнительные инструменты

  Прочие товары

  Freepik Бесплатные векторы, фото и PSD Онлайн-редактор Freepik Редактируйте свои шаблоны Freepik Slidesgo Бесплатные шаблоны для презентаций Рассказы Бесплатные редактируемые иллюстрации

  Инструменты

  Образец значка Создавайте шаблоны значков для своих обоев или социальных сетей

  Google Suite

  Иконки для слайдов и документов +2.5 миллионов бесплатных настраиваемых значков для ваших слайдов, документов и таблиц
• английский
  • Español
  • английский
  • Deutsch
  • Português
  • 한국어
• Стать автором
• Стоимость
• Бесплатная регистрация
• Логин

Авторизоваться регистр Редактировать профиль

• Загрузки

  Что это?

• Моя подписка
• Следующий
• Служба поддержки

---

• Выйти

фильтры

Тип

Значок

пак

---

Лицензия

Все

Свободно

Премиум

---

Кураторское содержание

Выбор FlaticonНовинка

---

Сортировать по

,