Значки преимущества для сайта: 15 лучших и крупнейших библиотек иконок / Блог компании Edison / Хабр

Содержание

15 лучших и крупнейших библиотек иконок / Блог компании Edison / Хабр

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

Сразу уточняем: это не 15 самых лучших библиотек, а 15 из лучших. Разумеется, есть и другие, не менее замечательные, о которых я не упомянул или не знаю.
И, нет, это не рейтинг — список маркированный, а не нумерованный.


Перевод сделан при поддержке компании EDISON.

Мы занимаемся доработкой и сопровождением сайтов на 1С-Битрикс, а также делали сайты и приложения для Московского ювелирного завода.

Мы очень любим создавать и поддерживать сайты! 😉










The Noun Project — это громадная библиотека иконок, количество коих, по слухам, перевалило за 2 миллиона. Всё это создано самими участниками — у проекта огромное активное сообщество, к которому можно присоединиться.









iconmonstr — это библиотека значков, предлагающая более 4-х тысяч иконок, распределённых в три с лишним сотни различных коллекций. Библиотека поддерживается одним человеком. Очень круто, что SVG-версии можно получить в виде HTML-кода прямо на сайте, так что скачивание необязательно.









Good Stuff No Nonsense — и это библиотека, также созданная кем-то единолично. Всё отрисовано вручную.









Унифицированные иконки на Orion предлагаются в 4-х стилях:
Line, Solid, Color и Flat.
Адаптируется к любому типу проекта посредством изменяемой толщины линий, контролем цветности и отличной читаемости.









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









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









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









Под два миллиона бесплатных векторных пиктограмм в форматах SVG, PSD, PNG, EPS или ICON FONT. Тысячи тысяч бесплатных значков в крупнейшей базе векторных иконок по свободной лицензии от Flaticon!

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









Ну и куда уж без Font Awesome, возможно, самой известной библиотеки иконок.









iconscout — это миллионы различных иконок на всевозможные темы, которые только возможно придумать. Здесь пользователи могут создавать собственные значки и делиться ими, а также составлять коллекции, которые потом могут просматривать другие посетители.









Iconfinder в настоящее время — одна из крупнейших библиотек с более чем 3-мя миллионами бесплатных и платных иконок, объединённых в более чем 25 тысяч наборов.








PixelLove — это более 5 тысяч иконок для платформ iOS и Android, предназначенных для дизайнеров, создающих мобильные сайты и приложения. Все иконки доступны в различных размерах пикселей.









Streamline Icons

— это 10+ тысяч пиктограмм с тремя разными значениями толщины линий (Light, Regular, Bold).

53 категории, 720 подкатегорий и более 30 тысяч иконок.









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









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

Оформление блоков с иконками

.iconblock-6 {

    background: #FFF;

    margin: 20px 0;

    border: 1px solid #C5C5C5;

    box-shadow: 0 4px 4px 0 rgba(84, 84, 84, 0.3);

}

.iconblock-6 .top {

    position: relative;

    z-index: 1;

    height: 100px;

}

.iconblock-6 .top .pic {

    position: relative;

    z-index: 1;

    height: 100px;

    overflow: hidden;

    transition: all 0.3s;

}

.iconblock-6:hover .top .pic {

    height: 180px;

}

.iconblock-6 .top .pic img {

    position: absolute;

    z-index: -1;

    top: -35%;

    transition: all 0.3s;

    width:100%;

}

.iconblock-6:hover .top .pic img {

    top: 0;

}

.iconblock-6 .top .pic:before {

    content: '';

    position: absolute;

    z-index: 1;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    background: rgba(255, 255, 255, 0. 3);

}

.iconblock-6:hover .top .pic:before {

    background: rgba(255, 255, 255, 0);

}

.iconblock-6 .top .icon {

    position: absolute;

    z-index: 1;

    left: 50%;

    top: 50%;

    transform: translate3d(-50%, -10px, 0);

    transition: all 0.3s;

}

.iconblock-6:hover .top .icon {

    transform: translate3d(-50%, -20px, 0);

}

.iconblock-6 .top .icon img,

.iconblock-6 .top .icon i

{

    border-radius: 50%;

    border: 2px solid #337AB7;

    font-size: 64px;

    color: #337AB7;

    padding:28px;

    box-sizing: content-box;  

    width:64px;

    height:64px;

    background: linear-gradient(to top, #BDE1FF, #FFF);

}

.iconblock-6:hover .top .icon img,

.iconblock-6:hover .top .icon i

{

    background: #FFF;

}

.iconblock-6 .body {

    text-align: center;

    margin-top: 90px;

}

. iconblock-6 h4 {

    transition: all 0.7s ease 0s;

    color: #337AB7;

    font-size:20px;

    margin:10px 0;

}    

.iconblock-6:hover h4 {

    color: #000;

}

Как создать иконку для вашего проекта: советы и полезные сервисы

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

Анализ ассоциаций

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

Исследование конкурентов

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

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

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

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

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

Например, иконка мобильного приложения должна выполнять функцию идентификации и выделять его среди других приложений на смартфоне. Это касается как списка программ уже на смартфоне, так и в магазине приложений (App Store, Google Play).

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

Уникальность и узнаваемость

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

Поменьше деталей

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

 

Вторая иконка приложения смотрится лучше за счет простоты и минимализма.

Определите приоритетность размера

Существует два подхода к создания иконки.

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

 

Нужно несколько иконок? Создавайте сет!

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

Не жалейте места

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

Разные иконки для разных платформ

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

Цвет очень важен

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

Обходитесь без текста

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

Ищите баланс между оригинальностью и простотой восприятия

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

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

Не забывайте о фоне

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

Элементам интерфейса приложения нет места на иконке

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

Иконка должна быть информативной

Эффективная иконка своим видом сообщает о функции приложения. Так пользователь сможет понять для чего ваш продукт до того, как заглянет в описание. Например, для иконок плееров используют изображения нот, инструментов или визуалайзеров, для камер или графических редакторов – объектив фотоаппарата, а для мессенджеров вроде Viber – символичные облачка сообщений.

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

Ксения Маевская, разработчик приложения Помню-Напомню.

Теперь, когда мы узнали советы как создавать эффективную иконку, представляем вашему вниманию полезные сервисы для ее создания.

Полезные сервисы и ресурсы для создания иконки

IconsFlow – Векторные Иконки

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

Fontawesome

Шрифтовые иконки для использования с Twitter Bootstrap

COLOURlovers

Здесь можно найти и бесшовные текстуры и готовые палитры. Также на этом ресурсе есть форум, где ведется общение. Отличный сервис для подбора цвета вашей иконки.

Colorscheme

Профессиональный онлайн-сервис, позволяющий сгенерировать цветовую схему в соответствии с правилами колористики на цветовом круге.

Gradients

 

Автоматическое создание градиентов.

Logomak

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

Руководство, посвященное Material Design для Android

Руководство по iOS Human Interface от Apple.

Пошаговая инструкция создания иконки

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

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

Одним из онлайн сервисов, который позволяет быстро создавать современные иконки является IconsFlow.

Пару слов о возможностях сервиса:

  • Возможность экспорта иконок в SVG (вектор), PNG и ICO формах;
  • Загрузка своих собственных иконок;
  • Большой функционал по редактированию;
  • Возможность создания пакетов иконок в одном стиле;
  • Бесплатные варианты.

Теперь перейдем к процессу создания иконки.

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

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

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

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

То есть, кликая в одном месте,  вы меняете дизайн всех иконок сразу : тени, размер, фон, и т.д. Очень удобно, если вам нужно создать 3-5 или более иконок.

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

Вот собственно и все.

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

Читайте также:

Как правильно проектировать минималистичный дизайн

Как использовать анимацию для улучшения UX

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

бесплатные иконки для сайта. Инструменты веб-дизайнера #1

Автор Илья Чигарев На чтение 5 мин. Просмотров 5.4k. Обновлено

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

Но сейчас хочу посвятить ему отдельную статью. Что это за сервис? Как им пользоваться?

Если Вы занимаетесь веб-дизайном, создаете сайты, например, как я лендинги, то этот сервис Вас будет очень сильно выручать. Как выручает и меня. Сайт FlatIcon.com — лучший сервис с иконками во flat-стиле в интернете.

 

Здесь можно скачать иконки бесплатно и использовать где угодно. Как мы видим из заголовка, здесь 173 тыс. иконок и 2700 паков, то есть наборов иконок. Это очень много. Здесь Вы найдете абсолютно все иконки, любой тематики, которая Вам нужна.

Видеоверсия статьи:

Хотите научиться делать сайты?
Чтобы сэкономить на разработке или зарабатывать деньги создавая сайты для других? Недавно я записал новый курс "Идеальный сайт на WordPress" и "Лендинг в Elementor", где рассказал пошаговый план как создавать крутые сайты. Разработкой занимаюсь более 7-ми лет, на сайтах зарабатываю более 50 тысяч в месяц и в курсе я выложил всю технологию как делать такие сайты. Курс новый - 2020 года. Берите пока свежий. Подробнее читайте по ссылке.

Как пользоваться сервисом FlatIcon?

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

Пишем в строке поиска Money и здесь появляется подсказка. То есть можно выбрать, например, money bags, то есть сумка, мешок с деньгами, или money card – это пластиковая карта и т.д.

Видим много вариантов иконок. С недавнего времени добавили еще цветные иконки . Это очень круто!

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

 

Вот мы видим, есть классные иконки в таком стиле, очень интересно. Я бы использовал такие на своем сайте. Так же здесь есть фильтр поиска. Он несложный. Первым идет выборка по цвету (color) — одноцветный (monocolor) или многоцветный (multicolor)


Давайте понажимаем, посмотрим. Вот выбрали одноцветный, показывается черный вариант. Либо multicolor — это с использованием нескольких цветов.

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

Здесь недавно добавили хорошую фишку. Когда мы наводим на иконку — есть два варианта, что можем с ней делать. Это либо добавить в коллекцию, либо увеличить, посмотреть и уже здесь скачать, либо так же добавить в коллекцию.
Что такое коллекция? Если мы нажимаем добавить в коллекцию. Cверху справа видим квадратики – это и есть наша коллекция. То есть, если нужно несколько иконок, а зачастую это так, чтобы не открывать кучу вкладок с иконками мы просто создаем коллекцию.

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

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

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


Чтобы скачать, нажимаем на download collection, выбираем нужный формат, я выбираю png, и нужный размер, например 64. В новом окне нажимаем free download и идет скачивание архива. Final

Очень просто, очень классный сервис! Я им пользуюсь при создание каждого сайта. Вам тоже советую его выбирать.

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


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

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

Так же можно создавать множество коллекций, сейчас вроде только до пяти. Но это тоже не так критично.

В принципе я пользуюсь бесплатным тарифом, он меня устраивает. Выбрал иконку, цвет, размер – скачал.
Вот такой сервис FlatIcon.

Надеюсь я ответил на вопрос Где скачать бесплатные иконки.

Пишите в комментариях, пользуетесь или нет и свои мысли по-поводу этого сервиса. На сколько он крут и полезен. 

иконок преимуществ - 3057 бесплатных векторных иконок

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

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

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

    Инструменты

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

    Google Workspace

    Иконки для слайдов и документов +2. 5 миллионов бесплатных настраиваемых значков для ваших слайдов, документов и таблиц
  • английский
    • Español
    • английский
    • Deutsch
    • Português
    • Français
    • 한국어
  • Стать автором
  • Стоимость
  • Бесплатная регистрация
  • Войти
Авторизоваться регистр Фильтры

Тип

Икона

Упаковка


Лицензия

Все

Свободный

Премиум


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

иконок преимуществ - 3057 бесплатных векторных иконок

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

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

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

    Инструменты

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

    Google Workspace

    Иконки для слайдов и документов +2. 5 миллионов бесплатных настраиваемых значков для ваших слайдов, документов и таблиц
  • английский
    • Español
    • английский
    • Deutsch
    • Português
    • Français
    • 한국어
  • Стать автором
  • Стоимость
  • Бесплатная регистрация
  • Войти
Авторизоваться регистр Фильтры

Тип

Икона

Упаковка


Лицензия

Все

Свободный

Премиум


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

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

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

Преимущества Иконки Изображения, стоковые фотографии и векторные изображения

В настоящее время вы используете более старую версию браузера, и ваш опыт работы может быть не оптимальным. Пожалуйста, подумайте об обновлении. Учить больше. ImagesImages homeCurated collectionsPhotosVectorsOffset ImagesCategoriesAbstractAnimals / WildlifeThe ArtsBackgrounds / TexturesBeauty / FashionBuildings / LandmarksBusiness / FinanceCelebritiesEditorialEducationFood и DrinkHealthcare / MedicalHolidaysIllustrations / Clip-ArtIndustrialInteriorsMiscellaneousNatureObjectsParks / OutdoorPeopleReligionScienceSigns / SymbolsSports / RecreationTechnologyTransportationVectorsVintageAll categoriesFootageFootage homeCurated collectionsShutterstock SelectShutterstock ElementsCategoriesAnimals / WildlifeBuildings / LandmarksBackgrounds / TexturesBusiness / FinanceEducationFood и DrinkHealth CareHolidaysObjectsIndustrialArtNaturePeopleReligionScienceTechnologySigns / SymbolsSports / RecreationTransportationEditorialAll categoriesMusicMusic ГлавнаяПремиумBeatШаблоныШаблоныДомашняя страницаСоциальные медиаШаблоныFacebook ОбложкаFacebook Mobile CoverInstagram StoryTwitter BannerYouTube Channel ArtШаблоны печатиВизитная карточкаСертификатКупонFlyerПодарочный сертификатРедакцияДом редакцииEnterta inmentNewsRoyaltySportsToolsShutterstock EditorMobile appsPluginsImage resizerFile converterCollage makerColor schemesBlogBlog homeDesignVideoContributorNews
PremiumBeat blogEnterprisePricing

Вход

Зарегистрироваться

Меню

FiltersClear allAll изображений
  • Все изображения
  • Фото
  • Vectors
  • Иллюстрации
  • Editorial
  • Видеоматериал
  • Музыка

Иконки сайтов - Поддержка - WordPress. com

Значок сайта (или «Блаватар») - это уникальный значок для вашего сайта. Он отображается на сайте WordPress.com, на вкладке браузера вашего посетителя, в таких виджетах, как «Блоги, которые я отслеживаю», а также в виде закладки или значка приложения на главном экране при сохранении в браузере или телефоне.

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

Вот несколько примеров:

Значок сайта на вкладке браузера рабочего стола

Значок сайта на ярлыке мобильного устройства

Блоги Я слежу за отображением виджетов

Добавить или изменить значок сайта

Вы можете загрузить собственный значок сайта, перейдя в Мой сайт → Настройки , и на вкладке Общие нажмите кнопку Изменить :

Будет показана ваша медиабиблиотека. Вы можете выбрать существующее изображение или загрузить новое. Помните рекомендуемый минимальный размер 512 пикселей в ширину и в высоту. Выбрав изображение, нажмите Продолжить .

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *