Как задать иконку

Содержание
  1. Подробное руководство по фавикону для сайта
  2. Что такое фавикон
  3. Зачем нужен фавикон
  4. Фавикон из картинки: какую выбрать
  5. Как создать favicon для сайта
  6. Как установить фавикон на сайт
  7. Размер фавикона для браузеров и устройств
  8. Популярные десктопные браузеры
  9. Фавикон в HTML5
  10. Android
  11. Apple
  12. Edge и IE 12
  13. Как поменять иконку сайта? Инструкция как сделать и установить иконку для сайта самостоятельно
  14. Создание иконки для сайта
  15. Иконки для сайта: размер 16х16 или 32х32?
  16. Формат иконки для сайта
  17. Как добавить иконку на сайт? Установка иконки на сайт
  18. Html код иконки для сайта
  19. Как поменять иконку сайта? замена иконки сайта
  20. Как изменить иконку файла или папки
  21. Что такое иконка
  22. Как создать собственную уникальную иконку
  23. Как изменить иконку папки или ярлыка
  24. Как изменить иконку файла
  25. Как использовать и оформлять иконки с помощью CSS?
  26. 1) Подключите иконки к сайту
  27. 3) Добавьте стиль к иконкам
  28. Как использовать иконки Font Awesome¶
  29. Пример
  30. Использование иконок с кнопками¶
  31. Добавление эффекта тени к иконкам¶
  32. Использование иконок Font Awesome в списке¶
  33. Анимация иконок Font Awesome¶
  34. Поворот иконок Font Awesome¶
  35. Спасибо за ваш отзыв!
  36. Разработчикам: как создать идеальную иконку приложения
  37. Предназначение иконки
  38. Стратегии
  39. Приложения для разных платформ
  40. Несколько приложений
  41. Игры
  42. Создаем уникальный Favicon и устанавливаем на сайт
  43. Зачем нужен фавикон?
  44. Как быстро создать фавикон для сайта
  45. Самостоятельно создать мини-логотип
  46. Создать значок с помощью онлайн-сервиса
  47. Рисуем фавинкон: Favicon.by
  48. Создание фавикон через загрузку изображения: Realfavicongenerator.net
  49. Скачать готовый файл фавикон
  50. Какой формат использовать?
  51. ICO
  52. PNG
  53. SVG
  54. Допустимые форматы: jpeg и gif
  55. Продвинутая информация по размерам фавиконов, которая пригодится не всем
  56. Для смартфонов
  57. Как поставить Favicon самостоятельно
  58. Через тему сайта WordPress
  59. Как добавить фавикон на сайт WordPress вручную
  60. Как вставить фавикон через корневой каталог, если сайт не использует CMS
  61. rel
  62. href
  63. type
  64. Как задать фавиконы для разных устройств?
  65. Apple
  66. Как задать размеры фавиконок?
  67. Как проверить, установился ли фавикон?
  68. Подытожим

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

Как задать иконку

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

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

Favicon (сокр. от англ. FAVorites ICON — «значок для избранного») — значок сайта или страницы.

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

Стандартные размеры — 16×16, 32×32, для некоторых браузеров и ОС нужны размеры 60×60, 120×120, 192×192.

Обычно используют формат ICO, но еще доступны PNG, GIF, JPEG, SVG. Файл формата ICO содержит несколько версий фавикона, некоторые браузеры могут выбрать не ту версию и использовать значок более низкого разрешения, поэтому некоторые веб-мастера советуют PNG.

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

В России фавиконы в выдаче поддерживает Яндекс:

Сайты с фавиконами в выдаче Яндекса

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

Выдача Google в Великобритании

Хотя в результатах иностранного поисковика фавиконов нет, они все равно отображаются на вкладках браузера и в закладках.

Сайты с фавиконами на вкладках и на панели закладок

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

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

Разберем, для чего нужен файл favicon.ico и можно ли без него обойтись.

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

Сайт без фавикона в выдаче среди прочих

  • С фавиконом сайт запоминается лучше

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

Логотип компании в фавиконе

  • Упрощает поиск нужного сайта

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

Закладки в Google Chrome

  • Избавляет от ошибки в лог-файлах

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

К примеру, такую:

Failed to load resource: net::ERR_EMPTY_RESPONSE (20:00:55:963 | error, network) at http://localhost:8383/favicon.ico

Фавикон из картинки: какую выбрать

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

Фавикон с чашкой для сайта о кофе выглядит гармоничнее

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

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

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

Как создать favicon для сайта

Есть три самых распространенных способа:

  1. Специальный плагин для Photoshop
    Позволяет работать этому популярному редактору изображений с форматом ico.
  2. Специальные программы для изготовления фавиконов
    Они специально «заточены» для изготовления иконок для сайта.
  3. Онлайн генератор favicon
    Самый простой и доступный способ — загрузить картинку в генератор, который сделает иконку для сайта из любого изображения. Иконка получится красивее, если изображение-донор кадрировать до квадрата.

RealFaviconGenerator сделает фавиконы для разных платформ и браузеров. Если вам достаточно одного значка, Генератор от PR-CY отконвертирует изображение в файл ICO 16х16.

Панель бесплатного генератора фавикона

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

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

… …

Атрибут “rel” указывает на тип ресурса. Большинство браузеров распознают “icon”, для Internet Explorer нужен “shortcut icon”.

От формата файла зависит тип передаваемых данных. Для ICO это “image/x-icon” или “image/vnd.microsoft.icon”, для PNG — “image/png” и аналогично для других форматов.

Для мобильных устройств часто прописывают отдельные фавиконы, указывая, к примеру, rel=”apple-touch-icon”.

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

Фавиконка не появится сразу после установки кода, нужно дождаться, пока поисковик ее проиндексирует.

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

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

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

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

Популярные десктопные браузеры

Стандартно для фавикона делают файл favicon.ico, он поддерживается всеми браузерами, но можно выбрать и другой формат. Обычно рекомендуют установить несколько размеров фавикона для разных случаев: 16×16, 32×32 и 48×48.

Пример кода:

Фавикон в HTML5

В HTML5 с помощью расширенного описания можно указать размеры и формат иконки. Для файла ICO, в котором несколько фавиконов, можно указать размеры в атрибуте sizes через пробел. Для фавикона в векторе укажите размер “any”.

Пример кода:

Android

Для Android рекомендуют сделать иконку в формате PNG 192×192, можно использовать прозрачность.

Указать фавикон и его расположение для Android можно через спецификацию The Web App Manifest. В ней описан простой JSON-файл, в котором веб-мастера указывают иконки, размеры и форматы для сайта или приложения. Его поддерживают Chrome, Opera, Samsung Internet и Firefox.

Манифест указывают с помощью:

Пример кода:

{ “name”: “My App”, “icons”: [{ “src”: “64.png”, “sizes”: “64×64” }, { “src”: “192.png”, “sizes”: “192×192” }], “display”: “fullscreen”, “orientation”: “landscape”, “theme_color”: “tomato”, “background_color”: “cornflowerblue” }

Apple

Для iOS рекомендуют делать иконку PNG размером 180×180. В документации Safari такие называются Web Clips, в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах.

Пример кода:

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

Настраивают с помощью .

Пример кода:

Edge и IE 12

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML.

Пример кода:

У Microsoft есть «Browser configuration schema reference» — XML-документ, в котором перечислены различные значки, соответствующие интерфейсу. Файлы конфигурации браузера позволяют задавать настройки с помощью внешних XML-файлов.

Пример кода:

#da532c

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

Источник: https://pr-cy.ru/news/p/7346-rukovodstvo-po-favikonu-dlya-sayta

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

Как задать иконку

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

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

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

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

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

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

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

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

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

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

  • Icon Craft;
  • Студия иконок.

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

Можно рисовать лого фирмы, писать буквы особыми шрифтами и т.д.

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

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

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

ICO).

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

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

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

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

На сегодняшний день универсальным форматом иконки для сайта считается формат .ico, так как именно его поддерживают все самые популярные браузеры: Google Chrome, Internet Explorer, Firefox, Opera и Safari.

Следующие по универсальности форматы иконки для webсайта – PNG, JPEG, и GIF их поддерживают все браузеры, кроме Internet Explorer’а.

А вот анимированные иконки для сайта GIF-формата поддерживают только Firefox и Opera.

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

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

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

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

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

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

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

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

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

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

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

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

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

Итак, теперь вы знаете и как сменить иконку сайта на новую.

Самостоятельное продвижение сайтов в Интернете
Как закрыть внешние ссылки от индексации
Как подобрать ключевые слова на сайт
Где взять контент для сайта
Какой URL добавить на страницу

Источник: http://seokleo.ru/kak-pomenyat-ikonku-sajta-kak-sdelat-i-ustanovit-ikonku-dlya-sajta-samostoyatelno/

Как изменить иконку файла или папки

Как задать иконку

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

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

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

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

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

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

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

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

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

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

Файл иконки для операционной системы Windows имеет расширение .

ico (о том, что такое расширение файла, читайте здесь) и содержит небольшое квадратное изображение, размер которого, как правило, не превышает 48 на 48 точек (пикселов).

Наиболее распространенными размерами иконок для Windows являются 16Х16, 32Х32 и 48Х48 пикселов. Иконки, превышающие 48Х48 пикселов, могут не отображаться или неправильно отображаться в старых версиях Windows.

Файл иконки для Windows, разработанный на профессиональном уровне, может содержать одновременно несколько изображений (до 9), которые, как правило, отличаются между собой только размером.

Например, один файл иконки может содержать одно и то же изображение в форматах 16Х16, 32Х32 и 48Х48. Зачем это нужно? Дело в том, что при автоматическом уменьшении изображения оно теряет резкость, а при увеличении — детализацию.

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

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

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

Как создать собственную уникальную иконку

Файлы иконок для Windows создаются при помощи специальных программ. В качестве картинки можно использовать любое понравившееся изображение (например, фотографию любимой кошки).

Программ для создания иконок существует много. Одной из них является Easy Picture2Icon. Это не самая функциональная программа, зато она является бесплатной, простой в использовании, занимает мало дискового пространства и позволяет создавать иконки размером 16Х16, 32Х32 и 48Х48 из фотографий форматов JPEG, GIF, PNG, BMP.

• Easy Picture2Icon:

⇒ Подробнее о программе | скачать >>>

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

В окне программы Easy Picture2Icon под изображением можно выбрать один из 3 вариантов его подгонки под «квадратный» формат:
– Compress – сжатие фотографии по более длинному краю до размеров более короткого;
– CutEdges – обрезка фотографии по более длинному краю до размеров более короткого;
– Fit – оставить как есть, вставив поля.

Справа от изображения можно выбрать от 1 до 3 форматов иконок (16Х16, 32Х32, 48Х48), которые будут созданы из исходного изображения и помещены в создаваемый файл .ico.

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

Как изменить иконку папки или ярлыка

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

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

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

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

Как изменить иконку файла

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

Чтобы поменять значок для определенного типа файлов в Windows XP:

1. Открыть любую папку или раздел, один раз щелкнуть левой кнопкой мышки по пункту «Сервис», находящемуся в верхней части открытой папки, и в появившемся списке выбрать пункт «Свойства папки» (см. рисунок).

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

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

Чтобы поменять значок для определенного типа файлов в Windows Vista / 7 / 8 понадобится специальная утилита, поскольку необходимые штатные средства в этих версиях Windows отсутствуют.

Утилита называется Default Programs Editor. Она представляет собой единый файл и не требует установки. Просто скачайте ее и запустите двойным щелчком левой кнопки мышки.

• Default Programs Editor:

⇒ Подробнее о программе | скачать >>>

В окне утилиты необходимо нажать “File Type Setings”, а на следующем этапе – “Icon”. Появится окно со списком типов файлов. В нем необходимо выделить тип файлов, для которого нужно поменять иконку (одним щелчком левой кнопки мышки), после чего нажать кнопку “Next” (см. изображение).

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

Источник: https://www.chaynikam.info/chto_takoe_ikonka.html

Как использовать и оформлять иконки с помощью CSS?

Как задать иконку

  1. Необходимые шаги для использования иконок
  2. Использование иконок Font Awesome
  3. Масштаб иконок Font Awesome и их цвет
  4. Использование иконок с кнопками
  5. Добавление эффекта тени к иконкам
  6. Использование иконок Font Awesome в списке
  7. Анимация иконок Font Awesome
  8. Поворот иконок Font Awesome

Для того, чтобы использовать иконки, вам необходимо следовать этим шагам:

1) Подключите иконки к сайту

Скопируйте код, предоставленный веб-страницей Font Awesome, и вставьте в каждого шаблона или страницы, где хотите использовать иконки Font Awesome.

Для использования последней версии иконок this page смотрите эту страницу .

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

Загрузка и установка не требуются.

Иконки должны быть расположены внутри элемента . Найдите необходимую вам иконку и скопируйте ее HTML код.

Код иконки будет выглядеть следующим образом:

3) Добавьте стиль к иконкам

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

Как использовать иконки Font Awesome¶

Иконки могут находится фактически где угодно, если используете стилевой префикс (fa) и название иконки. Font Awesome используется вместе со строчными элементами, и рекомендуется придерживаться к ним при проекте с согласованным HTML элементом.

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

Для ссылки на иконку вам необходимо использовать имя иконки с префиксомpan fa- и предпочитаемый вами стиль с соответствующим префиксом (fas, fal, far или fab).

Используйте элемента для ссылки на элемент:

Или используйте элемент span:

Префикс fa устарел в версии 5. Новые префиксы по умолчанию fas (сплошной стиль), fab (бренды), far (обычный стиль) и fal (тонкий стиль).

Иконки Font Awesome Пример иконок Камера Машина Конверт Попробуйте сами!

Иконки наследуют размер шрифта их родительского контейнера, чтобы соответствовать любому тексту, который может быть использован вместе с ними. Можно увеличить или уменьшить масштаб иконок относительно унаследованного размера шрифта с помощью таких классов, как fa-xs, span class=”attribute”>fa-sm, fa-lg, fa-2x и др.

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

Пример

Иконки Font Awesome div { color: #1c87c9; } Пример иконок с указанными размерами и цветами Попробуйте сами!

Смотрите детали:

Также возможно добавить стиль непосредственно к размеру иконки, устанавливая font-size во внешнем стиле иконки или в стилевом атрибуте HTML элемента, который ссылается на иконку.

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

Вы можете также добавить иконки при создании кнопок. Просто вставьте иконку в элемент .

Добавление эффекта тени к иконкам¶

Для добавления эффектов тени к иконкам необходимо CSS свойство text-shadow.

Установите тень для того элемента, к которому относится иконка:

Использование иконок Font Awesome в списке¶

С помощью иконок можно сделать много всего! Можете оформлять ваши HTML списки в виде декоративных маркеров.

Используйте класс fa-ul для элемента

    и класс fa-li для элемента
  • , чтобы заменить маркеры по умолчанию в неупорядоченном списке.

    Анимация иконок Font Awesome¶

    Используйте класс fa-spin для плавного вращения иконки и класс fa-pulsefa-spinner.Будет выглядеть таким образом:Смотрите пример, чтобы увидеть разницу между классами fa-spin и fa-pulse:

    Поворот иконок Font Awesome¶

    Довольно часто для дополнительного дизайна вам может понадобиться поворачивать, отражать иконку.Для произвольного поворота и отражения иконок используйте классы fa-rotate-* и fa-flip-*.

    Спасибо за ваш отзыв!

    Считаете ли это полезным?

Источник: https://ru.w3docs.com/snippets/css/kak-ispolzovat-i-oformliat-ikonki-s-pomoshchiu-css-polnoe-rukovodstvo.html

Разработчикам: как создать идеальную иконку приложения

Как задать иконку

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

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

Инвариантно лишь одно — у приложения должна быть иконка.

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

Мнения о первоочередном смысле и задачах иконки расходятся. Некоторые считают её важным элементом маркетинга. Иными словами, разработчику необходимо создать такую иконку, чтобы уже при взгляде на неё пользователь захотел скачать/купить их продукт. Стоит повториться, что иконка — это первое, что увидит пользователь.

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

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

Узнаваемость — ключевой параметр для любого бренда. Вы безошибочно отличите Mercedes от других автомобилей по его значку. Вы легко поймёте, что перед вами на полке шоколадка Nestle. В конце концов, надкусанное яблоко создаёт в вашем мозгу лишь одну ассоциацию.

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

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

Стратегии

Идеальная иконка должна напоминать о продукте каждым своим элементом: цвет, текстура, рисунок, форма. Для примера можно взять иконку Phone. С момента релиза она практически не изменилась.

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

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

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

К примеру, все эти приложения используют тележки, которыми мы так привыкли пользоваться в супермаркетах. Тележка -> магазин -> покупать. Всё очень просто.

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

Однако, если посмотреть на эти иконки внимательнее, то можно увидеть разногласие в их значках и функциях. Zappos и Amazon существуют только в виде интернет-магазинов. В них не ходят с тележками. В App Store тоже не ходят с тележками.

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

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

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

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

Это же самое он видит на иконке.

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

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

Trailers — приложение от Apple. Сочетание символа, присущего «звёздным» фильмам, а также броского фона, который ассоциируется с красными ковровыми дорожками, вызывает у пользователя ясное понимание: перед ним приложение о фильмах.

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

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

Несколько приложений

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

пошёл другим путём: сохраняется лишь уникальный фон иконки, а объект ясно отражает функцию данного приложения.

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

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

Игры

Самая сложная задача — создание иконок для игр. Чудесно, если это известное продолжение популярной игрушки, и главный герой на иконке будет узнаваем всегда и всеми. Но как быть, если персонажи ещё никому не известны? Ответа нет, и единственным разумным способом остаётся размещение на иконке портрета главного героя игры в сочетании с ярким фоном.

Источник: https://Lifehacker.ru/razrabotchikam-kak-sozdat-idealnuyu-ikonku-prilozheniya/

Создаем уникальный Favicon и устанавливаем на сайт

Как задать иконку

Фавикон (favicon или фавиконка) — это небольшое изображение рядом с названием страницы в поисковой выдаче Яндекса, а также во вкладке сайта.
Так это выглядит в поиске Яндекса:

А так во вкладках браузера:

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

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

Кстати, Яндекс.Вебмастер предупреждает об ошибке, если у сайта нет фавиконки. Также ошибка может отобразиться в лог-файлах. Браузеры запрашивают favicon.ico, если не находят нужный файл, сервер фиксирует ошибку 404.

Лог-файл — журнал с системной информацией о работе сервера и действиях пользователей.

Как быстро создать фавикон для сайта

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

Не рисуйте много деталей. Значок очень маленький (32×32 пикселя), поэтому мелкие нюансы будут совершенно не видны читателям.

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

Самостоятельно создать мини-логотип

Открываем любой графический редактор, например, Photoshop и творим. Если на значке будет текст, то размер шрифта следует установить на 8-10 пикселей. У Фотошопа есть специальный плагин для создания значков — «Favicon.ico».

Полезно! Если у вас не получается сохранить файл в формате .ico. То можно сохранить его в PNG или JPEG и после этого найти любой онлайн-конвертер изображений. В поиске пишем «конвертер из PNG в ICO».

Создать значок с помощью онлайн-сервиса

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

Рисуем фавинкон: Favicon.by

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

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

Добиваемся отличного результата и нажимаем «Скачать». Файл сохранится в требуемом формате с правильным названием.

Создание фавикон через загрузку изображения: Realfavicongenerator.net

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

Берем готовое изображение 260×260 пикселей. Выбираем нужную степень сжатия и настройки для iOS, Android и MacOS Safari. В результате у вас будут все типы иконок и код для вставки.

Скачать готовый файл фавикон

Этот вариант подойдет тем, у кого совсем нет времени. В этом случае идем на Яндекс.Картинки или любой другой ресурс по поиску изображений и пишем «готовый фавикон».

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

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

Также можно скачать значок на специализированных стоках, например:

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

Желательные форматы Favicon: ico, png, svg

ICO

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

PNG

Поддерживается всеми браузерами и платформами.

SVG

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

Допустимые форматы: jpeg и gif

Не все браузеры поддерживают отображение таких значков.

Если ваша фавиконка имеет нестандартные форматы png или ico, то лучше проверить ее через сервис caniuse.com. Так вы поймете, поддерживают ли браузеры нужный вам формат.

Продвинутая информация по размерам фавиконов, которая пригодится не всем

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

Не хотите так заморачиваться? Тогда делайте фавикон 32×32 пикселя. И переходите к следующему разделу.

Вот сводная таблица по рекомендуемым размерам. Источник: ux.pub

Для смартфонов

Для Андроида и Эпла размер иконки зависит от типа и плотности экрана. Вдруг, вам это пригодится в работе.

Как поставить Favicon самостоятельно

Стандартно поисковая система Яндекс и другие сервисы будут искать вашу фавиконку в корне сайта по адресу site.ru/favicon.ico. Поэтому наша задача закачать туда наш значок или указать иной путь его размещения.

Через тему сайта WordPress

Начиная с версии WordPress 4.3, можно добавить фавикон из админки WordPress.

Придерживайтесь вот такой последовательности:

  1. Откройте админку
  2. Внешний вид > Настроить > Свойства сайта
  3. Значок сайта > Изменить изображение
  4. Загрузите фавикон
  5. Нажмите кнопку Опубликовать.

Как добавить фавикон на сайт WordPress вручную

Советуем сначала протестировать все на локальном сайте разработки.

  1. Заходим в файлы темы FTP-клиент или файловый менеджер.
  2. Находим папку /wp-content/themes/your-theme.
  3. Загружаем иконку в подпапку, например, Assets.
  4. Запоминаем путь к файлу.

В файте function.php и прописываем путь до фавикона.

function add_favicon() {
echo ‘’;
}
add_action(‘wp_head’, ‘add_favicon’);

Строка после href=«‘.get_template_directory_uri() должна указывать путь к вашему значку. Убедитесь, что вы указали правильное имя файла. Если вы используете формат файла .ico, то это будет один:

function add_favicon() {
echo ‘’;
}
add_action(‘wp_head’, ‘add_favicon’);

Как вставить фавикон через корневой каталог, если сайт не использует CMS

Для установки фавикона более сложным путем заходим в корневой каталог нашего сайта. Например, при помощи программы FileZilla. Тут нужно найти HTML-код главной страницы сайта.

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

Рассмотрим значения:

rel

Если мы указываем значение «icon», то изображение будет хорошо отображаться во всех современных браузерах. Если указать вместо этого «shortcut icon», то значок будет виден только в Internet Explorer.

href

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

type

Здесь нужно прописать формат файла.

Как задать фавиконы для разных устройств?

Пропишите ссылки на иконки между тегами head. Например:

Apple

Иконки в устройствах Apple закругляются по углам. Поэтому лучше использовать apple-touch-icon-precomposed вместо apple-touch-icon.

Как задать размеры фавиконок?

Можно загрузить иконку в нескольких размерах: 16×16, 32×32 и 48×48. Вот пример для декстопа:

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

Просто погуглите ваш ресурс. Или проверьте сайт в сервисе Realfavicongenerator.

А еще можно воспользоваться вот таким способом. Только вместо «mysite.ru» укажите название вашего сайта:

  • В Яндексе: http://favicon.yandex.net/favicon/mysite.ru.
  • В Гугле: https://www.google.com/s2/favicons?domain=mysite.ru.

Если иконка не отображается, убедитесь что:

  • ссылка на фавикон открыта для индексации в robots.txt и отдает ответ сервера HTTP 200.
  • изображение ico или png находится в корне ресурса или к нему специально прописан путь.
  • вы подождали несколько недель. Так как поисковым роботам нужно время, чтобы проиндексировать значок сайта.

Подытожим

  1. Фавикон лучше делать, чем не делать. Это поможет людям идентифицировать ваш сайт.
  2. Создать фавикон можно в Фотошопе или с помощью онлайн-сервисов
  3. Можно создавать иконку сразу в нескольких размерах, чтобы она корректно отображалась на всех устройствах.
  4. Наиболее подходящие форматы: ico или png.
  5. Добавить фавиконку можно через вашу CMS или через корень сайта.

Источник: https://puzat.ru/knowledge/favicon

Интересные факты
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: