Создать иконку для сайта: (favicon.ico), | Seoded.ru

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

iOS, Дизайн

Многие сайты имеют favicons для закладок. А что если сайт добавили на «рабочий стол» в IPhone? Favicons могут использоваться сайтами и веб приложениями.

Представляем Вам небольшую инструкцию как можно установить favicons для устройств на базе IOS и Android.

iOS Размеры иконки

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

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

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

Установка иконок

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

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

Для добавления iOS иконок всё аналогично, просто другой синтаксис. Конечно, каждую иконку нужно прописать отдельно.

Чтобы iOS устройство распознало иконку как favicon необходимо 2 вещи. Сперва, «rel» должно быть прописано как apple-touch-icon, а потом необходимо, что размер был в стиле 57х57. Ниже пример как это должно быть.

<link rel="apple-touch-icon" href="apple-icon-57x57.png" />

<link rel="apple-touch-icon" href="apple-icon-72x72.png" />

<link rel="apple-touch-icon" href="apple-icon-114x114.png" />

<link rel="apple-touch-icon" href="apple-icon-144x144.png" />

Специальные эффекты

Надеюсь, Вы в курсе, что все iOS иконки имеют закруглённые края, небольшую тень и блики. Это делается Apple автоматически, не стоит беспокоится и добавлять это самостоятельно. Делайте иконки квадратными

Для того, чтобы убрать автоматическую обработку необходимо это прописать в «rel»:

<link rel=»apple-touch-icon-precomposed» sizes=»114×114″ href=»apple-icon-114×114-precomposed.png» />

 Android и остальные устройства

Favicons для Apple подходят так же для: Blackberry v6.0 и выше, Android 2.2 и выше. Согласитесь, что это приятно? Не нужно создавать версия для каждого из устройств на Android  и  Blackberry, а так же всех остальных.

Design tips

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

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

Иконки для вдохновления

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

Мне очень нравится набор цветов, использованный с часами. Они хорошо смотрятся с flat дизайном.

Это не типичная flat иконка, которые мы видим сейчас, но она всё рано выглядит круто и забавно.

Здесь очень круто работают с тенями. Серый цвет хорошо смотрится рядом с голубым.

Ещё одна иконка с мега тенями. Радуга смотрится особенно круто. Градиент тоже хорош.

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

Цветы и трава выглядит очень реалистичными.

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

Навигация по публикации

↑ Наверх

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

Подготовили для вас полную инструкцию по фавикон: что это за вид иконки, зачем он нужен вашему сайту, как его создать и поставить на сайт. Нашли требования «Яндекс» и 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 и создавайте красивые письма в удобном блочном редакторе!

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

Сделать иконку для сайта 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) — иконка для сайта: инструкция

5. Как добавить favicon на сайт?

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

5.1 Загрузка в корневую папку сайта

Для отображения фавикона, поисковой робот Яндекса ищет необходимую картинку в корневой папке сайта. Поэтому чтобы добавить иконку на сайт, подключитесь по FTP к вашему сайту и загрузите файл с расширением .ico в корневую папку (public_html или htdocs). Предварительно назовите файл favicon.ico. Желательно, чтобы все буквы были в нижнем регистре. После этого браузер должен начать показывать выбранное вами изображение возле названия сайта. 

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

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

Как узнать путь до Favicon.ico на вашем сайте?

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

<lіnk rel="shortcut іcon" type="image/іco" hrеf="httр:путь_до_вашей_иконки/favicon.ico" />

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

<lіnk rel="іcon" hrеf="http:путь_до_вашей_иконки/favicon.ico" tуpe="imagе/x-icon">

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

5.2 Добавить код ico в шапку сайта

Для того, чтобы красивые иконки для сайта отображались максимально качественно, они должны быть квадратной формы, а формат картинки должен быть с расширением jpg, bmp, gif или png. 

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

Загрузите изображение в каталог вашего сайта. Для загрузки вы можете использовать Файловый менеджер или FTP-клиент. В хостингах на базе Linux, это обычно каталог public_html. Однако он может отличаться у различных хостингов или в связи с вашими собственными настройками. 

Для отображения фавикона в шапке сайта, пропишите следующую строку между тегами <head> и </head> в коде сайта:

<lіnk rеl="shortсut іcon" type="іmage/png" hrеf="/favicon.png"/>

При этом обязательно проверьте правильность написания формата, а также имени изображения. В результате у вас получится HTML код следующего вида:

5.3 Как разместить фавикон на WordPress?

Метод 1. Воспользоваться панелью управления WordPress

С версией WordPress 4.3 и выше, используйте панель управления администратора для добавления фавикона. Зайдя в панель управления, откройте пункт меню “Внешний вид” и затем выберите раздел “Настроить”. В появившемся окне выберите “Свойства сайта”, “Выбрать изображение” и загрузите файл с иконкой, которая и станет новым фавиконом.

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

Метод 2. С помощью плагина All In One Favicon

Для установки плагина откройте раздел меню “Плагины”, выберите функцию “Добавить новый” и установите All In One Favicon. 

Как только установите плагин, откройте Настройки и выберите плагин All in one Favicon. В строках ICO Frontend и ICO Backend загрузите картинку будущего фавикона и сохраните изменения. Готово. Фавикон установлен. 

Как сменить иконку сайта (favicon.ico) – Помощь

Иконка сайта должна быть в формате .ico, и файл должен иметь название favicon.ico. Для размещения сайта вы можете использовать бесплатный хостинг для сайтов HTML. Бесплатный тестовый режим предоставляется на 14 дней.

Если сайт был создан в Конструкторе REG.RU, добавьте фавикон по инструкции.

1. 1. Загрузите файл иконки в каталог вашего сайта: В какой каталог нужно загружать файлы моего сайта.
2. 2.

   Дополнительно (не обязательно, но рекомендовано) добавьте следующие строки в каждую страницу вашего сайта внутрь секции:

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

   или так:

   <link rel="icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">
   <link rel="shortcut icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">

   или так:

   <link rel="icon" href="http://ваш-сайт.ru/путь_к_иконке/favicon.ico" type="image/x-icon">
   <link rel="shortcut icon" href="http://ваш-сайт.ru/путь_к_иконке/favicon.ico" type="image/x-icon">

Отображение иконки сайта зависит только от вашего браузера и не зависит от настроек хостинга, так, например, старые версии Internet Explorer отображают иконки только у сайтов, добавленных в «Избранное».

Была ли эта статья полезной?

Да Нет

Пользователи, считающие этот материал полезным: 1 из 1

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

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

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

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

Онлайн-стажировка по UI/UX дизайну

99% практики, реальные задачи от крупных компаний страны и шанс попасть на работу мечты.

Присоединиться

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавьте этот favicon в HTML <head>, как показано ниже:

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

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

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

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

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

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

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

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

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

Добавьте этот favicon в HTML <head>, как показано ниже:

 <link rel="apple-touch-icon" href="/apple-touch-icon-60x60.png">

 <link rel="apple-touch-icon" href="/apple-touch-icon-76x76.png">

 <link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png">

 <link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png">

 <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png"> 

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

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

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

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

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

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

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

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

Для Windows 8:

И для Windows 8.1:

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

Windows 8.0

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

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

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

Windows 8.1

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

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

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

8. Android, Chrome и Opera

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

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

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

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

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

<link rel=”manifest” href=”/site.webmanifest”>

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

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

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

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

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

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

Добавьте этот favicon в HTML <head>, как показано ниже:

<link rel=”mask-icon” href=”your_icon.svg”>

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

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

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

Шпаргалка

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

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

Размеры	Фон	Формат
Классические десктопные браузеры
16×16	Прозрачный	PNG
32×32	Прозрачный	PNG
48×48	Прозрачный	PNG
Apple iOS
180×180	Сплошная заливка	PNG
Windows 8.0
144×144	Прозрачный	PNG
Windows 8.1
128×128	Прозрачный	PNG
270×270	Прозрачный	PNG
558×270	Прозрачный	PNG
558×558	Прозрачный	PNG
Google Android и Chrome
192×192	Сплошная заливка	PNG
512×512	Сплошная заливка	PNG
Opera Coast
228×228	Сплошная заливка	PNG
Safari Pinned Tab
Vector	Прозрачный	SVG

Создать Favicon

Генератор Favicon — это бесплатный онлайн сервис, который поваляет создавать иконки и значки (файл favicon.ico) для вашего сайта. Данный инструмент позволяет создавать Favicon всех популярных размеров, таких как: 16х16, 32х32, 48х48, 64х64, 128х128. Выберите размер и изображение (JPG, GIF, PNG), которое вы хотите конвертировать в формат ICO с вашего компьютера и нажмите Создать.

Создать фавикон

Для создания favicon необходимо:

1. Выберите размер вашего фавикона
2. Выберите файл и нажмите Создать Favicon
3. Сохраните полученный Favicon на свой компьютер

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

1. После создания Favicon через наш инструмент, скачайте его на ваш компьютер.
2. Загрузите фавикон в корневую директорию вашего сайта, чтобы он был доступен по адресу https://yoursite.com/favicon.ico
3. Скопируйте код ниже и вставьте в ваш HTML внутри тегов HEAD
   • rel — тип ресурса: icon или icon shortcut
   • href — адрес файла
   • type — тип передаваемых данных. Зависит от формата файла.
     • image/x-icon — для формата ICO;
     • image/gif — для формата GIF;
     • image/jpeg — для формата JPEG;
     • image/png — для формата PNG;
     • image/bmp — для формата BMP.

Примечание. Если в HTML-коде страницы ссылка на фавиконку прописана несколько раз, робот выберет иконку на свое усмотрение. Например, указаны 2 разные иконки, чтобы соответствовать разным поисковым системам.

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

Примечание: Для отображения в результатах поиска Яндекс загружает фавиконку с HTTPS-версии сайта, если она доступна. Если нет — фавиконка не отображается.

• Размер: 16×16, 32×32, 120×120 пикселей.
• Формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.

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

• Размер: значок сайта должен быть квадратным и иметь размеры, кратные 48 пикселям, например: 16×16, 48×48, 96×96, 144×144 пикселей
• Формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.
• Убедитесь, что значок сайта хорошо выглядит при разрешении 16×16 пикселей, так как для показа в результатах поиска масштаб значка будет изменен. Учтите, что добавлять значок размером 16 x 16 пикселей не следует.
• Значок сайта должен служить графическим представлением вашего бренда. Это поможет пользователям быстро узнать ваш сайт при ознакомлении с результатами поиска.

Отображение фавиконки

Если робот загрузил favicon, она появится в результатах поиска в течение двух недель. Примечание. Если робот не может получить доступ к вашей фавиконке, он скачает изображение, например, из тега apple-touch-icon, и использует его для отображения фавиконки в результатах поиска и рекламных кампаниях. Если во время обхода сайт недоступен для робота, может скачаться фавиконка хостинга со страницы-заглушки сайта. Поэтому в поиске вместо вашей фавиконки отобразится произвольная иконка.

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

Создайте значок телефона на главном экране

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

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

Вот наш логотип:

Вот наш значок телефона:

ШАГ 1. Создайте значок телефона

Создайте изображение 158 x 158 в своем любимом редакторе изображений (мы используем Adobe Illustrator, но Adobe Photoshop работает тоже отлично). Если у вас нет фоторедактора, доступно довольно много бесплатных онлайн-редакторов, просто бесплатный онлайн-редактор изображений «Google».Убедитесь, что это упрощенная версия вашего логотипа. Это должно быть хорошо видно и не должно быть слишком многолюдно.

Шаг 2. Сохраните значок телефона

Сохраните свое творение в виде файла .png на своем сервере. Большинство сайтов будут использовать папку / images, это всегда хорошее место. Не забудьте назвать его чем-нибудь относительным, например, apple-touch-icon.png.

Шаг 3 — Запишите его

Запишите путь к вашему изображению и проверьте правильность пути, введя его в браузере.Теперь вы должны увидеть свое новое изображение. Так, например, если ваш веб-сайт https://www.mywebsite.com и вы поместили значок своего нового телефона в папку изображений, вы должны иметь возможность ввести https://mysite.com/images/apple-touch -icon.png и просмотрите свое изображение. Теперь скопируйте и вставьте этот путь в текстовый документ.

Шаг 4 — Добавление тега

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

Вы собираетесь разместить этот код прямо над тегом на главной странице вашего веб-сайта. ВАЖНЫЙ!!! не забудьте изменить путь (выделенный желтым) на путь к изображению, который вы записали на шаге выше.

Шаг 5 — Добавьте значок телефона на главный экран на свой телефон

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

Вот и все! Довольно просто, да?

Создать ярлык веб-сайта | Поддержка и ресурсы | Услуги информационных технологий

Создать ярлык веб-сайта

Следуйте приведенным ниже инструкциям, чтобы добавить ярлык для паспорта кампуса Брандейса на главный экран вашего iPad, iPhone или устройств Android.Для получения дополнительной информации о портале посетите веб-сайт «Ответ на COVID-19: что сейчас, что дальше».

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

iPhone или iPad

1. Откройте Safari. Другие браузеры, например Chrome, для этого не работают.
   
2. Перейдите на веб-сайт, который вы хотите сохранить на главном экране, введя URL-адрес веб-сайта, для которого вы хотите создать ярлык.Убедитесь, что вы посетили именно ту страницу, которую хотите открыть с помощью ярлыка. Нажмите «Перейти».
3. Нажмите кнопку Поделиться внизу страницы. Это похоже на квадрат со стрелкой, направленной сверху.
4. В появившемся списке опций прокрутите вниз, пока не увидите Добавить на главный экран . Коснитесь этого. Появится диалоговое окно «Добавить на главный экран».
   
5. Выберите имя для ярлыка веб-сайта на главном экране. Вы увидите ссылку, чтобы вы могли подтвердить ее, а также значок сайта, который будет отображаться как значок «приложения» на главном экране.Когда закончите, нажмите Добавить . Safari закроется автоматически, и вы попадете туда, где находится значок на главном экране вашего iPhone или iPad.
6. Теперь просто коснитесь нового «приложения» или ярлыка на главном экране, и он откроет веб-сайт в собственном окне навигации, независимо от того, что вы открыли в Safari.

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

Android

1. Откройте Chrome.
   
2. Перейдите на веб-сайт или веб-страницу, которую хотите закрепить на главном экране.
3. Коснитесь значка меню (3 точки в правом верхнем углу) и коснитесь Добавить на рабочий стол.
4. Выберите имя для ярлыка веб-сайта, и Chrome добавит его на главный экран.

Что такое изображение значка и как добавить его на свой веб-сайт

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

Что такое значок значка

Значок — это небольшой значок размером 16×16 пикселей, используемый в веб-браузерах для представления веб-сайта или веб-страницы. Сокращенно от «избранного значка», значки чаще всего отображаются на вкладках в верхней части веб-браузера, но они также находятся на панели закладок вашего браузера, в истории и т. Д.В некоторых случаях, например в Google Chrome, они даже появляются на главной странице вашего браузера. Другими словами, значок служит значком вашего веб-сайта или визуальным знаком, с помощью которого можно идентифицировать ваш веб-сайт в Интернете.

Почему значки значков имеют значение

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

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

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

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

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

Для создания фавикона вы можете рассмотреть вопрос о найме профессионального дизайнера (если вы уже работаете с ним, вы можете включить фавикон в свое соглашение). Вы также можете создать значок самостоятельно, используя любую дизайнерскую программу по вашему выбору или несколько онлайн-инструментов. Одним из таких рекомендуемых инструментов является Wix Logo Maker, который позволяет вам создавать профессиональные и персонализированные значки, наилучшим образом отражающие ваш стиль и потребности.

Размер: Оптимальный размер для создания значка — 16×16 пикселей, т.е. размер, в котором они обычно отображаются.Однако иногда они могут отображаться и в более крупных размерах (например, 32×32 пикселя). Если вам нужна помощь в подборе нужного размера для вашего изображения, попробуйте использовать инструмент Wix Image Resizer.

Файл: Предпочтительный формат файла для значка — JPEG или PNG.

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

Советы по созданию значка

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

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

Художник и иллюстратор Адам Дж.Веб-сайт Курца Wix — отличный пример простого дизайна фавикона с ярко выраженной желтой звездой. Другой пример — значок дизайнера ювелирных изделий и пользователя Wix Иларии Бонард i , состоящий из трех простых точек.

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

Для веб-сайта Wix модного бренда Sorry, значок X в форме буквы X является продолжением того же смелого черно-белого визуального языка, что и их одежда и логотип.Точно так же в значке eBay цвета бренда сочетаются с маленьким значком сумки для покупок, что идеально передает дух сайта.

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

Веб-сайт Wix некоммерческой организации Arte использует букву A из своего логотипа в качестве значка с добавленным неоново-зеленым фоном для привлечения внимания.Кроме того, на фавиконе, украшающем бруклинский веб-сайт Red Fern’s Wix, вообще нет текста. Вместо этого он использует только значок в виде листа, что обеспечивает максимальную читаемость.

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

Обратите внимание на то, что значок Google немного отличается от его логотипа, но при этом отражает те же дизайнерские ценности.На значке отображается только знакомая буква G, при этом все четыре фирменных цвета плавно объединены в одну букву. Другой подход был использован иллюстратором и пользователем Wix Шарлоттой Ми и , которая использует инициалы своего нарисованного от руки логотипа в качестве своего значка.

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

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

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

Вы можете легко изменить свой значок на своем сайте Wix:

1. На панели управления вашего сайта перейдите в Настройки.

2. Нажмите «Управление» рядом с «Favicon».

3. Нажмите «Загрузить изображение» и выберите существующее изображение или нажмите «Загрузить медиа», чтобы загрузить изображение со своего компьютера.

4. Щелкните «Добавить на страницу». Теперь вы увидите предварительный просмотр того, как будет выглядеть ваш значок на вкладке браузера.

5. Нажмите «Сохранить» и тада! Теперь у вашего веб-сайта есть значок. Он появится на вкладке вашего сайта, как только вы нажмете кнопку «Опубликовать».

Иден Спивак

Эксперт и писатель по дизайну

Создание значка сайта для услуг веб-дизайна — Центр поддержки хостинга InMotion

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

• Адресная строка браузера
• Вкладка браузера рядом с сайтом или заголовком страницы
• Рядом с закладкой на настольных компьютерах
• На мобильное устройство пользователя, если сайт добавлен в закладки или добавлен на главный экран пользователя.

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

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

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

1. На панели управления выберите «Внешний вид»> «Настройка»> «Идентификация сайта».
2. Затем нажмите кнопку Select Image под значком сайта и загрузите значок сайта. Если значок сайта был загружен ранее, выберите это существующее изображение вместо загрузки.
3. Нажмите кнопку Выберите в правом нижнем углу, чтобы вернуться на экран «Идентификация сайта».

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

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

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

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

Стефани Ласк, ведущий интерфейсный разработчик

Стефани — один из ведущих интерфейсных разработчиков для служб веб-дизайна. Она создает пользовательские веб-сайты с нуля с помощью WordPress, используя одобренный дизайн от клиентов.Она также исполняет стихи, преподает в отделе Arts For Learning, A Young Audiences of Virginia Affiliate и является тренером команды поэтического слэма Verb Benders.

Еще статьи Стефани

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

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

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

Что такое значок фавикона / сайта?

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

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

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

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 — очень простой процесс. Преимущества наличия значка впечатляют — это маркетинговая тактика, которая позволит вашим пользователям идентифицировать ваш сайт, просто заметив ваше изображение. Поэтому сделайте своим приоритетом найти свободные полчаса в свой день и настроить свой сайт с помощью значка.

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

Создание набора иконок веб-приложения за 6 шагов | автор: Лулу Ван

Для чего предназначен набор иконок? В моем случае эти значки: 1) предлагают визуальные подсказки для типов файлов, 2) помогают различать типы файлов при быстром сканировании файлов.

Где будет использоваться? В моем случае они появятся в таблице данных, которая может состоять из 50 строк за раз.Плотность высокая.

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

Набросок значка «PDF».

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

• Эстетическое единство набора — это набор элементов дизайна и / или вариантов, которые вы повторяете на протяжении всего набора, чтобы визуально связать его в единое целое.Это такие элементы, как закругленные или квадратные углы, определенный размер углов (2 пикселя, 4 пикселя и т. Д.), Ограниченный и постоянный вес линий (2 пикселя, 4 пикселя и т. Д.), Стиль (плоский, линейный, с заливкой). линия или глиф), цветовую палитру и многое другое [1]. Это говорит мне, что значки должны быть единообразными при их рисовании на более поздних этапах.
• Узнаваемость — это результат сущности значка или того, что делает его уникальным. В конечном итоге, работает ли значок, зависит от того, насколько легко зритель понимает объект, идею или действие, которое он изображает [1].Поскольку я делаю значки для типов файлов, я хочу, чтобы пользователи быстро понимали формы. Поэтому я предпочитаю использовать часто используемые формы, а не изобретать колесо самостоятельно.

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

• В Illustrator сначала постройте в Illustrator общую сетку, подобную этой.
  Ссылка на учебник

• Затем нарисуйте фигуры с помощью сетки. Начните с создания прямоугольника, затем отрегулируйте радиус его угла.Я создал все свои значки с прямоугольниками шириной 16 пикселей и радиусом угла 8 пикселей.

• Нет необходимости строго следовать ему. Отрегулируйте высоту и ширину ваших глифов, чтобы максимизировать их узнаваемость и согласованность на основе уникальной формы каждого значка. Поскольку в типографике буква «W» шире, чем «X», вы можете соответственно расширить букву «W», нет необходимости заставлять их делать одинаковую ширину.

• Сложите все значки вместе, чтобы проверить их соответствие.

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

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

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