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

Как Создать и Добавить Иконку для Сайта — Favicon

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

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

1. Какие требования к размеру и формату иконки

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

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

• .ico (.icns в macOS) — своего рода стандарт, используется повсеместно.
• . png — более современный вариант, тоже широко распространен и поддерживается даже во многих старых браузерах.

Можно использовать и другие форматы? например, jpeg или gif. Из-за особенностей браузеров и разных ОС мы рекомендуем выбирать ico. Самый каноничный формат, с которым точно не ошибетесь.

Рекомендуемые размеры для иконок:

• 16 на 16 px
• 32 на 32 px
• 192 на 192 px
• 512 на 512 px

2. Как и где создать иконку для сайта

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

https://icons8.com — отличный сервис с большим выбором иконок и удобным поиском. Вам достаточно просто отыскать понравившуюся иконку и скачать её.

https://iconsflow.com — на этом сайте кроме большого выбора макетов вы также можете отредактировать иконку: изменить её форму, добавить фон, стиль отображения и пр.

3. Как добавить иконку на сайт

Есть несколько вариантов добавить иконку на сайт.

Вариант 1 — Загрузить иконку в формате favicon.ico в корневой каталог сайта. Все браузеры автоматически распознают этот файл и отобразят изображение в качестве иконки на вкладке. Файл нужно загрузить в корень сайта через файловый менеджер или FTP, формат файла обязательно должен быть ico.

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

<link rel=»shortcut icon» href=»/images/favicon.png» type=»image/png»>

Вариант 3 — Воспользоваться стандартным загрузчиком CMS. Все популярные платформы для разработки сайта: WordPress, Joomla, Opencart уже имеют встроенный функционал для загрузки иконок. Вам достаточно открыть настройки сайта и загрузить иконку стандартным способом.

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

Как сделать пиктограмму иконку логотип сайта

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

Сразу хочу опровергнуть одно заблуждение.У некоторых пользователей Интернета бытует мнение (сам слышал такое утверждение) что если у сайта нет иконки значит он какой-то «левый» и лучше его не открывать а то можно подхватить вирус»!!!. Это абсолютно неправильно и вам это скажет любой разработчик сайта . Сайты с иконкой или без нее ничем не отличаются друг от друга в смысле «авторитетности»,»правильности», или «безопасности».Тем более что многие поисковые системы ее не показывают.

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

Изображение пиктограммы сайта в результате выдачи запросов поисковых систем будет отображаться только после посещения сайта роботом а на это уходит от нескольких недель до 2-3 месяцев. Если пиктограмма не показывается, можно проверить сервисом пройдя по ссылке http://www.htmlkit.com/go/favicon/validator/ Так что пиктограмма это просто картинка к вашему сайту и ничего более.

А теперь о том как создать Favicon.Стандартный, размер иконки 16×16 ,формат ico, но возможны и другие форматы: gif, jpeg, png и bmp. Иконку можно скачать, в Интернете их большой выбор,или нарисовать самому ,но лучше и надежнее сделать это в специальных программах таких как например Favicon.ru .В этой программе вы можете заказать,сделать из готового изображения и сами нарисовать.

Нарисовав изображение ,нажмите кнопку «скачать favicon» и в открывшемся окне нажать «Скачать».Сохраните полученный файл favicon.ico в корневую папку вашего сайта.Корневая папка это там где находится главная страница вашего сайта index.html,можно и в другое место ,тогда надо будет прописать путь к favicon.ico .

Теперь надо ввести код иконки в главную страницу сайта.Внутри тега <head></head> html-кода главной страницы сайта введите:
<link rel=»icon» href=»favicon.ico» type=»image/x-icon»>
Этот код пишут когда главная страница и favicon.ico находятся в одной папке ,если favicon.ico находится в другой, то пропишите путь в поле «href» вот так:
<link rel=»shortcut icon» href=»путь к файлу/favicon. ico» type=»image/x-icon»>

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

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

Здравствуйте уважаемые начинающие веб-мастера. Продолжим тему Первичная оптимизация.

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

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

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

Иконку можно сделать двумя способами:

1. Самостоятельно.

2. С помощью специального сервиса.

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

Сначала о трудностях. Favicon — это как правило изображение, и изображение очень маленькое. Размеры его составляют 16 х 16, или 32 х 32 пикселя.

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

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

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

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

Заключается он в использовании сервиса по созданию иконок.

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

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

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

1. Выбрать картинку и загрузить её в сервис (Кнопка «Загрузить файл»).

2. Выбрать размер иконки (Кнопка «Создать favicon»).

3. Получить готовый файл с расширением .ico

4. Загрузить полученный файл, в корневую папку сайта.

Первые два пункта никакой сложности не представляют вообще. Единственный совет, который хотелось бы дать — это выбирайте картинку всё же поменьше, и с одинаковыми высотой и шириной.

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

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

Начнём с того, что Мы нажали «Скачать favicon.ico». Что и как с ним делать дальше?

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

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

После сохранения, щёлкнем по файлу правой правой клавишей, и просканировав его анти вирусом, перейдём в «Свойства».

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

Нажимаем «Разблокировать», и «ОК», после чего системное окно закроется.

Открываем его снова, щёлкнув по файлу правой клавишей, и выбрав «Свойства». Информация в окне должна выглядеть вот так.

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

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

Оказавшись в каталоге, выбираем Ваш сайт, затем «public.html», затем «Загрузить», далее выбрать, и выбираем, полученный нами favicon.

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

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

Желаю творческих успехов.

Перемена

Жена — мужу.
-Дорогой, я не хочу-у-у к маме!!!
-Молчи и копай.

Сайт в интернете, что дальше? Оптимизация сайта < < < В раздел > > > Что такое язык HTML и для чего он нужен

 

Как Добавить Favicon для Сайта

Sait

access_time

9 декабря, 2020

hourglass_empty

2мин. чтения

Введение

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

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

К предложению

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

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

Вариант 1 — Позволить браузеру автоматически добавить favicon (нет необходимости в изменении кода сайта)

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

1. Во-первых, чтобы изображение нормально отображалось в браузере, оно должно быть квадратной формы в любом из представленных форматов (jpg, bmp, gif, png). Конечно, возможно использование не квадратного изображения, но выглядеть оно будет не так аккуратно.
2. Этот вариант добавления favicon требует конвертации вашего изображения в формат .ico. В Интернете можно найти множество онлайн инструментов для этого, мы воспользуемся одним из самых популярных — convertico.com.
3. После открытия сайта convertico.com, вы увидите кнопку для выбора и загрузки вашего изображения:

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

5. Скачайте ваше изображение нажав на белую стрелку и сохраните ваш файл .ico на компьютере.
6. Теперь переименуйте файл в favicon.ico, чтобы браузер мог распознать данный файл.
7. Последним этапом станет загрузка изображения в каталог вашего сайта. Для загрузки вы можете использовать Файловый менеджер или FTP клиент. В хостингах на базе Linux, это обычно каталог public_html. Однако он может отличаться у различных хостингов, или в связи с вашими собственными настройками. В таком случае лучше проконсультироваться у поставщик услуг хостинга.

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

ВАЖНО! Если вы не видите новый favicon, очистите кэш вашего браузера и перезапустите его.

Вариант 2 — Использовать обычную картинку и указать ее в коде сайта

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

1. Во-первых, чтобы изображение нормально отображалось в браузере, оно должно быть квадратной формы в любом из представленных форматов (jpg, bmp, gif, png). Конечно, возможно использование не квадратного изображения, но выглядеть оно будет не так аккуратно.
2. Загрузите изображение в каталог вашего сайта. Для загрузки вы можете использовать Файловый менеджер или FTP-клиент. В хостингах на базе Linux, это обычно каталог public_html. Однако он может отличаться у различных хостингов или в связи с вашими собственными настройками. В таком случае лучше проконсультироваться у поставщик услуг хостинга.
3. Теперь вам необходимо определить изображение, которое будет использоваться в качестве favicon в коде вашего сайта. Добавьте эту строку между тегами <head></head> в код вашего сайта:

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>

ВАЖНО! Измените png на формат вашего изображения в type=»image/png»  и favicon.png на имя вашего изображения.

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

Теперь ваше изображение должно отображаться в качестве favicon для вашего сайта.

ВАЖНО! Если вы не видите новый favicon, очистите кэш вашего браузера и перезапустите его.

Заключение

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

Фавикон: зачем нужен, как создать и поставить на сайт

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

Что такое фавикон

Фавикон (favicon, сокращенное от favourite icone) — маленькая иконка, которая сопровождает сайт в интернет-среде. Эта иконка появляется на вкладках, в результатах поиска и помогает сайту быть более узнаваемым.

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

Зачем нужен фавикон

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

Помогает в навигации

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

Фавиконы можно увидеть:

Крупные фавиконы на стартовой странице Mozilla Firefox

Вызывает доверие

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

Сайты с фавиконками и без них во вкладках мобильного браузера

Увеличивает кликабельность

Нет информации о том, является ли наличие фавиконки фактором ранжирования. Но

если сайт проще найти в результатах поиска, а доверие к нему выше — это повышает кликабельность.

Создание favicon

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

Визуальная составляющая

Что учитывать при создании фавиконки:

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

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

Отличный фавикон у «Google Диска». Разноцветный треугольник хорошо смотрится в любом размере.

Логотип «Google Диска» и он же в виде фавиконки на вкладке

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

Логотип SendPulse и он же в виде фавиконки на вкладке

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

Логотип VC.ru и он же в виде фавиконки на вкладке

Требования «Яндекс» к фавиконке

Размер: 120 * 120 пикселей, 32 * 32 или 16 * 16.

Формат: SVG (рекомендуемый), ICO, GIF (без анимации), JPEG, PNG, BMP.

Вот что «Яндекс» пишет по поводу фавиконок:

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

Раздел «Яндекс.Справки» о фавиконках

Требования Google к фавиконке

Размер: кратный 48 — 144 * 144, 96 * 96, 48 * 48. Загружать файл 16*16 не рекомендуется.

Формат: SVG, ICO, GIF (без анимации), JPEG, PNG.

Кроме этого, Google рекомендует следующее:

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

Раздел документации Google о фавиконках

Сервисы для создания фавиконки без программиста

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

Realfavicongenerator

Этот сервис просит квадратный исходник с оптимальным размеров 260 на 260 пикселей. Здесь можно самостоятельно настроить результат: покрутить фон, отступы, цветовую тему.

Настройка получившихся иконок в Realfavicongenerator

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

Пакет нужно скачать в виде файлов и куска кода

Favic-o-matic

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

Результат создания фавиконок в Favic-o-Matic

Favicon.ico & App Icon Generator

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

Готовый пакет фавиконок и код для сайта в Favicon.ico & App Icon Generator

Faviconit

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

Готовый пакет фавиконок и код для сайта в Faviconit

Как добавить фавикон на сайт

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

Загружаем иконки на сайт

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

Корневая папка сайта может называться public_html, www, html или site. Если такой не найдете, уточните у своего провайдера. Загрузите все полученные на предыдущем шаге файлы в корневую папку.

Редактируем код

Теперь нужно открыть код главной страницы сайта. Там же, в файловой системе сайта, найдите файл под названием head или header. Откройте его и вставьте полученный ранее код в элемент <head>. Выглядеть это будет примерно так:

<head>

…

<link rel=»icon» href=»/favicon. ico» type=»image/x-icon»>

…

</head>

Остается подождать, пока поисковики проиндексируют появивишиеся фавиконки для сайта.

Фавикон: что следует запомнить

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

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

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

Готовую фавиконку можно даже использовать в рассылках. Регистрируйтесь в SendPulse и создавайте красивые письма в удобном блочном редакторе!

[Всего: 2   Средний:  5/5]

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

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

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

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

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

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

Иконка 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 совета дизайнерам, которые помогут значительно ускорить работу

Как создать иконку для сайта?

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

Создать иконку для сайта, способы

Существует несколько способов создания иконки для сайта, давайте их рассмотрим:

1. Создать иконку с помощью программ, например, Favicon Create, Adsen FavIcon. Для создания иконки необходимо установить программу, загрузить файл картинки в одном из поддерживаемых форматов, например, *.jpg, *.jpeg, *.bmp. Картинку можно сделать в любом графическом редакторе, например, в Adobe Photoshop, либо скачать из Интернета готовый вариант. Далее нужно конвертировать эту картинку в формат иконки (.ico). Данный способ требует времени на установку программы и на знакомство с ее интерфейсом.

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

Создать иконку для сайта, примеры

Рассмотрим пример создания иконки для сайта с помощью онлайн-сервиса по шагам:

1. Заходим на сайт «favicon.ru». Здесь необходимо выбрать картинку для нашей будущей иконки. Для этого нажимаем кнопку «Выберите файл», затем «Создать favicon.ico!».

2. Иконка для сайта создана. Можно посмотреть пример ее отображения в браузере. Если нас все устраивает, скачиваем иконку на компьютер — для этого нажимаем по ссылке «Скачать favicon.ico».

Чтобы установить иконку на сайт нужно cкопировать файл иконки в корневую папку и в шапке сайта между тегами <head></head> добавить код:

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

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

Понравилось? Поделитесь с друзьями!

Добавление значка на главный экран iOS для вашего веб-сайта

На устройствах iOS, использующих браузер Safari, вы можете добавить ярлык на домашний экран для любого сайта в Интернете. По умолчанию эти ярлыки отображаются как снимок экрана веб-сайта. В этой статье объясняется, как установить значок на свой веб-сайт, чтобы он отображался при сохранении на домашних экранах iOS.

Создание и загрузка вашего значка

Изображение для ярлыка должно иметь размер 150×150 пикселей.Это позволит использовать его на всех устройствах iOS — с обычными дисплеями и дисплеями Retina!

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

• Необходимо сохранить в формате .png
• Должен быть назван Apple-Touch-icon

После того, как вы создали свой значок, вы можете загрузить его в область Content >> Files в вашей учетной записи Create (не в область изображений).

Для загрузки значка:

1. Войдите в свою учетную запись
2. Нажмите «Содержимое» в верхнем меню.
3. Нажмите «Файлы» в левом меню.
4. Нажмите кнопку «Добавить файл».
5. Следуйте инструкциям, чтобы загрузить изображение

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

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

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

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

После этого отобразится URL-адрес значка.

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

Чтобы затем добавить этот код в свой собственный:

1. Нажмите «Содержимое» в верхнем меню.
2. Щелкните значок Параметры страницы рядом со страницей, на которую вы хотите добавить значок
3. Щелкните вкладку «Мета-информация»
4. Вставьте код в поле «Custom»
5. Сохранить изменения и повторить при необходимости
6. Вам нужно будет опубликовать свой сайт, чтобы изменения вступили в силу

Тестирование иконки

Обновление значка после публикации сайта может занять несколько часов.Когда вы будете готовы к тестированию, просто выполните следующие действия на своем устройстве с iOS (например, iPad или iPhone):

1. На устройстве iOS откройте браузер Safari и перейдите на страницу своего сайта, на которой вы хотите создать ярлык для
.
2. Щелкните значок общего доступа в браузере

   
   

3. Выберите опцию «Добавить на главный экран»
   
   
4. На странице «Добавить на главную» вы должны увидеть загруженный вами значок слева.

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

Как создавать собственные веб-значки (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.Вот как это сделать:

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

Как создать и добавить значок WordPress или значок сайта

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

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

Что такое значок Favicon / Site?

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

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

Важность использования фавикона

Favicons предназначены для визуального маркетинга и взаимодействия с посетителями вашего сайта.Добавление значка позволит вашей аудитории подсознательно и мгновенно идентифицировать ваш веб-сайт WordPress в море приложений или веб-страниц.

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

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

Создание значка Favicon

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

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

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

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

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

Использование Canva

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

Когда вы будете довольны изображением, которое собираетесь использовать в качестве своего значка, его необходимо сохранить в формате gif, png или jpeg.Теперь вы готовы загрузить свой значок на свой сайт WordPress…

Как добавить значок на свой сайт / блог WordPress?

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

Откройте панель управления WordPress и в меню выберите Внешний вид> Настроить . Это откроет живой настройщик WordPress с предварительным просмотром домашней страницы вашего сайта.

Выберите Идентификатор сайта . Здесь вы увидите отображаемый заголовок и значок сайта.

В разделе Site Icon вы можете добавить, изменить или удалить свой значок. Щелкните Выберите изображение .

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

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

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

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

Другие способы добавления значка на ваш сайт WordPress

Конечно, есть несколько других способов добавить значок на ваш сайт WordPress. Давайте посмотрим на несколько вариантов…

Фавикон от RealFaviconGenerator

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

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

Загрузка через страницу параметров вашей темы

Многие из новых тем имеют множество функций и возможностей, что позволяет пользователям быстро и легко создавать новые веб-сайты WordPress.Некоторые из этих тем теперь имеют возможность добавления значка для вас. Проверьте страницу параметров вашей темы, чтобы узнать, предлагает ли она эту функцию. Например, тема Total WordPress включает параметры для вашего Favicon (а также для различных размеров устройств) на встроенной панели темы.

Использование кода

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

Последние мысли

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

Ваш фавикон уже настроен и работает? Пожалуйста, поделитесь своими впечатлениями в комментариях ниже…

Как создать веб-иконку в Adobe Illustrator

Adobe Illustrator • Уроки Андрей Штефан • 28 июля 2014 г. • 11 минут ПРОЧИТАТЬ

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

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

Для этого урока я взял гипотетический веб-сайт электронной книги (назовем его Libro), который может использовать некоторые визуальные элементы, чтобы пользователь, просматривающий его, мог различать разные разделы, просто глядя на значки. Поскольку самая популярная программа для чтения электронных книг производится Amazon, мы будем использовать Kindle в качестве визуального представления портативности устройства и создадим из него векторную иконку.

Шаг 1 — Проведите исследование

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

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

Лучшие ресурсы для этого:

Конструктор электронных писем

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

Попробуйте бесплатноДругие продукты

• Словарь : Будь то в Интернете или в твердом переплете, этот маленький парень всегда поможет вам получить первое представление о том, каким должен быть или представлять ваш продукт.
• Веб-сайт, специализирующийся на работе с иконками. : Попробуйте Iconfinder, у которого есть отличная поисковая система, которая просматривает тонны категоризированных значков, связанных с определенными ключевыми словами.
• Прогулка по городу : Вы будете поражены количеством информации, которую наше окружение может предложить в виде символов.
• Google: Если есть что-то, что Google делает лучше всего, так это поиск релевантной информации (определения, характеристики и наиболее важные изображения), напрямую связанной со словом, которое вы ищете.

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

Шаг 2 — Начать рисование

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

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

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

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

Шаг 3 — Запуск Illustrator

Неважно, давно ли вы работаете с пикселями или только начинаете, — одним из самых важных инструментов является Adobe Illustrator.Я не буду говорить о самом программном обеспечении, но проведу вас через настройку New Document и начало создания значка.

3.1. Создать новый документ

Предполагая, что у вас уже есть Illustrator, работающий в фоновом режиме, создайте новый документ, нажав Ctrl + n (или ⌘ + n , если вы используете Mac) или перейдя в FILE> New… и давайте рассмотрим некоторые из настроек , которые появятся во всплывающем окне.

• Имя : Это очевидно; дайте ему любое имя, подходящее для вашего проекта.
• Профиль : это важно, потому что графика, предназначенная для Интернета, будет отличаться от графики, основанной на профиле для печати. Убедитесь, что в раскрывающемся меню выбрано Web .
• Количество артбордов : Артборд согласно Adobe представляет области, которые могут содержать фактические графические объекты. Я обычно выбираю больший артборд, даже если у меня несколько дизайнов, и кладу их на разные слои, чтобы они были под рукой, и выбираю именно те, которые я хочу увидеть.
• Ширина и Высота : Меры, в соответствии с которыми вы можете изменить размер монтажной области — в нашем случае мы выберем размер 120 на 120 пикселей.
• Единицы : Illustrator предназначен для использования в Интернете и для печати, поэтому у вас есть много вариантов; для этого проекта мы будем использовать пикселей.
• Цветовой режим : еще раз проверьте, подходит ли этот параметр для материала, для которого вы создаете. RGB (красный, зеленый, синий) — это цвет, специфичный для цифрового носителя, тогда как CMYK (голубой, пурпурный, желтый, черный) используется в проектах, связанных с печатью.Для нашего проекта мы будем использовать RGB.

Быстрый совет : Узнайте больше о различиях между RGB и CMYK в этом официальном руководстве Adobe (которое хорошо объясняет ключевые различия, о которых вам необходимо знать).

• Raster Effects : можно выбрать одно из трех значений

1. Экран (72 ppi), — значение по умолчанию. Это стандартный вариант, который вы бы выбрали, если бы создавали дизайн для Интернета (что в нашем случае так и есть).
2. Средний (150 пикселей на дюйм).
3. High (300 пикселей на дюйм). Две последние опции предназначены для графики, которая будет использоваться для печати.

Быстрый совет : Теперь, когда вы создали иллюстрацию и предположим, что в вашем дизайне используются эффекты из меню Stylize , такие как Drop Shadows , Outer Glow или Inner Glow , вам необходимо убедиться, что качество. Печатная версия должна выглядеть такой же гладкой и чистой, как и версия на вашем мониторе.Для этого выберите Effect> Document Raster Effects Settings и выберите более высокое разрешение из флажков — вы также можете ввести собственное значение в поле Other .

Хотя мы собираемся разрабатывать дизайн для Интернета ( 72 ppi, ), в конечном итоге арт будет иметь вид png или jpeg , которые представляют собой растровых изображений . Если вы зайдете на сайт Adobe, то найдете еще один совет, посвященный влиянию ppi на штрихи дизайна:

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

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

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

3.2. Получение основных форм

Сначала создайте круг , который будет служить фоном для всего дизайна. Используя инструмент «Эллипс» ( L), щелкните левой кнопкой мыши в любом месте Illustrator, чтобы открыть окно настроек Rounded Rectangle Settings Box и установить Width и Height круга. Введите 110 пикселей для и нажмите ОК. Выделите только что созданный объект и удалите цвет с обводки и придайте ему красивую светло-красноватую заливку ( HEX = ff7171 или R = 255, G = 113, B = 113 ).

Возьмите инструмент Rounded Rectangle Tool (находится на левой панели инструментов, там же, что и инструмент Rectangle Tool ), щелкните левой кнопкой мыши на монтажной области и создайте форму 55 x 80 пикселей с радиусом угла 5 пикселей . С помощью опций Align ( Window> Align ) выберите новый объект и по горизонтали, и по вертикали, выровняйте его по монтажной области. Заливка темно-серым цветом # 606060 ( R = 96, G = 96, B = 96 )

Совет : Если вы только что настроили панель «Выравнивание», к выбранным объектам будет применено выравнивание по умолчанию.Чтобы выровнять по монтажной области, посмотрите в правый нижний угол, нажмите « Align To», и выберите Align to Artboard.

Следуя тем же шагам, что и раньше, создайте новый прямоугольник с закругленными углами (ширина = 39 пикселей, высота = 64 пикселя, радиус угла = 1 пиксель ). Выберите новый объект, выровняйте его по горизонтали с монтажной областью и переместите к верхней части большего прямоугольника.

Выделив объект, измените его цвет заливки на более светлый серый D3D3D3 ( R = 211, G = 211, B = 211 ).

Это основная рамка и экран, которые будут представлять Kindle.

3.3 Кнопки наслоения

Следующий шаг связан с кнопками . Выберите инструмент Rounded rectangle tool и создайте объект 5 x 5px с радиусом угла 2px . Выровняйте его по горизонтали с другими частями и переместите в середину пространства между нижней стороной экрана и нижней стороной тела (вы также можете сделать это, перетащив и создав прямоугольник и выровняв по вертикали кнопку с ним. ).Назначьте цвет заливки ( 474747, R = 71, G = 71, B = 71 ), затем скопируйте его и вставьте на место ( Ctrl + f / ⌘ + f ). Выделите дублирующую кнопку и отразите ее обводку цветом заливки, оставив 1px .

Теперь у нас есть основная кнопка; следующие четыре закругленных. Выберите инструмент Ellipse Tool ( L ) и создайте круг 3 x 3px . Выделите его и, удерживая Alt , перетащите влево, чтобы продублировать.Выбрав оба варианта, снова удерживайте Alt ( ⌥ Option на Mac ) , и перетащите в правую часть основной кнопки. Выделите все круглые кнопки и основную. Щелкните левой кнопкой мыши по центральной кнопке и, используя панель Align , отцентрируйте их по вертикали. Теперь нам нужно расположить их, оставив все объекты выделенными, перейти в левый нижний угол Align to Distribute Spacing , присвоить ему 4px и выбрать Horizontal Distribute Space .

Для боковых кнопок мы создадим объект с закругленными углами (ширина = 5 пикселей, высота = 30 пикселей, радиус угла = 1 пиксель, ) и выровняем его по вертикали относительно основной части значка. Перетащите его немного вправо, чтобы он перекрывал друг друга. Используя инструмент Shape Builder Tool ( Shift + m ) вычтите пересечение двух объектов, и у вас появятся кнопки навигации по страницам.

Выберите новый объект и измените заливку на 3d3d3d ( R = 61, G = 61, B = 61 ).Дублируйте и отразите его по вертикали ( щелкните правой кнопкой мыши> Трансформировать> Зеркальное отражение> Вертикальное ), затем выровняйте по правой стороне основного тела.

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

3.4. Добавление деталей

Разложив наш Kindle, мы начнем добавлять последние штрихи к экрану. Возьмите инструмент Rectangle Tool и нарисуйте объект 100 x 55px . Поверните его, нажав R , а затем перетащите один угол влево, удерживая нажатой Shift , чтобы получить хороший угол в 45 градусов.Дублируйте экран Kindle и выберите его и повернутый объект и нажмите Shift + M для инструмента Shape Builder Tool. Вычтите пересеченный путь для красивого отражения.

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

Еще раз выберите экран, скопируйте и вставьте его на место, перевернув заливку обводкой и придав ей более темный серый цвет ( 3d3d3d ).

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

3.5. Добавить длинную тень

Закончим нашу иконку, отбросив длинную тень. Дублируйте тело основного значка ( Ctrl + c, , затем Ctrl + f) , чтобы вставить его на место.Выберите новый объект и перетащите его под углом 45 к правому нижнему углу. Мы сделаем это, удерживая Alt и, перетаскивая вправо, нажимая и удерживая Shift так, чтобы вы получили его точно под 45 градусами.

Создайте переход между двумя объектами; перейдите в Object> Blend Options и в Specified Steps введите 200 . Теперь, используя тот же путь, выберите Make .

Эти двое объединились в единую форму.Перейдите в Object> Expand> OK , а затем в окне Transform нажмите Unite . Это базовая тень. Придайте ему более темный цвет, чем фоновый круг, а затем замаскируйте его, чтобы он не выпадал из фактического дизайна. Измените цвет на d85d5d ( R = 216, G = 93, B = 93 ), затем скопируйте и вставьте круг перед длинной тенью. Выделите и тень, и объект над ней, затем щелкните правой кнопкой мыши > Создать обтравочную маску .

Мы прибили!

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

Шаг 4. Сохраните для Интернета

У нас есть красивый значок, но как насчет его сохранения, чтобы мы действительно могли использовать его для того, что мы изначально задумали — для Интернета? Экспортируйте иллюстрации с использованием векторного формата SVG (Scalable Vector Graphics) XML.Основные преимущества использования SVG по сравнению с другими форматами (например, PNG):

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

Итак, давайте продолжим и посмотрим некоторые настройки, которые поставляются с этим форматом. Перейдите в File> Save as> и из Save as type щелкните раскрывающийся список и выберите SVG ( *.SVG ) — не забудьте установить флажок Use Artboards , чтобы сохранить только элементы на вашей монтажной области. Должно появиться всплывающее окно — нажмите на опцию больше , чтобы увидеть полный набор опций. Пройдемся по каждому из них:

• SVG Profiles : с августа 2011 года стандартная версия, продвигаемая W3C , — 1.1
• Шрифты

Тип: Управляет способом встраивания шрифтов в фактический файл.Обычно, если у вас есть текст, Adobe рекомендует SVG, , но это имеет некоторые недостатки и не поддерживается Firefox.

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

• Расположение изображения : этот параметр во многом зависит от того, как вы выбираете встраивание изображений в файл SVG .Согласно Adobe, лучший вариант — использовать Link , а затем изменить параметр href , чтобы он указывал на ваш собственный файл изображения, который вы должны сжать с помощью Photoshop или любого другого программного обеспечения для редактирования изображений.
• CSS Properties : Используя Style Elements , вы можете изменить код SVG в соответствии с вашими потребностями после экспорта файла и использования его на своем веб-сайте.
• Десятичные разряды : Значение здесь будет определять точность экспортируемых векторов.Чем больше число, тем больше размер файла. Рекомендуется ввести значение 1.
• Выводить меньше элементов . : Если ваша работа включает в себя много текста, используйте этот параметр, чтобы уменьшить общий размер файла SVG — наш значок не зависит от текста, поэтому мы можем не отмечать этот флажок.

После выбора всех вышеперечисленных параметров нажмите Сохранить .

Подсказка: Для получения дополнительной информации об остальных параметрах сохранения перейдите по этой ссылке.

Готово!

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

Нравится то, что вы читаете? Подпишитесь на наши главные новости.

[Как] Создать значок Favicon и Apple для своего веб-сайта

Apple iPhone / iPad

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

Простое решение — бесплатный онлайн-генератор иконок для значков Apple и Favicon

Iconifier.net — это простое решение, которое при квадратном формате JPG, GIF или PNG сгенерирует набор значков различных размеров, чтобы вы могли использовать и выбирать те, которые хотите поддерживать на своем веб-сайте.Затем вам нужно загрузить сгенерированные значки и встроить их в код своего веб-сайта. Вы можете интегрировать эти шаги в свой процесс веб-дизайна.

Вставьте значок (значки) значков на свой веб-сайт

После создания значка favicon.ico с помощью Iconifier.net выше и размещения его в корне вашего веб-сайта добавьте следующий код между и вашего веб-сайта

Иконки Apple

После создания различных значков с помощью указанного выше веб-сайта вам также потребуется добавить немного другой код для устройств Apple iPhone / iPad (и, возможно, Android).Снова загрузите сгенерированные файлы значков в корень вашего веб-сайта и поместите следующий код между тегами HEAD.

Устройства

iOS автоматически обрабатывают это в своем браузере, изменяют размер и добавляют некоторые эффекты, чтобы они соответствовали стилю устройства, на котором они видны.

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

Иконки для устройств Android

Android построен на сенсорных значках Apple, но ожидается, что значки уже будут в их окончательной версии. Эта последняя версия является «ПРЕДВАРИТЕЛЬНОЙ», и устройства Android ожидают, что этот тег будет на месте.Поэтому загрузите новые версии с немного другими именами (например, добавив предварительно составленное имя), а затем добавьте следующую разметку. Самая важная часть — это rel = apple-touch-icon-precomposed. Поместите файлы в корень своего веб-сайта и добавьте этот код между тегами и вашего html

.

Более подробную информацию о Favicons можно найти в Википедии: https://en.wikipedia.org/wiki/Favicon

Об авторе

Дэвид работал в онлайн / цифровой индустрии или около нее последние 18 лет. Он имеет обширный опыт работы в индустрии программного обеспечения и веб-дизайна с использованием WordPress, Joomla и связанных с ними ниш. Как консультант по цифровым технологиям, он сосредоточен на том, чтобы помочь предприятиям получить конкурентное преимущество, используя комбинацию их веб-сайтов и цифровых платформ, доступных сегодня.

Как создать ярлыки для iOS / Android для вашего веб-сайта

(Обновлено 5 июля 2016 г.)

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

Например, при использовании устройства iOS и посещении веб-сайта с помощью браузера Safari щелкните значок «Поделиться»:

Затем нажмите «Добавить на главный экран», который добавит ярлык на ваше устройство, при нажатии на который вы попадете прямо на эту страницу:

Вы можете увидеть два значка ярлыка веб-страницы, один помечен как «b2», и я создал и загрузил ярлыки, а другой помечен как «Брэди Мо…», который находится на моем личном сайте до того, как я создал и загрузил ярлыки:

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

В этом посте вы узнаете, как создать этот значок и загрузить его на свой веб-сайт.

Шаг 1. Создайте значки

Существует несколько версий значка, которые вам нужно создать. Приведенные ниже размеры подходят для стандартных устройств iOS, Retina iOS, iPad и Android.

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

• 57 × 57 пикселей
• 60 × 60 пикселей
• 72 × 72 пикселей
• 76 × 76 пикселей
• 114 × 114 пикселей
• 120 × 120 пикселей
• 128 × 128 пикселей
• 144 × 144 пикселей
• 152 × 152 пикселей
• 180 × 180 пикселей
• 192 × 192 пикселей

Что вам нужно сделать:

1. Сохраните изображения с цветным фоном.(В противном случае прозрачность будет заполнена черным цветом.)
2. Убедитесь, что у значка достаточно расстояния между краями фигур и краем значка.
3. Сохраните значки как файлы PNG.

Также обратите внимание:

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

Шаг 2. Загрузите значки

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

• Загрузите файлы в любую директорию вашего сайта
• Добавьте следующий код в часть вашего HTML







<ссылка rel = ”apple-touch-icon” sizes = ”180 × 180 ″ href =” http://www.example.com/apple-touch-icon-180 × 180.png ”>

(В коде упоминается «яблоко», но он будет работать как для устройств Apple, так и для Android. Вы захотите использовать абсолютный URL, чтобы он работал как для устройств Apple, так и для Android.)

* Если вы используете WordPress и хотите сделать это с помощью плагина, выполните поиск «Apple Touch Icons» в области плагинов WordPress, затем загрузите значки через плагин.

---

Понравился этот пост? Я хотел бы получить известие от вас в Твиттере.

Создать ярлык на рабочем столе в Google Chrome Mac и Windows »WebNots

Большинство из нас хотели бы проверить любимый веб-сайт, как только войдете в систему на ПК с Windows или Mac. Один из простых способов — добавить URL-адрес в закладки и быстро попасть на сайт из панели закладок. Однако сначала необходимо запустить браузер, чтобы получить доступ к веб-странице, отмеченной закладкой. Помимо создания закладок, вы также можете запустить свой любимый веб-сайт с помощью ярлыков. В этой статье мы объясним, как создать ярлык сайта на рабочем столе из Google Chrome и использовать ярлыки на странице новой вкладки Chrome.

Обратите внимание, Google постоянно меняет способ работы этой функции быстрого доступа. В более старых версиях вы увидите, что ярлык на рабочем столе работает плавно. Однако Google представил эту функцию в версии для Mac, начиная с версии 73, и также рассматривает ярлык как приложение в браузере.

---

---

Как создавать ярлыки веб-сайтов в Chrome?

1. Создание ярлыка на рабочем столе в Chrome Windows
2. Создание рабочего стола на Chrome Mac
3. Добавление ярлыков на страницу новой вкладки

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

1. Создание ярлыка на рабочем столе в Chrome Windows

Все, что вам нужно сделать, это просто выполнить простые шаги, указанные ниже:

• Запустите Google Chrome и откройте свой любимый сайт, для которого вы хотите создать ярлык на рабочем столе.

Открытие веб-сайта

• Когда вы открыли веб-сайт, просто нажмите кнопку с тремя точками в правом верхнем углу с надписью «Настроить и управлять Google Chrome».

Перейти в меню Chrome

• Перейдите к «Дополнительные инструменты» и затем нажмите «Добавить на рабочий стол…».

Добавить в контекстное меню рабочего стола

• Теперь Chrome предложит вам добавить веб-сайт на рабочий стол. Chrome также автоматически заполнит текстовое поле описания из заголовка веб-страницы. Однако вы можете изменить его на свое удобное имя. Например, вы можете дать сайту такое имя, как CNN, Apple или Google.
• Помимо текстового поля описания, Chrome покажет значок веб-страницы или значок сайта. Ярлыки на рабочем столе будут иметь этот значок в виде картинки, которая поможет вам легко запомнить сайт.

Создание ярлыка на рабочем столе в Chrome

• Если вы отметите опцию «Открыть как окно», всякий раз, когда вы открываете ярлык на рабочем столе, Chrome будет открывать его в отдельном окне. В противном случае веб-страница будет открываться в том же открытом окне браузера, что и новая вкладка.
• Нажмите кнопку «Создать», и Chrome добавит ваш любимый веб-сайт на рабочий стол в качестве рабочего стола.

Открытие ярлыка на рабочем столе

• Просто дважды щелкните значок ярлыка на рабочем столе, чтобы открыть веб-сайт одним щелчком мыши.

По теме: Как открыть несколько веб-сайтов с помощью ярлыка на рабочем столе?

1.1. Открыть как окно, опция

Компания Google изменила дизайн браузера Chrome к своему 10-летнему юбилею, выпустив версию 69. Большой проблемой было то, что Google удалил опцию «Открыть как окно» из всплывающего окна при создании ярлыков на рабочем столе. Многие пользователи жаловались, что новое обновление было беспорядочным. Чтобы порадовать пользователей, Google вернул эту опцию, как и раньше, в версии 73. Итак, если вы не видите опцию «Открыть как окно», обновите браузер Chrome до версии 73 или более поздней.

Однако опция «Открыть как окно» сбивает с толку и бесполезна.

• Если вы не выбрали параметр «Открыть как окно», ярлык на рабочем столе откроется в Chrome как обычная веб-страница. Это прекрасно работает.
• Если вы включили опцию «Открыть как окно», Chrome откроет ярлык на рабочем столе как приложение в браузере, как показано ниже.

Ярлык веб-страницы Действует как приложение

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

Открыть приложение в Chrome

1.2. Ваш ярлык — это приложение

Независимо от того, выберете ли вы опцию «Открыть как окно» или нет, Chrome добавит ярлык на рабочий стол в ваши приложения. Вы можете либо щелкнуть опцию «Приложения» в левом углу панели закладок, либо перейти к «chrome: // apps», чтобы увидеть, что ярлык доступен как приложение.

Ярлыки в приложениях Chrome

Проблема здесь в том, что даже если вы удалите ярлык со своего рабочего стола, он все равно будет доступен в разделе приложений.Вам нужно открыть «chrome: // apps», щелкнуть ярлык правой кнопкой мыши и выбрать «Удалить из Chrome», чтобы навсегда удалить приложение.

Удалить ярлык приложения

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

2. Создайте ярлык на рабочем столе в Mac

Chrome — это независимый от платформы браузер, который без проблем работает в Windows и macOS.Однако есть определенные различия, например, до версии 72 в версии для Mac нет опции создания ярлыка на рабочем столе. Google представил эту функцию для пользователей Mac в версии 73. Итак, обновите свой браузер на Mac, чтобы использовать эту функцию ярлыка на рабочем столе.

Работает точно так же, как версия для Windows, однако на Mac вы не можете добавить ярлык на рабочий стол. Вы можете добавить ярлык только как приложение и получить доступ через «chrome: // apps» или закладку «Приложения».

Ярлык Chrome на рабочем столе Mac

Вы можете щелкнуть приложение правой кнопкой мыши и настроить его открытие как окно или удаление из Chrome.

Открыть как окно из приложений Mac Chrome

Однако, когда вы открываете ярлык приложения, Chrome покажет идентификатор эскиза в URL-адресе на Mac, что не относится к версии для Windows.

Идентификатор эскиза в URL-адресе

Обратите внимание, что опция создания ярлыка будет работать только после того, как браузер полностью загрузит веб-страницу. Когда вы видите, что на вкладке вращается индикатор выполнения, вам нужно дождаться завершения загрузки. В противном случае вы не увидите «Создать ярлык?» всплывающее окно, даже если вы щелкнете по опции меню «Создать ярлык…».

3. Ярлыки на новой вкладке

Chrome добавляет миниатюру веб-страницы на новую вкладку из истории просмотров. Это поможет вам быстро открывать страницы сразу после запуска браузера. Хорошо, что вы можете добавить свои собственные ярлыки, нажав кнопку «Добавить ярлык».

Добавить ярлык на страницу новой вкладки Chrome

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

Добавление ярлыка веб-страницы

Вы можете удалить ярлыки в любое время по:

• Наведите указатель мыши на значок эскиза на странице новой вкладки.
• Нажмите на настройки с тремя точками, которые появляются при наведении курсора на значок.
• Нажмите кнопку «Удалить» во всплывающем окне.

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