Ico создание иконок: Как создавать иконки сайтов в 2022 году — всё о favicon / Хабр

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание иконки для сайта (favicon.ico) (Web Мастерская :: Статья: 265)

Иконка для сайта (файл favicon.ico), Favicon – сокращение от Favorite Icon, в переводе: любимая иконка.

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

Где же брать икону или как её сделать? Тут всё очень просто: можно качать иконки с Интернета в архиве и выбирать. Но здесь так, если скачали Вы и она Вам понравилась, может кто-то скачал такую же и вставил её на свой сайт. По мне, так лучше быть непохожим на других, поэтому делаем сами. Очень хорошо, если у Вас есть специальная программка для создания иконок: нарисовали картинку, прогнали через прогу и логотип готов. Но если такой машины у Вас нет, не расстраивайтесь. Быстрый и абсолютно бесплатный способ сделать значок для Вашего проекта — это воспользоваться сервисом Favicon.ru.

Чтобы воспользоваться сервисом Favicon.ru, Вам необходимо за — ранее подготовить изображение будущей иконки. Делайте изображение квадратным, т.к. сервис уменьшает его до размера 16 на 16 пикселей и, если оно изначально не-квадратное, может выйти некачественный рисунок логотипа. Размер файла должен быть не больше 300 кб. Затем изображение нужно загрузить на сервис Favicon.ru и нажать кнопку «Создать favicon. iсo«, после скачать свеже испеченную иконку, нажав на кнопку «Скачать favicon.ico!». Иконка готова!

После создания логотипа Вашего сайта, необходимо вставить иконку в сам сайт, для этого нужно между тегами <head> и </head> прописать следующие:

<linkrel="shortcuticon"href="favicon.ico"/>

Файл favicon.ico должен находится в одной папке с сайтом, в другом случае указывайте полный адрес местонахождения файла. Написав код на каждой странице, стоит проверить проделанную работу в разных браузерах. Для этого перейдите на сайт, где была добавлена иконка и, если всё выполнено правильно, то в адресной сроке Вы увидите свой логотип. В результатах поиска Яндекс икона может появиться не сразу. Это связано с временем обновления КЭШа, срок появления иконки доходит до нескольких месяцев.

Хочу поделиться ещё одним сервисом создания иконки: http://www.favicon.cc/ на мой взгляд этот сервис лучше чем выше представленный.

Возможности:

• Создавать иконку с прозрачным фоном.
• Создавать анимированную иконку.

Как пользоваться:

• Выберите цвет.
• Рисуйте свою картинку или редактируйте загруженную.
• Скачайте готовую иконку (бесплатно).

Как настроить пользовательские значки на рабочем столе Windows 11 с помощью Paint 3D и Junior Icon Editor

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

Чтобы настроить пользовательские значки на рабочем столе Windows 11, вам необходимо установить подходящее программное обеспечение для дизайна. Paint 3D и Junior Icon Editor — это два бесплатных программных пакета, с помощью которых вы можете создавать значки. Вот как вы можете настроить значки на рабочем столе с помощью Junior Icon Editor и Paint 3D.

Как настроить пользовательские значки на рабочем столе с помощью Paint 3D

Paint 3D — это более продвинутая версия Paint с дополнительными инструментами для добавления 3D-фигур и наклеек. Windows 10 включает это приложение, но оно не предустановлено на последней платформе Microsoft. Тем не менее, это приложение легко восстановить в Windows 11. Вы можете создать значок на рабочем столе с помощью Paint 3D в Windows 11 следующим образом:

1. Нажмите Пуск и Microsoft Store в меню.
2. Введите ключевое слово Paint 3D в поле поиска приложений.
3. Выберите Paint 3D, чтобы просмотреть страницу MS Store для этого приложения.
4. Нажмите Получить , чтобы установить приложение для дизайна.
5. Затем выберите Открыть на странице Paint 3D.
6. Нажмите кнопку Новый .
7. Выберите Canvas в верхней части Paint 3D.
8. Снимите флажок Блокировать соотношение сторон .
9. Вход 32 в Ширина и Высота ящиков.
10. Включите параметр Прозрачный холст .
11. Нажмите кнопку Zoom ( + ), чтобы развернуть маленькое полотно.
12. Затем выберите вкладку Кисти , чтобы получить доступ к инструментам рисования Paint 3D и использовать их для создания значка. Вы также можете создать свой значок, добавив фигуры или наклейки на холст из вкладок 2D-фигуры , 3D-фигуры и Наклейки .
13. Когда вы закончите разработку значка, нажмите кнопку Меню .
14. Выберите параметр Paint 3D Сохранить как .
15. Нажмите кнопку Изображение .
16. Выберите формат PNG (изображение) в меню Сохранить как тип .
17. Нажмите Сохранить , чтобы открыть окно выбора каталога.
18. Выберите папку для сохранения изображения значка
19. Щелкните Сохранить , чтобы сохранить изображение.

Альтернативный вариант — сохранить изображение в формате BMP в Paint 3D. Вы можете добавить изображения размером со значком в формате BMP к ярлыкам на рабочем столе. Однако значки изображений BMP не будут иметь прозрачного фона.

Если вы хотите, чтобы ваш значок имел прозрачный фон, вам нужно сохранить изображение в формате PNG, как указано выше. Затем вы можете преобразовать это изображение PNG в прозрачный значок с требуемым форматом ICO. Вот как вы можете конвертировать PNG-файл вашего значка в ICO с помощью веб-приложения конвертации Online-Convert.com:

1. Откройте веб-приложение ICO Converter в браузере.
2. Выберите параметр Выбрать файл .
3. Затем выберите файл изображения PNG вашего значка из каталога, в котором он сохранен, и нажмите Открыть .
4. Нажмите зеленую кнопку Start инструмента преобразования.
5. Нажмите Загрузить , чтобы сохранить файл значка в папке загрузки вашего браузера по умолчанию.

Теперь вы можете добавить свой значок на ярлык на рабочем столе Windows 11. Щелкните правой кнопкой мыши ярлык, к которому вы хотите применить новый значок, и выберите Свойства . Нажмите Изменить значок , чтобы открыть окно выбора значка. Нажмите Browse , выберите свой собственный значок и нажмите Open для подтверждения. Выберите параметры OK > Применить , чтобы добавить его.

Как настроить пользовательские значки на рабочем столе с помощью Junior Icon Editor

Junior Icon Editor — это программное обеспечение, разработанное специально для создания пользовательских значков. Это программное обеспечение позволяет создавать и сохранять значки в формате ICO, поэтому вам не нужно конвертировать изображения. Однако он не включает в себя какие-либо параметры для добавления 3D-фигур и наклеек к дизайну значков, как в Paint 3D. Вы можете создавать пользовательские значки для рабочего стола с помощью Junior Icon Editor, например:

1. Откройте веб-сайт Junior Icon Editor.
2. Выберите опцию Загрузить бесплатный редактор значков .
3. Чтобы открыть мастер установки, сначала откройте вкладку Загрузки браузера. Вкладки Downloads Chrome и Edge используют одну и ту же горячую клавишу Ctrl + J .
4. Щелкните на вкладке младших значков editor.exe в верхней части вкладки «Загрузки».
5. Выберите Next в окне Installing Junior Icon Editor.
6. Нажмите кнопку мастера настройки Я согласен .
7. Продолжайте выбирать Далее , чтобы установить Junior Icon Editor с параметрами установки по умолчанию.
8. Нажмите Готово с выбранным параметром Запустить приложение сейчас.
9. Выберите параметр размера в окне «Новый значок». Радиокнопка 32 x 32 — это вариант со значком среднего размера.
10. Выберите настройку цвета значка в правой части окна «Новый значок».
11. Щелкните OK , чтобы открыть холст и инструменты дизайна.
12. Создайте свой значок с помощью инструментов рисования в левой части окна Junior Icon Editor. Вы можете выбрать цвета из палитры справа.
13. Чтобы сохранить готовый дизайн значка, выберите параметр Файл .
14. Выберите Сохранить как , чтобы открыть окно для сохранения файлов.
15. Введите заголовок в поле Имя файла .
16. Выберите место для сохранения значка.
17. Нажмите Сохранить для завершения.
18. Теперь добавьте свой собственный значок на ярлык на рабочем столе.

Junior Icon Editor имеет относительно стандартные инструменты для создания иконок. Вы можете выбрать параметры Pencil , Airbrush и Paintbrush в его наборе инструментов. Нажмите маленькие стрелки на кнопках Paintbrush и Airbrush , чтобы выбрать различные стили кисти и уровни толщины для этих инструментов.

Это программное обеспечение для дизайна включает опции для добавления к значкам основных заполненных или пустых прямоугольников и квадратов. Кроме того, вы можете добавлять прямые и изогнутые линии и дуги. Paint 3D имеет 24 варианта 2D-форм, а также 3D-объекты и модели, что несколько лучше.

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

Вам не обязательно создавать иконки с нуля в Junior Icon Editor. Вместо этого вы можете импортировать и редактировать существующие значки программного обеспечения или значки, загруженные из Интернета, нажав Файл > Открыть . Однако вам нужно сначала извлечь значки приложений с помощью IconViewer, прежде чем вы сможете их импортировать. Кроме того, вы можете открыть файлы изображений, а затем сохранить их в формате ICO.

Добавьте больше стильных пользовательских значков на рабочий стол

Итак, теперь вы можете оживить свой рабочий стол Windows 11, заменив некоторые унылые значки по умолчанию на более стильные пользовательские альтернативы. Есть много других приложений, с помощью которых вы можете создавать значки, но Paint 3D и Junior Icon Editor, вероятно, содержат достаточно инструментов для редактирования, чтобы удовлетворить большинство пользователей. Вы можете легко настроить визуально привлекательные значки ярлыков в Windows 11 и 10 с помощью обоих программных пакетов.

Inkscape

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

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

Создать новый файл значка 

Сначала откройте Inkscape и создайте новый файл. Нажмите на меню файлов F и выберите « N ew», а затем «icon_32x32».

Затем откроется новый пустой файл, в данном примере с сеткой:

Сетка представляет собой блочную сетку 32×32, такого же размера, как и многие значки, которые вы найдете на своем компьютере. Линии в этой сетке не отображаются при экспорте конечного изображения в файл другого типа, например JPEG или GIF. Сетка предназначена только для того, чтобы помочь вам создать квадратную иконку со стандартными размерами 32×32 пикселя. Можно добавить или удалить сетку, используя ‘V просмотр > G рид’ меню.

Сохранить файл

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

Откроется диалоговое окно. Стиль вашего диалогового окна может отличаться от следующего:

 

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

Использование окна предварительного просмотра значков

Если вы собираетесь экспортировать изображение в растровую версию и использовать его по нескольким причинам, может быть важно знать, каким образом оно будет отображаться в виде значка в процессе создания. Поэтому Inkscape имеет дополнительную функцию предварительного просмотра растровых изображений. Это окно позволит вам увидеть, как будет выглядеть ваша иконка в стандартных размерах 16×16, 24×24, 32×32, 48×48 и 128×128. Находится в Меню через: View > Ico n Preview…

Начать работу

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

Начнем с создания фонового круга. Выберите инструмент «Круг» на панели инструментов слева от Inkscape:

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

У вас может быть темная линия вокруг внешней стороны круга. Если вы это сделаете, мы рассмотрим, как удалить это в ближайшее время. Сейчас мы изменим цвет круга на желаемый цвет. Я выберу цветовой код HTML «#ff7f00». Вы можете выбрать другой цвет. Чтобы изменить цвет круга, щелкните его правой кнопкой мыши и выберите «Заливка и обводка»:

Должно появиться следующее диалоговое окно:

Я знаю, что цветовой код HTML эквивалентен RGB. код + ‘ff’. Поэтому я добавлю «ff7f00ff» в поле RGBA внизу:

Если вы знаете код цвета HTML, добавьте его сюда. В противном случае вы можете использовать ползунки RGB для выбора цвета. Когда вы меняете значения, вы увидите, как одновременно меняется цвет круга. Если у вас была линия вокруг внешней стороны круга, когда вы его создавали, теперь вы можете удалить его, щелкнув вкладку «Обводка st

y le» и установив поле «Ширина» (вверху вкладки) на 0 (ноль) пикселей. Когда вы довольны цветом круга, просто переместите диалоговое окно «Заливка и обводка» в сторону (если у вас достаточно места на экране) или закройте его. Мы будем использовать его снова чуть позже.

Мой цветной круг теперь выглядит так:

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

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

Теперь вернитесь в диалоговое окно «Заливка и обводка» и измените значение поля RGBA (на вкладке «Заливка») на «000000ff»:

Теперь квадрат должен стать черным:

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

Теперь мы хотим сделать красивые закругленные углы на черном ящике.

Для этого наведите указатель мыши на маленький круглый кружок в правом верхнем углу черного ящика. Он должен стать «красным»:

Нажмите на кружок, когда он станет красным, и перетащите его вертикально вниз, и при перетаскивании все углы черного ящика изменятся на закругленные. Когда вы удовлетворены величиной «округления», отпустите кнопку мыши:

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

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

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

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