Сделать иконку для сайта: Как сделать иконку сайта на вкладке

Содержание

Как сделать иконку сайта в поиске Яндекса?

ТЕХПОДДЕРЖКА САЙТОВ

Полезные советы для обслуживания веб сайта и работы с ним

Как сделать фавиконку для сайта

Мы смотрим на сайты в поисковиках и видим слева изящные картинки с символикой сайтов.

Что такое фавиконка (иконка сайта, пиктограмма сайта)?

Это картинка размером 16Х16 пикселей, которая характерна для большинства профессионально сделанных сайтов. В интернет — браузерах иконка сайта показывается в адресной строке и в папке Избранное (отсюда и название Favorite Icon), рядом с названием сайта. Чаще всего в качестве фавиконки используется логотип сайта. Иконка сайта — отличительная черта грамотных сайтов. Она придает ему индивидуальность. Кроме того, при поиске необходимого сайта иконка позволяет ускорить процесс, поскольку выделяет ваш сайт в выданном поисковиком списке. Нужно только настроить параметры поиска.

В Яндексе, например, это делается так: выбрать ссылку «настройка» в верхней части страницы (www.yandex.ru/setup/index.html?rnd=1157334667, в меню «Результаты поиска» выбрать «настройка поиска», а там найти пункт «графика» и отметить галочку «показывать пиктограммы сайтов».

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

Для создания или редактирования иконки подойдет любой редактор иконок. Можно также использовать плагин к Фотошопу Icon Factory, который позволяет создавать фавиконки из уже готовых картинок. Название готового файла должно быть favicon.ico и никаким иным.

Самое логичное и простое объяснение установки плагина для фотошопа «пошагово» для создания формата рисунков .ico вы найдете у Влада Мержевича на странице htmlbook

Однако, во многих случаях не удается произвести вложение плагина в папку фотошопа, например при использовании пакета программ Adobe CS5 возникают иногда трудности. В таком случае (да и во многих других) рекомендуем простенький следующий способ. Рисуете картинку в фотошопе с размерами 16х16px и сохраняете её как gif изображение. После этого переходите на страницу: http://www.codenet.ru/services/png-to-ico/index.php — это он-лайн преобразование файлов в формат ico. Загружаете туда вашу картинку и получаете на выходе нужный вам файл, который размещаете в нужном вам месте.

О том, как это сделать — чуть ниже.

Куда загрузить готовый файл favicon.ico

Готовый файл favicon.ico необходимо загрузить в тот каталог на сервере, где лежит индексный файл вашего сайта. Если это не помогло (поисковые боты должны находить его по умолчанию), или index.html лежит не в корневом каталоге, то добавьте строку
в индексный файл между тегами и .
Кроме того, если вы считаете, что пользователь может занести в «Избранное» не только корневой URL вашего сайта, то скопируйте файл favicon.ico во все директории сайта.

Пример записи для робота между тегами и :

www.

seomax.ru

Влияние фавиконки на ранжирование сайта

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

Favicon изобрели и впервые применили для браузера Internet Explorer пятой версии. Это была небольшая квадратная картинка в формате «.ico». Сейчас этот формат считается устаревшим – для современных браузеров используют фавиконы преимущественно в форматах «.png» и «.gif». Это, во-первых, позволяет отображать иконку в современных популярных браузерах, а во-вторых, – делает изображение более качественным (а в случае с «гифом» еще и анимированным).

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

Индексация

Размещая фавикон на сайте, важно знать, что срок индексации «свежего» фавикона составляет примерно до 3-х недель, а индексация начинается с обнаружения ссылки на картинку роботами поисковиков. Далее роботы скачивают фавиконку, после чего она добавляется в специальную базу иконок. База по данным Яндекса обновляется примерно раз в 1,5-2 недели. Это необходимо учитывать при установке или смене фавикона и стараться способствовать быстрому обнаружению ссылки поисковыми роботами, а именно важно прописывать адрес фавикона в коде главной страницы, располагать ее в корне сайта, использовать статический url картинки, при написании кириллического адреса рекомендуется использовать Punycode, а также не следует забывать проверять код ответа сервера (файл должен отдавать 200 ОК) и отсутствие запрета индексации файла с фавиконом в robots.

txt.

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

Стандартный размер фавикона – 16х16 пикселей. Это классика, внедренная в первоначальных вариантах картинки. Сейчас активно используют и другие форматы: 24х24, 48х48, а также 64х64. Но сотрудники Яндекса рекомендуют не отступать от традиционных размеров иконки — 16х16, а также советуют делать картинку однослойной. Фавиконы больших размеров обычно служат ярлыками при сохранении пользователем страницы сайта на компьютере.

Как правильно установить фавикон на сайт?

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

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

Кроме того, при передаче файла иконки с сервера сайта не забудьте указать корректный тип передаваемых данных — type=»image/x-icon – в случае, если картинка имеет расширение ico.

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

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

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

3 сервиса для автоматического создания фавикона без фотошопа и услуг дизайнера

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

— для разработки иконки на основе уже имеющегося изображения. Задача сервиса – превратить вашу картинку в иконку подходящего размера и формата.

favicon.ru

— здесь можно нарисовать фавикон онлайн и преобразовать его в подходящий формат. Если не получилось – здесь же можно заказать профессиональные услуги.
favicon.cc

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

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

rukala.ru

Почему не отображается фавикон в поиске Яндекса

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

На самом деле совсем недавно у меня так же возник этот вопрос, когда я установила favicon на сайт. Разумеется, в адресной строке браузера он у меня появился, а вот в поисковой выдаче Яндекса нет. Не для кого не секрет что фавикон ( favicon.ico) обязательно нужно установить, чтобы повысить узнаваемость вашего ресурса и отразить его фирменный стиль. Но что же делать если он не высвечивается в поиске?

Теперь рассмотрим все причины, почему не отображается фавикон после его установки. Для начала давайте на всякий случай ещё раз посмотрим, видят ли favicon поисковики Яндекс и Google.

Проверяем фавикон в поисковых системах Яндекс и Google

Для этого вводим в адресную строку браузера этот адрес:

Для Яндекса — http://favicon.yandex.net/favicon/www.yandex.ru (где меняем в конце www.yandex.ru на свой домен).

Для Гугла — http://www.google.com/s2/favicons?domain=www.google.com (а здесь в конце вместо www.google.com так же вписываем имя проверяемого сайта).

В обоих случаях мы увидели, отображается фавикон в поиске Яндекса и Гугла или нет.

Если не отображается фавикон в браузере после установки нужно:
— перезапустить браузер
— почистить кэш
— проверить правильность создания и установки фавикона

Почему не отображается фавикон в поиске Яндекса:

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

2). Скопируйте вот этот код и вставьте его

в админке в файл header.php прямо перед закрывающим тегом (см.картинку ниже) и обновите.Только не забудьте вместо ваш сайт-написать свой домен.

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

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

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

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

С уважением, Анна Федорова

sozdamblog.ru

Как поменять иконку сайта? Инструкция как сделать и установить иконку для сайта самостоятельно

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

Иконка сайта – это специальный значок сайта, который отображается в браузерах пользователей интернета. Данный инструмент получил название favicon.

Название «Favicon» — это английское сокращение от слов FAVorites ICON, что в переводе обозначает «значок для избранного». Иконка веб сайта в браузере отображается в адресной строке, непосредственно перед url-адресом страницы. Так же иконку веб сайта в браузере можно увидеть во вкладках и рядом с закладками.

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

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

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

Создание иконки для сайта

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

Как еще сделать иконку для сайта? Весьма популярно создание иконки для web сайта с помощью специальных программ , позволяющих редактировать изображения по своему усмотрению. Обычно программы отличаются между собой инструментами, встроенным функционалом и, конечно, пользовательским интерфейсом. Одни программы для создания иконок на сайт позволяют одновременно редактировать несколько картинок, другие дают возможность использовать градиентную заливку или 3D эффекты, а третьи имеют простой и понятный интерфейс. Скачать программу для создания иконок можно как здесь, выбрав любую из предложенных, так и поискав в поисковиках:

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

Для того, чтобы сохранить нарисованную иконку для сайта в фотошопе, нужно нажать «сохранить как» и выбрать специальный формат .ico.
Если вы не обнаружили у себя этот формат, не отчаивайтесь — просто стандартный набор форматов изображений Photoshop’а не включает его в себя. Но его очень легко добавить, достаточно лишь скачать плагин ico-формата и распаковать его в папку C:ProgramFilesAdobeAdobePhotoshopCS2Plug-InsFileFormats, после чего при сохранении изображений командой «Сохранить как» в списке доступных форматов появится строчка ICO (Windowsicon)(*.ICO).

Иконки для сайта: размер 16х16 или 32х32?

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

Формат иконки для сайта

На сегодняшний день универсальным форматом иконки для сайта считается формат .ico, так как именно его поддерживают все самые популярные браузеры: Google Chrome, Internet Explorer, Firefox, Opera и Safari. Следующие по универсальности форматы иконки для webсайта – PNG, JPEG, и GIF их поддерживают все браузеры, кроме Internet Explorer’а. А вот анимированные иконки для сайта GIF-формата поддерживают только Firefox и Opera.

Все возможности поддержки браузерами форматов иконок для сайтов представлены ниже:

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

Как добавить иконку на сайт? Установка иконки на сайт

Первым нужно сделать не что иное, как добавить иконку на сайт в прямом смысле слова. Нужно загрузить изображение иконки, сохраненное в выбранном формате, на сервер: в корневую папку сайта (обычно она называется public_html). Как загрузить иконку на сайт? Это можно сделать с помощью специальных программ, помогающих соединиться по FTP или же в менеджере файлов, через панель управления сайтом.
После того, как вставка иконки на сайт произведена, необходимо сделать так, чтобы изображение отображалось в браузере. Для установки иконки на сайт (отображения в браузере) необходимо прописать специальный код и поместить его в правильное место.

Html код иконки для сайта

Обратите внимание на тип картинки иконки, его нужно прописывать в «type».
Например, если у вас картинка иконки имеет формат GIF , тогда код будет выглядеть следующим образом:

gif » type=»image/ gif «>

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

Если вам нужна в wordpress иконка сайта, то необходимо отредактировать файл header. php, в который вставляется этот же код.
Итак, вы теперь знаете, как установить иконку на сайт самостоятельно.

Как поменять иконку сайта? замена иконки сайта

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

seokleo.ru

Если «Яндекс» не видит фавикон — способы решения проблемы

16 февраля 2018 года. Опубликовано в разделах: SEO самостоятельно. 4598

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

Если человек добавляет понравившийся веб-ресурс в «Избранное», то фавикон также остается перед ссылкой.

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

Как правильно размещать фавиконку

Создайте файл формата ico. Допускаются также еще 4 формата: png, а также gif, bmp и jpeg. Размер файла в пикселях должен быть 16 пикс., 32 или 120 (квадратный).
В head главной странице добавьте код:
Для указания адреса на кириллице применяйте Punycode.
Проверьте отображение иконки в браузере:

Если вы действовали по правилам, и ваш веб-ресурс проиндексирован «Яндексом», то через 2 недели после захода робота на сайт появится ваша иконка.

Как «Яндекс» работает с иконками

Яндекс.Бот Yandex/1.02.000, собирающий фавиконки, по расписанию посещает главную страницу каждого сайта в индексе, где HTML ищет путь к favicon.ico.
Если путь не прописан, бот идет в корень.
Иконка преобразовывается в png размером 16*16, затем загружается на сервер фавиконок.
Бот периодически проверяет иконку заново — частота его захода зависит от частоты обновления вашего веб-ресурса.

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

Как проверить, что фавикон корректно отображается в «Яндексе»

Способ первый — Яндекс.Вебмастер.
Если в разделе левого меню «Диагностика» нет уведомления о том, что робот-поисковик не загрузил файл, значит, все в порядке.Если сообщение об ошибке появилось, значит, фавикон не отображается в поиске «Яндекса».
Способ второй: по прямой ссылке на базу фавиконок. Введите адрес: favicon. yandex.net/favicon/ваш домен.Если изображение появляется, значит, все в порядке.
Вариант третий: проверяем фавиконку в базе Google. Если там она отображается, а в «Яндексе» ее нет — попробуйте подождать еще 2 недели. Возможно, фавиконка скоро попадет и в Yandex: www.google.com/s2/favicons?domain=ваш домен
Вариант четвертый: проверка через специальные сервисы. Воспользоваться Favicon Val />
Если не открывается, проанализируйте, не запрещен ли вышеуказанный файл к индексации в robots.txt, или, может быть, есть ошибка в его названии или в метатегах.
Проверьте логин на посещение веб-ресурса роботом-поисковиком, найдите запись:

Если такая запись есть, значит, робот проиндексировал файл.

Если у вас подключен SSL сертификат, вы могли не указать главное зеркало в Яндекс.Вебмастере. Укажите зеркало в HTTPS.
Если в течение 2-х недель после посещения роботом favicon не появился, возможно, «Яндекс» не смог ее распознать.

Варианты решения проблемы

Конвертируйте фавиконку в другой формат (один из разрешенных).
Проверьте ее размер.
Используйте четкие уникальные картинки. Иконки плохого качества могут удаляться из выдачи.
Обновите файл на сайте и дождитесь посещения робота.

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

Как определить, что сайт под фильтром

Соответствующие уведомления в Яндекс.Вебмастере, фатальные ошибки, обнаруженные вирусы.
Резко уменьшилось число проиндексированных страниц.
Упала посещаемость.
ТИЦ не определен. (Пройдите yandex.ru/yaca/cy/ch/ваш домен, если он от 0 или выше, то все в порядке).
Онлайн-сервисы показывают проблемы с сайтом (Xtool, Pr-cy).

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

Проблема с Яндекс.Директ

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

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

– Только качественный трафик из Яндекса и Google
– Понятная отчетность о работе и о планах работ
– Полная прозрачность работ

semantica.in

Не отображается фавикон в Яндексе

Статьи в этой же категории

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

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

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

Что делать, если фавикон не появляется в поисковиках?

Есть несколько причин почему не появляется ваш фавикон в поисковиках:

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

Но прежде посмотрим, видят ли ваш фавикон поисковики.

Проверка на видимость фавикона в поисковиках

В Яндексе: Для этого наберите в адресной строке браузера http://favicon.yandex.net/favicon/www. ………… .ru (вставьте в пустое место ваш домен)

В Гугле: В адресной строке браузера набираем http://www. google.com/s2/favicons?domain=www. ……. .ru (в пустое место пишите свой домен)

В том и другом случае вы увидите в левом верхнем углу ваш фавикон. Ну или не увидите.

На всякий случай перед этим шагом почистите кэш браузера или перезапустите его.

и откройте в админке Внешний вид-Редактор, откройте в редакторе Заголовок (header.php). Вставьте перед тегом данный код и обновите файл.

После внесения этих изменений ждем их индексации поисковыми роботами. Через какое-то время фавикон появится.

Вставить фавикон при помощи плагина

В админке откройте Плагины, в поиске забейте All in One Favicon и активируйте его.

Затем в меню Настройки найдите All in One Favicon, войдите в него и загрузите, указав путь к вашему рисунку фавикона

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

rwix.ru

Сделать иконку для сайта WordPress своими силами

Вступление

Отличительная особенность сайта, видимая в адресной строке браузера, рядом с его адресом и адресами страниц, называется фавикон (favicon). Это маленькая картинка, повторюсь, видимая в адресной строке браузера и его закладках. Как сделать иконку для сайта WordPress в этом посте.

Иконка для сайта WordPress и сегодняшняя реальность

Всё течёт, всё меняется. С недавних пор принципиально сменился способ добавления иконки для сайта WordPress.

Ранее нужно было сделать саму картинку иконки, далее уменьшить её размер и перевести в формат ico, и только потом добавить на сайт. При этом чаще приходилось прописывать meta теги icon в раздел head html кода.

Для рисования иконки есть отличный сервис www.favicon.cc на котором можно нарисовать и скачать иконку в формате ico.

На сегодня для добавления иконки на сайт WordPress достаточно иметь картинку или фото с рекомендованным размером не менее 512×512 px. Читать статью: Как добавить иконку….

Про иконку сайта её изготовление

Чтобы сделать иконку для сайта WordPress можно пойти двумя путями.

Во-первых, взять готовую картинку размером более 512×512 px (лучше квадратные, не круглые) и добавить на сайт из административной панели.

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

Вариант 1

Забрать иконки больших размеров, а именно 512×512 px, можно, например, на этих специальных сайтах.

iconsdb.com
iconfinder.com
iconarchive.com
findicons.com
icons8.ru/icons/

Вариант 2

Создать бесплатно логотип можно на этих сервисах:

logomaster.ai
logaster.ru
turbologo.ru
logotypemaker.com/ru
logomak.com/ru

Вариант 3

Самостоятельно нарисовать уникальную картинку можно в Фотошоп.

Пример, как сделать иконку для сайта WordPress

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

На одном из перечисленных выше сайтов беру иконку Tweeter, 512×512. Фото для удобства просмотра уменьшены.

В поиске беру картинку png прозрачный фон, буквы «П». Крашу её в редакторе Snagit в цвет ободка скачанной иконки (красный).

В редакторе Snagit вырезаю из иконки «птичку» и заливаю «дырку» чёрным цветом.

В редакторе FastStone Image накладываю букву на значок.

Картинка для иконки WordPress сайта готова. Добавляю её на сайт, предварительно сжимаю на сервисе tinypng.com.

Вывод

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

©wpkupi.ru

Еще уроки

favicon.ico и другие форматы, поддержка браузерами

От автора: раньше иконки для сайта были такими легкими. Простой растровый favicon.ico 16х16 пикселей. Это как знак препинания в конце проекта. Для разработчика это эквивалент завершения предложения с восклицательным знаком или точкой. Так было раньше. Но за прошедшие 20 лет все изменилось.

Что такое favicon?

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

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

В списке закладок

Как иконка запуска на домашнем экране устройства и десктопа

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

Firefox показывает большие favicon на стартовом экране и маленькие во вкладке

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

Как правило, браузеры кэшируют favicon. Поэтому если вы планируете делать что-то забавное с несколькими favicon на сайте, кэширование нужно отключить. Один из способов – добавить временную метку в URL favicon.

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

Что такое формат favicon .ico (ICO)?

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

ICO – формат изображений для отображения иконок. Он берет свои корни из первой версии Windows — Microsoft Windows 1.0 – выпущенной в 1985. По факту, это формат-контейнер для хранения одного и более файлов растровых изображений. Изначально файлы должны были быть в формате BMP. Позже появилась поддержка PNG.

В 1999 Microsoft добавила формат ICO в IE5, как способ создавать закладки и определять сайт – так родился favicon.

Изначально favicon в вебе был размером 16х16 пикселей, но со временем появилась поддержка разных размеров в ICO файле (32×32, 24×24, 48×48, 64×64, 128×128 и 256×256).

Возникает вопрос: если favicon.ico может хранить несколько размеров, то какие из них нужно использовать? Вернемся к этому скоро.

Как подключить favicon?

Зачастую термины favicon и иконка взаимозаменяемы. Однако favicon не обязательно должен быть формата ICO. Часто встречаются форматы GIF, PNG, JPG.

Начнем с самого старого и базового способа добавления favicon на сайт.

Размещение favicon.ico в корне сайта

Изначально Microsoft для Internet Explorer 5 разработала способ добавления favicon на сайт. Для этого нужно было сохранить файл иконки в корневой папке сайта с именем favicon.ico. Это все что требовалось, никакого HTML. Большинство браузеров до сих пор проверяют корневую папку на наличие файла favicon. ico.

Позже когда favicon стал частью стандартов HTML 4.01 и XHTML 1.0, рекомендовали использовать тег link для размещения favicon. Рассмотрим этот способ.

Подключение favicon через тег link

После добавления favicon в стандарты HTML, появился новый способ подключения через тег <link rel=»…»> в head документа. Favicon перестал ограничиваться корневой папкой сайта, теперь можно было указать любой путь.

Даже у такого простого предложения есть сложности. Атрибуты rel и type принимают разные значения. Например, все строки ниже будут работать:

Принимаются и другие форматы изображений, так как favicon больше не ограничен форматом ICO:

Подключение иконок через Web App Manifest: manifest.json

Вместе с Progressive Web Apps (PWAs) вы часто будете слышать про файл manifest.json. Файл manifest.json – это JSON файл, позволяющий настраивать внешний вид и запускать действия веб-приложения, которое добавлено в закладки или на домашний экран устройства.

manifest.json позволяет настраивать ряд параметров, среди которых внешний вид иконки, используемой для запуска веб-приложения.

Более подробно о manifest.json и его возможностях читайте в нашей статье manifest.json.

Favicon на домашнем экране устройства Android

Манифест содержит свойство массива icons, с помощью которого можно задавать список объектов изображений, каждое из которых может обладать свойствами src, sizes и type, описывающими иконку.

Файл manifest.json с двумя иконками может выглядеть следующим образом:

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

{

«name»: «mobiForge»,

«short_name»: «mobiForge»,

«icons»: [

{

«src»: «/icon-144×144. png»,

«sizes»: «144×144»,

«type»: «image/png»

{

«src»: «/icon-192×192.png»,

«sizes»: «192×192»,

«type»: «image/png»

}

«theme_color»: «#ffffff»,

«background_color»: «#ffffff»,

«display»: «standalone»

}

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

Подключение иконок через файл browserconfig.xml

browserconfig.xml – это XML файл, с помощью которого можно задавать иконки для Microsoft Windows. Он также размещается в корне сайта. Его код:

<?xml version=»1. 0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square150x150logo src=»/mstile-150×150.png»/> <square310x310logo src=»/mstile-310×310.png»/> <TileColor>#da532c</TileColor> </tile> </msapplication> </browserconfig>

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

<tile>

</tile>

</msapplication>

</browserconfig>

Нас интересуют здесь тег tile и его дочерние элементы. Код сверху определяет иконку с двумя размерами 150×150 и 310×310. Подробнее об этих размерах позже.

Так много способов подключения иконки – какой использовать?

Столько способов подключения favicon. Вы спросите: «какой же использовать?». Теперь самое забавное – все! ОК, весело? Не совсем.

Почему столько много способов подключения favicon?

Ранее мы говорили, что почти все браузеры поддерживают favicon.ico 16×16 и 32×32 в корневой папке. Так почему бы не пойти этим путем? Нам нужно поддерживать разные платформы и плотность пикселей на экране, чтобы иконка всегда хорошо смотрелась на разных размерах и в разных контекстах.

Во-первых, иконка представляет собой точку запуска сайта или приложения. Она всегда должна смотреться хорошо. То есть быть четкой и ясной, без видимых пикселей, а размер и качество должны подходить под разрешение экрана устройства. Favicon 16×16 и 32×32 – это хороший фолбек, но они будут плохо смотреться на экранах с большим разрешением.

На мобильных ОС, например, нужно также подготовить иконку для отображения на домашнем экране. У каждой ОС свои особенности и набор предпочтительных размеров иконок для разных размеров экрана. Файлы Web App Manifest и browserconfig.xml дают разработчику больше контроля над представлением и запуском сайта на разных платформах.

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

У нас есть разные способы подключения иконок. Давайте узнаем, какие размеры использовать. С появления атрибута sizes в HTML5 теперь можно указывать favicon в формате PNG:

Закрепленные вкладки в Safari

Safari использует SVG иконки на закрепленных вкладках. Для этого используется SVG изображение (поэтому размер пикселей неважен):

Плитки Microsoft Windows

Даже если вы не хотите заботиться об ОС Windows Phone mobile (на это есть хорошая причина, она была заморожена), вам все еще нужно думать об иконках на плитках Windows. Они используются в Windows 8 и выше, на планшетах, ноутбуках и ПК.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Плитки Microsoft Windows

Windows 8 и выше использует формат плитки для отображения иконок. Руководство по их проектированию довольно сложное. Мы лишь рассмотрим необходимые размеры.

Базовые размеры плитки, определенные Microsoft:

70×70 (маленькая плитка)

150×150 (средняя плитка)

310×150 (широкая плитка)

310×310 (большая плитка)

В Windows 8.0 и IE 10 плитку 144×144 можно задать в разметке так:

С версии 8.1 можно использовать файл browserconfig.xml и не писать это в head.

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

Наш browserconfig.xml теперь ссылается на изображения плиток, увеличенные на 1.8, и выглядит следующим образом:

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square70x70logo src=»/ms-tile-126.png»/> <square150x150logo src=»/ms-tile-270.png»/> <wide310x150logo src=»/ms-tile-558×270.png»/> <square310x310logo src=»/ms-tile-558.png»/> <TileColor>#009900</TileColor> </tile> </msapplication> </browserconfig>

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

<tile>

</tile>

</msapplication>

</browserconfig>

Edge и IE11 автоматически запрашивает файл browserconfig.xml. Однако конфиг файл можно явно предоставить следующим образом, что позволяет изменить его имя и путь:

Собираем все вместе

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

favicon.ico

favicon-16.png

favicon-32.png

icon-48. png

icon-96.png

icon-144.png

icon-192.png

icon-256.png

icon-384.png

icon-512.png

apple-touch-icon-57.png

apple-touch-icon-60.png

apple-touch-icon-72.png

apple-touch-icon-76.png

apple-touch-icon-114.png

apple-touch-icon-120.png

apple-touch-icon-152.png

apple-touch-icon-167.png

apple-touch-icon-180.png

ms-tile-144.png

ms-tile-126.png

ms-tile-270.png

ms-tile-558×270.png

ms-tile-558.png

И 2 конфиг файла:

manifest.json

browserconfig.xml

Разметка favicon

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

Прозрачность и кадрирование: не все иконки одинаково обрабатываются

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

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

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

Другое различие заключается в кадрировании. iOS добавляет скругленные углы иконкам, Android этого не делает. Windows помещает изображения иконок на плитки и в зависимости от размера плитки и внутреннего отступа иконки последняя может быть либо слишком маленькой, либо слишком большой.

Вывод – нужно проверять рендер favicon на всех платформах.

Нам действительно нужны все эти favicon?

Для такой маленькой иконки очень много работы.

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

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

Пусть браузер сам занимается уменьшением

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

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

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

Минимальный набор иконок

1. Следующие файлы в корневой папке

favicon.ico (с размерами 16×16, 32×32)

favicon-16×16.png: современный эквивалент формата ICO

favicon-32×32.png: Safari

apple-touch-icon-180.png: Apple touch icon

icon-192.png: Chrome/Android

safari-pinned-tab.svg: SVG на закрепленной вкладке в Safari

mstile-150×150.png: MS плитка

2. Файл manifest.json, использующий изображение chrome:

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

{

«name»: «»,

«short_name»: «»,

«icons»: [

{

«src»: «/icon-192. png»,

«sizes»: «192×192»,

«type»: «image/png»

}

«theme_color»: «#ffffff»,

«background_color»: «#ffffff»,

«display»: «standalone»

}

3. Файл browserconfig.xml, использующий изображение mstile

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square150x150logo src=»/mstile-150×150.png»/> <TileColor>#da532c</TileColor> </tile> </msapplication> </browserconfig>

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

<tile>

</tile>

</msapplication>

</browserconfig>

4. Следующая разметка

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

Мы используем manifest.json для Android, Chrome также будет использовать его, если он объявлен.

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

Будущее favicon

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

SVG favicon

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

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

Чтобы использовать favicon SVG, атрибут sizes необходимо установить в значение any:

Автор: Ruadhán O’Donoghue

Источник: //mobiforge.com/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Разработка иконок в Москве — YouDo

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

Что такое иконка?

Иконка — визуальный образ, который, как правило, рисуется в виде трехмерного цветного изображения. Создание иконки для сайта является трудоёмкой работой. Дизайнеру понадобится много времени, если цель – уникальность и привлекательность. В определённых случаях, иконка – небольшое изображения, которое находится во вкладке в браузере при открытии того или иного сайта и имеет расширение ісо (называют favicon.ico).

Индивидуальная иконка – личный стиль сайта

Для начала, иконка – это:

индивидуальность;
привлекательность;
помощник в раскрутке сайта;

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

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

В «Избранном» или в «Закладках» а также в адресной строке любого нынешнего браузера, уникальная иконка всегда будет выделяться среди многих других. Это, конечно же, подтолкнёт каждого на посещения сайта снова и снова. Для разработки иконки такого вида используется favicon – изображение, разрешение которого 16 х 16 пикселей.

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

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

Роль фрилансера

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

оформлении сайтов. Его профессия является творческой, но он также предоставляет другие услуги, как:

оформление сайтов;
написание статей;
поиск бизнес-партнёров;
поддержка сайта.

В общем, услуги фрилансера – это успех сайта. Заказать иконки для сайта можно у этого «разнорабочего» на бирже Юду.

Стоимость работ

Всё зависит от оригинальности и пожелания заказчика. Чем интересней иконка и больше её разрешение, тем выше стоимость. Цена в зависимости от сложности работы и сроков может варьироваться от 5 до 50 долларов.

Как создавать пользовательские веб-иконки (3 шага)

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

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

В этой статье мы поговорим о том, почему вы можете захотеть создать свои собственные значки. Затем мы научим вас, как это сделать с помощью сервиса Futuramo. Приступаем к проектированию!

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

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

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

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

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

Как создать собственные значки для вашего веб-сайта (за 3 шага)

Сейчас мы покажем вам, как создавать собственные значки с помощью простого онлайн-инструмента.Доступно множество вариантов, в том числе Fontastic и Icons Flow, но в этом уроке мы будем использовать Futuramo. Эта платформа очень проста в использовании и позволяет вам выбирать значки из своей библиотеки и настраивать их с помощью различных инструментов для создания чего-то уникального.

Шаг № 1. Создайте учетную запись Futuramo Icons

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

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

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

Шаг № 2: выберите веб-значки, которые вы хотите использовать, и настройте их

Futuramo упрощает настройку веб-значков, которые вы хотите использовать. Справа вы увидите набор всех значков, доступных для использования. Если вы хотите отсортировать их, вы можете нажать на вкладку Sets слева и просмотреть их, отсортированные по категориям: право.Выберите один из них, чтобы начать работу, и нажмите кнопку Добавить в буфер обмена в верхней части экрана:

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

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

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

Наконец, вы можете установить цвета для значка и его границ с помощью инструмента выбора:

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

Шаг №3: Добавьте новые значки на свой веб-сайт

Futuramo позволяет загружать значки в различных форматах. В буфере обмена выберите значки, которые хотите загрузить, и нажмите кнопку Загрузить в верхней части экрана:

Вы сможете выбрать один из пяти форматов. Какой из них вы выберете, зависит от того, как вы собираетесь использовать значки. Если вы просто собираетесь использовать их на своем веб-сайте, PNG, вероятно, является лучшим вариантом из-за его высокого качества.Однако, если вам нужны векторные версии, различные форматы SVG — отличный вариант, если вы знаете, как их использовать:

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

Если вы не используете систему управления контентом (CMS), вы все равно можете добавлять значки в любое место с помощью HTML.Иконки — это, в конце концов, обычные изображения, поэтому их использование должно быть простым.

Иконка веб-сайта Заключение

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

Если вы хотите создавать свои собственные значки вместо использования стандартных опционов, мы рекомендуем использовать сервис Futuramo.Вот как это сделать:

Создайте бесплатную учетную запись.
Выберите нужные значки веб-сайтов и настройте их.
Добавьте новые иконки на свой сайт.

Как сделать значок веб-сайта в CorelDRAW

Обучение
Практические руководства
Сделать значок веб-сайта

Значок веб-сайта, также известный как значок сайта, значок сайта или значок веб-сайта, представляет собой небольшое изображение или логотип на вкладке веб-сайта.Создание значков так же просто, как настройка страницы, добавление изображения и использование параметра «Экспорт» в CorelDRAW для создания файла . ICO. Веб-значки используются везде, от рабочего стола Windows до устройств iOS, OSX или Android, и все они имеют определенные требования.

1. Установите размер страницы

В зависимости от размера изображения будет определяться размер документа.В диалоговом окне «Новый документ» ( Файл > Новый ) в поле Имя : введите имя файла как «4Sale» . Затем в раскрывающемся списке Предустановленное место назначения выберите Web . Вы заметите, что это изменило единицу измерения на пиксели и разрешение рендеринга на 96 dpi. Ниже Размер установите для параметра Ширина значение 130, а для параметра Высота значение 130. Нажмите OK .

2.

Добавление графических элементов
Из ( Файл > Импорт ) перейдите туда, где находится логотип, и импортируйте его. Разместите логотип на странице и увеличьте его размер до 128 x 128.
3. Экспортировать значок
При экспорте изображения, которое будет использоваться в качестве значка, рекомендуется использовать файл .ICO, хотя есть некоторые приложения, которые принимают другие форматы.Выберите дизайн и из ( Файл > Экспорт ) В раскрывающемся списке Сохранить как тип выберите ICO — Ресурс значка Windows 3.x/NT (*.ico;*.exe;*.dll Убедитесь, что установите флажок в параметре Selected only . Нажмите Export . Откроется диалоговое окно Convert to Bitmap . В диалоговом окне Convert to Bitmap примите значения по умолчанию и нажмите OK . Следующее открывающееся диалоговое окно — это Диалоговое окно «Преобразовать в палитру».Здесь вы можете выбрать тип палитры, который должен быть реализован при создании ico-файла.Убедитесь, что в раскрывающемся списке «Палитра» выбран вариант « Оптимизированный ». Это обеспечит наиболее плавные переходы между цветами.
CorelDRAW не просто создает значки веб-сайтов
Ознакомьтесь с некоторыми другими функциями графического дизайна в CorelDRAW Graphics Suite, такими как «Как сделать этикетку», «Как сделать флаер», «Как создать плакат» и другими! Создавайте высококачественные дизайны в веселом и простом в использовании программном обеспечении для графического дизайна и сделайте свою работу более заметной, чем когда-либо.
Как сделать брошюру Как сделать подарочный сертификат Как сделать свой собственный календарь Как сделать инфографику
Создать и добавить пользовательский фавикон в Squarespace 7.
0 и 7.1 Иеремия Сварен | Последнее обновление: 27 октября 2021 г.
Вам надоело видеть этот хромой серый куб на вкладке браузера вашего веб-сайта Squarespace?
Бьюсь об заклад, посетители вашего сайта тоже устали от этого!!
Если вы более визуальный ученик, посмотрите видео ниже, в противном случае читайте дальше!
Пользовательский значок Favicon не только помогает выделить ваш веб-сайт в переполненной папке закладок, но также может действительно помочь вашему бренду закрепиться в сознании ваших клиентов.
И откуда, черт возьми, взялось слово Favicon? Ну, это происходит от значка, который виден в избранном вашего веб-браузера. Значок также отображается рядом с URL-адресами в некоторых результатах поиска!
Я также должен упомянуть, что наиболее распространенный тип файла для Favicon называется ICO. Это файл особого типа,
Создайте значок браузера
Возможно, у вас еще нет Favicon… ПОКА!
Самый простой и быстрый инструмент для создания простого Favicon — Favicon. io
Используйте этот бесплатный онлайн-инструмент, чтобы либо загрузить изображение PNG для преобразования, либо преобразовать текст в ICO
Загрузить свой Favicon In 7.1
Войдите в настройки бэкенда Squarespace
Перейдите в «Дизайн»
Нажмите «Значок браузера»
Нажмите «Добавить значок»
Выберите свой значок и нажмите «Сохранить»
Squarespace
Вы превзошли пространство ?
Поднимите свой сайт на новый уровень! Сделайте шаг сегодня, чтобы перенести свой веб-сайт на перспективную платформу, созданную для , скорость и , масштаб .
Загрузите свой Favicon In 7.0
Войдите в настройки бэкенда Squarespace
Перейдите в «Дизайн»
Нажмите «Логотип и название»
Прокрутите вниз до «Значок браузера (Favicon)»
Нажмите «Добавить favicon»
Выберите свой Favicon и нажмите «сохранить»
Та-да!
Теперь ваш сайт выглядит еще более профессионально!
Если вы хотите получить больше от своего сайта Squarespace, ознакомьтесь с другими нашими руководствами по Squarespace.
Бесплатный ускоренный курс веб-дизайна и SEO!
Получите еще клиентов и развивайте свой бизнес!
Вводя свой адрес электронной почты, вы соглашаетесь получать письма от Svaren Web Studio. Вы можете отписаться в любое время.
Иеремия Сварен носит почти все шляпы в Svaren Web Studio. Он начал заниматься веб-дизайном и разработкой еще в 2013 году. Сначала начал учиться самостоятельно с помощью книг и руководств, а затем в 2014 году поступил в Техническую академию в Портленде, штат Орегон.Он узнал все о программной инженерии и решил заняться фрилансом. Теперь, когда он не помогает клиентам, он делает полезный контент здесь и на своем YouTube-канале Svaren.
См. также
Как создать и добавить фавикон WordPress или значок сайта
Фавикон, сокращение от «любимый значок», также может называться значком сайта. Если вы сейчас посмотрите на страницу своего браузера, скорее всего, там будет отображаться несколько фавиконов. Однако вы, возможно, никогда сознательно не замечали фавиконы, не знали, что они из себя представляют и что они делают.Итак, что такое фавикон и зачем он нужен вашему сайту WordPress?
В этой статье мы объясним, что такое фавикон и какую пользу он может принести вашему бизнесу или блогу. Затем мы рассмотрим, как вы можете быстро и легко добавить его в свой блог WordPress.
Что такое фавикон/значок сайта?
Фавикон — это значок, который отображается на вкладке браузера рядом с заголовком страницы веб-сайта. Фавиконы также можно увидеть рядом с названием веб-сайта в списке сайтов с закладками, а также использовать их в качестве значков приложений, а в WordPress они также могут называться «значком вашего сайта».
Фавиконы обычно берут изображение логотипа сайта, который они представляют. Однако это также может быть изображение, связанное с брендингом или стилем сайта, если это более подходит. После того, как фавикон выбран, его нельзя менять, если только ваш бизнес не подвергается ребрендингу. Таким образом, посетители вашего веб-сайта узнают ваш фавикон и узнают его в ряду вкладок браузера.
Важность использования Favicon
Favicons предназначены для визуального маркетинга и связи с посетителями вашего сайта.Добавление фавикона позволит вашей аудитории подсознательно и мгновенно идентифицировать ваш веб-сайт WordPress в море приложений или веб-страниц.
Знакомство с вашим фавиконом поможет вашей аудитории быстро и легко найти вас. Это также напомнит пользователям о существовании вашего сайта, что приведет к увеличению трафика и числа вернувшихся посетителей. Наконец, фавикон поможет вашему сайту выделиться среди конкурентов и сделать ваш сайт авторитетным источником.
Как видите, преимущества использования фавиконки огромны.Итак, давайте теперь узнаем, как создать фавикон и добавить его на свой веб-сайт WordPress…
Создание фавиконки
Первым шагом в процессе создания фавикона является создание подходящего изображения. Как уже упоминалось, в идеале фавикон должен совпадать с логотипом вашего веб-сайта, чтобы посетители могли сразу его распознать.
Однако иногда со сложными логотипами это может привести к нечеткому или запутанному значку значка. В этом случае вам придется упростить свой логотип или использовать другое изображение.Обязательно выберите что-то, что представляет ваш бизнес и явно отражает ваш бренд.
Создание или редактирование изображения Favicon
Согласно Кодексу WordPress, изображения favicon должны быть квадратными и иметь размер не менее 512 x 512 пикселей. Хотя изображения в WordPress можно обрезать, я бы посоветовал заранее отредактировать изображение с помощью программного обеспечения для редактирования.
Если вы хотите создать новое изображение с нуля или ваш логотип нуждается в серьезных корректировках, то лучше всего использовать профессиональную программу редактирования.Photoshop или GIMP — отличные варианты.
Использование Canva
Тем не менее, более простое решение для тех, у кого меньше опыта в дизайне, — использовать Canva. Этот бесплатный веб-сайт с инструментами для графического дизайна позволит вам легко отредактировать изображение и сделать его готовым к фавиконам. Измените размер логотипа или измените цвет или прозрачность, чтобы создать фавиконку, подходящую для вашего сайта.
Когда изображение, которое вы собираетесь использовать в качестве фавиконки, вас устраивает, его необходимо сохранить в формате gif, png или jpeg.Теперь вы готовы загрузить свой значок на свой веб-сайт WordPress…
Как добавить Favicon на ваш сайт/блог WordPress?
Раньше добавление значка сайта лучше было оставить веб-разработчикам и тем, кто имеет глубокие знания в области кодирования. Однако, к счастью, после выпуска WordPress 4.3 добавление фавиконки стало чрезвычайно простым и понятным.
Откройте панель управления WordPress и в меню выберите Внешний вид > Настроить . Это откроет живой настройщик WordPress с предварительным просмотром домашней страницы вашего сайта.
Выберите Идентификатор сайта . Здесь вы увидите отображаемое название сайта и значок сайта.
В разделе Значок сайта вы можете добавить, изменить или удалить свой значок. Нажмите на Выберите изображение .
Теперь ваша медиатека WordPress появится на вашем экране. Выберите вкладку Загрузить файлы , а затем либо перетащите изображение фавикона в поле, либо выберите его на своем компьютере.
Вернитесь в свою медиатеку, убедитесь, что ваше изображение отмечено галочкой, а затем нажмите . Выберите в правом нижнем углу.WordPress теперь спросит вас, хотите ли вы обрезать изображение. Если вы уже редактировали изображение в программе редактирования, выберите Skip Cropping . В противном случае, обрезать.
В настройщике под Значок сайта, вы увидите загруженное изображение. Выберите Сохранить и опубликовать в верхней части настройщика, а затем обновите страницу. Теперь вы сможете просматривать свой значок на вкладке браузера веб-страницы.
Если в какой-то момент вы захотите изменить свой значок, в разделе Значок сайта просто выберите Изменить изображение .Однако, как упоминалось ранее, это не рекомендуется, если вы не проводите ребрендинг. Если вы постоянно меняете свой значок, ваша аудитория не сможет определить, какое изображение представляет ваш веб-сайт, когда они просматривают вкладки своего браузера или приложения.
Другие способы добавления фавикона на ваш сайт WordPress
Конечно, есть и другие способы добавить значок на ваш сайт WordPress. Давайте рассмотрим несколько вариантов…
Фавикон от RealFaviconGenerator
Многие люди предпочитают использовать плагины для добавления функциональности на свой сайт, а не полагаться на тему.Favicon от RealFaviconGenerator – это плагин для WordPress, который является отличным вариантом, если вы хотите добавить фавикон на свой веб-сайт.
Установите плагин на свой веб-сайт WordPress, а затем просто укажите и щелкните, чтобы загрузить изображение и добавить его в качестве фавикона. Затем RealFaviconGenerator сгенерирует все значки, которые вам нужны для различных браузеров и устройств. Это простой плагин, который можно загрузить и использовать бесплатно.
Загрузка через страницу параметров вашей темы
Многие из новых тем поставляются с многочисленными функциями и функциями, что позволяет людям быстро и легко создавать новые веб-сайты WordPress.Некоторые из этих тем теперь имеют возможность добавить для вас фавикон. Проверьте страницу параметров вашей темы, чтобы узнать, предлагает ли она эту функцию. Например, тема Total WordPress включает параметры для вашего Favicon (и различных размеров устройств) на встроенной панели тем.
Использование кода
Если вы предпочитаете кодировать свой веб-сайт, вы можете загрузить изображение фавикона в корневой каталог вашего сайта. Затем код необходимо добавить в файл header.php.Для получения дополнительной информации об этом процессе, а также сведений о размере изображения и типе файла, в котором необходимо его сохранить, см. документацию поддержки WordPress.
Последние мысли
Как видите, загрузка фавикона на сайт WordPress — очень простой процесс. Преимущества наличия фавикона впечатляют, маркетинговая тактика, которая позволит вашим пользователям идентифицировать ваш сайт, просто заметив ваше изображение. Так что сделайте своим приоритетом найти свободные полчаса в день и настройте свой сайт с фавиконкой.
У вас уже есть свой фавикон? Пожалуйста, поделитесь своими успехами в комментариях ниже…
5 лучших значков веб-сайтов + 5 инструментов для поиска значков
Хотите сделать свой веб-сайт и графику более удобными для клиентов? Затем используйте значки веб-сайтов и эти 6 лучших практик, чтобы ваши значки сияли.
Перейти вперед
В этой статье
Иконография, или информационные значки, относится к использованию и дизайну значков. Иконки — это изображения, представляющие действие или идею.
В наши дни значки используются во всем Интернете. Фактически, некоторые значки веб-сайтов, которые вы, вероятно, видите (и используете) каждый день:
Знак «X» в верхней части страницы, обозначающий закрытие окна или страницы
Стрелка вниз для загрузки чего-либо
Птица Twitter для перехода на канал бренда в Twitter
A03 небольшой аккумулятор для уровня мощности вашего устройства
Если вам интересно, почему значки так широко используются, это потому, что они создают лучший пользовательский интерфейс (UI), чтобы посетители вашего сайта могли получить лучший пользовательский интерфейс (UX).
Прежде чем мы будем слишком довольны пользователями или аббревиатурами, давайте проясним, что означают эти два термина:
Пользовательский интерфейс относится к страницам и информационным панелям, которые люди используют при посещении веб-сайта или приложения. Например, домашний экран вашего смартфона — это пользовательский интерфейс, который вы, вероятно, используете каждый день.
UX относится к опыту, который ваши клиенты получают при использовании вашего веб-сайта или приложения для удовлетворения потребности, например, при поиске информации или покупке чего-либо.
Итак, как значки делают пользовательский интерфейс вашего сайта и UX посетителей максимально удобными?
Во-первых, значки экономят место на вашем веб-сайте, что особенно полезно, если многие из ваших посетителей используют небольшие устройства, такие как смартфоны или смарт-часы, для доступа к вашему сайту.
Во-вторых, значки разбивают стены текста, что помогает вашим пользователям быстрее обрабатывать информацию вашего сайта. Они служат визуальными ярлыками, поэтому ваши посетители могут найти то, что им нужно на вашем сайте, без необходимости рыться в абзацах текста.
Это ускоренное поглощение также имеет смысл, учитывая, что люди могут обрабатывать изображения всего за 0,013 секунды.
У экономии места и упрощения восприятия контента есть одно важное преимущество — простая навигация.
Это настолько важно, что ошеломляющие 94% людей утверждают, что навигация по веб-сайту является самой важной функцией веб-сайта.
Кроме того, простая навигация может впоследствии привести к увеличению продаж. В конце концов, посетители, которые быстрее находят то, что хотят, дольше остаются на вашем сайте и с большей вероятностью просматривают ваши платные предложения.
(Кстати, если вам нужны дополнительные советы по созданию страниц, которые конвертируют ваших клиентов, ознакомьтесь с этими 5 настройками пользовательского интерфейса, чтобы повысить доверие к страницам продаж.)
Итак, вот вывод:
Иконки — это графические символы, облегчающие вашим клиентам поиск информации на вашем веб-сайте. Они улучшают пользовательский интерфейс и UX вашего сайта, оптимизируя контент и упрощая навигацию.
ОК. Мы рассмотрели, как иконки используются для дизайна веб-сайтов. Давайте совершим небольшой экскурс и рассмотрим, как значки используются в вашей графике, поскольку там они так же полезны.
Как иконография используется в графике?
Так же, как и на вашем сайте, иконография используется в графике для оптимизации вашего визуального контента и облегчения его восприятия.
Подобно содержимому вашего сайта, значки разбивают фрагменты текста на вашей графике, что помогает привлечь и поддерживать интерес вашей аудитории. Разбиение блоков текста также может упростить просмотр вашего изображения для людей, которые не читают его слово в слово.
Подумайте, как сложно было бы читать эту инфографику, если бы авторы не включили несколько значков.
Как видите, значки разбивают статистику и копируют, облегчая восприятие.
Иконки также используются для введения или выделения темы перед тем, как перейти к деталям.
Например, в этой инфографике используются значки для визуального представления того, что описывает следующий текст.
Использование значков, таких как сигарета от кашля курильщика и ингалятор от астматического кашля на приведенном выше рисунке, помогает читателям усвоить суть сообщения, даже если они не читали текст под ним.
Кроме того, простой для понимания контент с визуальными элементами делает вашу графику более доступной для совместного использования, поэтому стоит включить значки в ваши проекты и идеи цифровой загрузки.
В двух словах:
Используйте значки в своей графике, чтобы разбить текст, сделать контент удобным для восприятия, а также представить или подчеркнуть тему.
Теперь, когда мы рассмотрели, что и зачем использовать иконки, давайте рассмотрим шесть правил иконографии, которые должен знать каждый создатель.
5 правил использования иконок для веб-сайтов и графики
Правило №1: Используйте знакомые значки
Первое правило иконографии — использовать общие значки, узнаваемые в вашей отрасли и странах, где вы обслуживаете клиентов.
Немногие иконки действительно универсальны. Редко все люди от Небраски до Нигерии понимают, что определенные значки имеют одинаковое значение и цель. Кроме того, исследования показали, что уровень распознавания пользователей зависит от того, насколько они знакомы с определенными значками.
Однако есть широко используемых значков в определенных странах и отраслях, и именно эти значки вы хотите включить в свой дизайн.
Например, значок принтера обычно используется для обозначения печати чего-либо.Gmail использует значок принтера на своей панели инструментов, чтобы символизировать печать электронной почты.
Если бы Gmail использовал другой значок для обозначения функции печати, например, букву «P» или значок листа бумаги, это было бы гораздо менее интуитивно понятным.
Аналогичным образом, значок человека в инвалидной коляске часто используется для представления различных требований доступности.
Например, Zoya использует этот значок на своем веб-сайте, чтобы посетители могли сделать свой веб-сайт более доступным, если это необходимо.
Помимо использования знакомых значков, также разумно избегать их вариаций. Например, воздержитесь от использования двух или трех версий значка кнопки «Домой» на разных страницах вашего сайта, а лучше используйте одни и те же значки «Домой» на каждой странице.
Использование знакомых значков может быть причиной того, что посетители найдут то, что им нужно на вашем сайте, и покинут его из-за разочарования.
Резюме:
Используйте интуитивно понятные, знакомые значки на своем сайте, чтобы придать контенту единообразный визуальный эффект и упростить навигацию по страницам.
Есть такое понятие как тоже знакомое однако. Читайте дальше, чтобы узнать, почему вам следует избегать слишком распространенных значков с несколькими значениями.
Правило № 2: помните о значках с несколькими значениями
В то время как наше первое правило заключается в использовании знакомых значков, второе правило заключается в том, чтобы обращать внимание на значки, которые слишком знакомы и имеют несколько значений.
Опять же, немногие значки действительно универсальны.
Возьмем, к примеру, подарочную иконку.
На Гарри и Дэвиде значок подарка представляет списки подарков клиентов.
Uncommon Goods использует значок подарка для обозначения своего инструмента поиска подарков.
С другой стороны, Slack когда-то использовал значок подарка для представления уведомлений и обновлений программного обеспечения.
Хотя на первый взгляд это может показаться несерьезной проблемой, использование многоцелевого значка может плохо повлиять на работу пользователей, вызывая путаницу.
Когда пользователи не знают значения значка, они используют визуальные подсказки и просто догадываются, что делают незнакомые значки.
Это, конечно, может привести к большому количеству кликов по вашему сайту впустую и, в свою очередь, к отказу от разочарования.
Значит ли это, что вам придется использовать несколько однозначных значков?
Не совсем. Маркировка значков может помочь вашим пользователям понять их использование и значение (подробнее об этом позже).
Вы также можете использовать более подробные значки и значки, представляющие конкретные вещи.
Фактически, исследование показало, что люди могут более правильно интерпретировать значение значка, независимо от их культурного происхождения, если оно содержит больше деталей и является более конкретным.
Конечно, вы захотите протестировать значки со своей аудиторией, чтобы увидеть, достаточно ли детализации или конкретности (об этом мы также поговорим чуть позже).
Как правило, лучше использовать значки, которые не похожи на другие значки.
В противном случае вы можете получить за это флик, как это сделал Slack после смены значка логотипа. Многие люди отметили, насколько это похоже на другие компании, например, приложение Google Photos.
Старайтесь не использовать значки с несколькими значениями, чтобы уберечь аудиторию от путаницы.
Теперь, когда у вас есть прекрасный баланс между обычными и слишком распространенными значками, давайте добавим третий элемент — простоту.
Правило №3: Используйте простые значки
Наше следующее правило иконографии — выбирать простые, а не замысловатые значки.
Причина в том, что сложные значки могут быть труднее распознать на небольших экранах.
Они также могут иметь неясное или двусмысленное значение для пользователей из разных областей, что, конечно же, влияет на пользовательский опыт ваших посетителей и сокращает время, которое они проводят на вашем сайте.
Так что, если вы найдете эффектный и сложный дизайн значка, который хотите использовать, вы можете пересмотреть его и выбрать вместо него более простой.
В конце концов, люди обычно предпочитают значки, которые представляют идеи или действия в знакомой, наглядной (похожей на картинку) и простой форме.
Итак, как же выглядит «простая» иконка?
Простые значки имеют мало линий и деталей.
Возьмем, к примеру, этот значок для функции YouTube «создать видео или опубликовать», который имеет только два цвета и простое изображение камеры со знаком «плюс» над ним.
Еще один способ добиться «простоты» — использовать значки из одного семейства, то есть все значки имеют одинаковый стиль иллюстрации, цветовую схему и так далее.
Например, легко сказать, что эти значки из одного семейства, так как все они имеют оранжевый фон. Каждая иконка также имеет закругленные края вместо острых.
В этой инфографике о контент-маркетинге также используются значки из того же семейства. Все значки имеют одинаковую цветовую схему (белый с темно-синими и фиолетовыми акцентами) и имеют одинаковый угловатый стиль.
Выглядит просто и понятно, не так ли?
Еще один совет по использованию простой иконографии — убедитесь, что между значками и фоном отображается достаточный цветовой контраст.
В частности, избегайте использования светлых цветов, если на вашем сайте нет темного фона. Иконки в темных тонах обычно лучше, так как их лучше видно на белом или светлом фоне, который характерен для большинства сайтов.
Разноцветные значки с множеством деталей, такие как этот набор значков на Flaticon, вероятно, не так легко увидеть на вашем сайте и не обеспечат максимальную контрастность.
Если вы колеблетесь между обведенным или заполненным значком, любой выбор — хороший выбор (без каламбура).
Одно исследование не обнаружило существенной разницы в скорости или точности при выборе между этими стилями значков.
Что имеет значение , так это расстояние между значками. Одно исследование показало, что изменение расстояния между значками увеличивает время поиска пользователями, что усложняет UX и может привести к тому, что посетители покинут ваш сайт.
Всего:
Используйте простые значки из того же семейства, используйте высокий цветовой контраст между значками и фоном и равномерно распределяйте значки.
Чтобы сделать значение ваших значков более понятным, рассмотрите возможность добавления меток.
Правило № 4: маркируйте свои значки
.
Еще одно правило иконографии — маркировать значки, чтобы добавить ясности.
Хотя значки предназначены для экономии места и упрощения дизайна, добавление текстовых меток к значкам может помочь прояснить их значение.
Взгляните, например, на ярлыки в навигации по веб-сайту Publix.
Это делает их навигацию очень ясной и прямой.
Вы также можете размещать метки под значками, как это делает Canva на своей панели дизайна.
Добавление ярлыков под или рядом с вашими значками также повышает удобство работы ваших клиентов на веб-сайте.
В одном исследовании пользовательский интерфейс со значками с метками был признан более простым в использовании и более полезным, чем другие измеряемые форматы.
Ярлыки
также могут помочь прояснить назначение значка на различных устройствах.
Это важно, учитывая, что в 2017 году в среднем на человека в Северной Америке приходилось восемь подключенных к сети устройств. По прогнозам, к 2022 году их будет 13,4.
Даже если вы не маркируете свои значки, хорошим правилом является , а не использование значков для обозначения идеи. Иконки предназначены для визуального улучшения или выделения чего-то написанного в тексте, а не для использования в качестве секретного кода.
Очень немногие значки используются для обозначения одного и того же во всем мире, а расшифровка только усложняет обмен сообщениями.
Подводя итог:
Маркировка значков делает их значение более понятным для ваших посетителей, что делает их более приятными и эффективными.
Однако самые явные значки в мире не принесут большой пользы вашей аудитории, если вы не будете следовать нашему пятому правилу.
Правило №5: Делайте иконки большими (достаточно)
Наше пятое правило иконографии — отображать значки достаточно большого размера.
Это особенно важно для ваших мобильных зрителей, которых много.
В 2019 году 51,51% веб-трафика приходилось на мобильные устройства.
Итак, убедитесь, что ваши значки достаточно велики, чтобы их можно было распознать на устройствах любого размера.
Одно исследование рекомендует, чтобы значки были размером не менее 0,7 сантиметра, если смотреть на них с расстояния 40 сантиметров (около 15,7 дюймов).
В том же исследовании также рекомендуется расстояние между значками примерно такого же размера, как и сами значки.
Независимо от размера значков, суть здесь проста: сделайте значки достаточно большими, чтобы их можно было легко увидеть и коснуться на мобильном устройстве.
Это особенно важно, если вы используете детализированные значки. В противном случае их значение может быть неясным, и вы рискуете потерять своих зрителей — как с точки зрения понимания вашего контента, так и с точки зрения отказа от вашего сайта.
Итак, теперь, когда вы готовы правильно использовать значки в своих проектах, вот несколько ресурсов для библиотек значков.
5 библиотек иконок для поиска и создания иконок
Существует множество бесплатных или недорогих веб-сайтов со значками, на которых можно найти профессиональные значки для своего веб-сайта и графического дизайна.
Некоторые веб-сайты со значками, на которые стоит обратить внимание:
№1. Флатикон
Количество иконок: Более 2 386 000 иконок
Цена: 11,99 долларов США в месяц (или 8 долларов США в месяц).25 в месяц выплачивается ежегодно)
Для кого лучше:
№ 2. Проект существительного
Количество иконок: Более 2 миллионов
Цена: $39,99 в год
Для кого лучше:
#3: Круглые значки
Количество иконок: Более 42 000 иконок
Стоимость: Единовременный платеж в размере 99 долларов США
Для кого лучше:
# 4: Оптимизация
Количество иконок: Более 30 000
Цена: Бесплатно для пакета Free Icon Pack, 194 доллара США для Essential Pack, 274 доллара США для Ultimate Pack
Для кого лучше:
Создатели, которые ищут библиотеку (а не торговую площадку) с отличными наборами иконок UX и UI
Создатели, готовые заплатить немного больше за надежную библиотеку иконок
#5: Иконмонстр
Количество иконок: Более 4486
Цены: Бесплатно для коммерческого использования
Для кого лучше:
Информационный бюллетень
Подпишитесь на нашу рассылку
Присоединяйтесь к тысячам авторов, получающих наши еженедельные статьи о запуске, росте и процветании в качестве творческого предпринимателя.
Используйте значки, чтобы сделать ваш сайт приятным для изучения
Правильные значки могут направить ваших клиентов на нужные страницы и контент, чтобы они оставались на сайте дольше или совершали покупки.
Некоторые рекомендации по использованию значков на вашем веб-сайте:
#1. Используйте значки, знакомые вашей аудитории
#2. Будьте осторожны при использовании значков с несколькими значениями
#3.Выбирайте простые, а не замысловатые значки
#4. Пометьте свои значки, чтобы добавить ясности
#5. Сделайте свои значки достаточно большими, чтобы их можно было распознавать и нажимать на любом устройстве.
Имея под рукой эти рекомендации и инструменты для значков, мы уверены, что вы быстро создадите удобный веб-сайт.
Нужно где-то создать этот сайт? Не ищите дальше Подии. Начните сегодня с нашего ультра-дружественного конструктора веб-сайтов бесплатно.
Добавление значка главного экрана iOS для вашего веб-сайта
На устройствах iOS с помощью браузера Safari вы можете добавить на главный экран ярлык любого сайта в Интернете. По умолчанию эти ярлыки будут отображаться в виде снимка экрана веб-сайта. В этой статье объясняется, как установить значок для вашего веб-сайта, чтобы при сохранении на домашних экранах iOS вместо него отображался этот значок.

Создание и загрузка вашего значка
Изображение для ярлыка должно быть размером 150×150 пикселей.Это позволит использовать его на всех устройствах iOS, включая обычные дисплеи и дисплеи Retina!
Кроме того, чтобы значок работал правильно, он должен соответствовать следующим спецификациям:
Необходимо сохранить в формате .png
Должно быть название apple-touch-icon
После того, как вы создали значок, вы можете загрузить его в область «Содержимое» >> «Файлы» в вашей учетной записи «Создать» (не в область изображений).
Чтобы загрузить иконку:
Войдите в свою учетную запись Создать учетную запись
Нажмите «Содержимое» в верхнем меню
Нажмите «Файлы» в меню слева
Нажмите кнопку «Добавить файл»
Следуйте инструкциям, чтобы загрузить изображение
Добавление значка на ваш сайт
После того, как вы загрузили значок, вам нужно будет добавить небольшой фрагмент кода в Custom страницы, для которой вы хотите использовать значок, если вы хотите использовать его для любой страницы, на которой есть ярлык. создан для, вам нужно будет вставить код на каждую страницу отдельно.Код ниже:

Информация, следующая за href, представляет собой путь к файлу, который вы только что загрузили. Это должен быть файл, уникальный для вашего сайта.
Чтобы получить путь к файлу для загруженного значка, просто щелкните значок «ссылка» в разделе «Файлы».

Отобразится URL-адрес значка.
Скопируйте и вставьте этот путь к файлу точно так, как он отображается в приведенном ниже коде.

Чтобы затем добавить этот код в свой пользовательский:
Нажмите «Содержание» в верхнем меню
Щелкните значок «Параметры страницы» рядом со страницей, на которую вы хотите добавить значок.
Перейдите на вкладку «Метаинформация»
Вставьте код в пользовательское поле
Сохраните изменения и повторите при необходимости
Чтобы изменения вступили в силу, вам необходимо опубликовать свой сайт.
Проверка значка
Обновление значка после публикации сайта может занять несколько часов.Когда вы будете готовы к тестированию, просто выполните следующие действия на своем устройстве с iOS (например, iPad или iPhone):
На устройстве iOS откройте браузер Safari и перейдите на страницу своего сайта, для которой вы хотите создать ярлык
.
Щелкните значок общего доступа в браузере
Выберите вариант «Добавить на главный экран»

На странице «Добавить на главную» вы должны увидеть загруженный значок слева

Если вы не видите загруженный значок, дважды проверьте, выполнили ли вы описанные выше действия, в том числе отформатировали файл в соответствии с требованиями.
Как установить WordPress Favicon | Иконки сайта
Значок – это уникальный значок для вашего веб-сайта. Он отображается на WordPress.com, на вкладке браузера посетителя, в виджетах, таких как «Блоги, на которые я подписан», а также в виде закладки и значка приложения на главном экране при сохранении в браузере или телефоне. Вот несколько примеров:
Значок сайта на вкладке браузера на рабочем столе Значок сайта на ярлыке мобильного устройства Отображение виджета Blogs I Follow
Посмотрите короткое видео о том, как добавить или изменить значок сайта ниже.

Добавить значок сайта
Вы можете загрузить значок сайта, выполнив следующие действия:
Перейти к Мой сайт → Внешний вид → Настроить → Идентификация сайта.
Нажмите Выберите значок сайта . Будет показана ваша медиатека.
Выберите существующее изображение или загрузите новое.
Для достижения наилучших результатов загрузите квадратное изображение шириной и высотой не менее 512 пикселей.
Нажмите Выберите . Затем вам может быть предоставлена возможность обрезать изображение, чтобы убедиться, что оно квадратное. Вы также можете пропустить шаг обрезки, если хотите.
Нажмите кнопку Сохранить изменения , когда вас устроит значок.
Может пройти несколько часов, прежде чем вы увидите новый значок сайта. Если значок не обновляется, вы также можете попробовать очистить кеш браузера.
↑ Содержание ↑
Удаление значка сайта
Вы можете удалить пользовательский значок сайта, выбрав Мой сайт → Внешний вид → Настроить → Идентификация сайта и нажав кнопку Удалить .
Помогите нам улучшить:
Мы всегда стремимся улучшить нашу документацию. Если эта страница не ответила на ваш вопрос или оставила вас желать большего, дайте нам знать! Мы любим слышать ваши отзывы. Для поддержки, пожалуйста, используйте форумы или контактную форму поддержки. Спасибо!
.