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


Создание иконок для сайта - как создать иконку для сайта и как добавить favicon.ico на сайт

Как создать иконку для своего сайта? Создаем иконку (favicon.ico) для своего сайта.

В данной статье описан способ создания favicon.ico – иконки для Вашего сайта. Что дает данная иконка, и какая от нее польза?

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

Создаем favicon.ico с помощью онлайн сервиса.

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

Для этого создадим новый документ (CTRL+N) размером 48px на 48px и прозрачным фоном.

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

Добавим новые направляющие (Просмотр -> Новая направляющая…), как показано на рисунке:

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

Теперь используя инструмент «Произвольная фигура» (U), создадим какую-нибудь фигуру:

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

Сохраним результат в формате PNG-24 с поддержкой прозрачности (Файл -> Сохранить для WEB и устройств…):

Как создать favicon

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

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

Онлайн сервис для создания favicon

Теперь Вам останется только скачать, только что созданную иконку для сайта.

Перед тем как перейти к способу создания favicon.ico с помощью плагина для Photoshop, давайте разберемся, как подключить favicon на сайт.

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" href="favicon.ico" /><!-- href - путь до favicon.ico --> <title>Как подключить иконку favicon.ico на сайт</title> </head> <body> </body> </html>

Как создать favicon.ico для сайта с помощью плагина Adobe Photoshop?

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

Для того что бы нам установить данный плагин необходимо скопировать сам плагин в папку с плагинами Photoshop (Папка Photoshop -> Plug-ins -> File Formats).

После того как плагин установлен, запускаем Photoshop и повторяем процесс создания favicon в Photoshop описанный выше. Как иконка будет создана, нам необходимо ее сохранить в формате ico. Для этого переходим Файл -> Сохранить как… и выбираем при сохранении тип файлов ICO (Windows Icon).

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

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

Скачать исходные материалы для создания favicon.ico

Прокомментировать статью

www.09web.ru

Иконки ico: как и зачем их нужно делать

  • Сайтостроение
  • Статьи
  • Веб-дизайн
  • Пиктограммы или иконки в формате ico пользователь персонального компьютера видит ежедневно. Они повсеместно используются, как в сети Интернет, так и внутри любой операционной системы.

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

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

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

    Иконки для сайта 16х16 ico можно создать при помощи любого удобного пользователю графического редактора (им может быть даже классический paint в котором можно создать файл 16 на 16 или 32 на 32 пикселя и по точкам нарисовать иконку) или специального интернет ресурса:

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

    Есть несколько способов создания иконок ico:

    • При помощи специализированных графических редакторов, таких как: IconCool Studio и IcoFХ можно создать иконку из большой полноцветной картинки, просто нажав кнопку: «преобразовать» в иконку. При этом нужно будет указать размер будущей картинки. Все остальное программа сделает сама. В ней можно сделать, как иконки 16х16 ico, так и пиктограммы других размеров;
    • При помощи специального онлайн сервиса (например, favicon.ru), создать иконку онлайн ico невероятно просто:

      Для начала пользователю нужно загрузить на сайт выбранное изображение, после чего нужно нажать кнопку «редактировать иконку» и указать, какая часть картинки будет прозрачной. После этого нужно будет нажать кнопки «сохранить изменения» и «создать favicon», после чего пользователю будет отправлен готовый файл с иконкой 16х16 ico. Так же можно нарисовать иконку собственноручно, пользуясь онлайн редактором;

    • Тем, кто не хочет тратить свое время на рисование или поиск нужной картинки для иконки ico 256×256 или любого другого размера, существуют специальные онлайн ресурсы, где в свободный доступ выложены большие архивы пиктограмм. Огромный набор иконок ico можно свободно скачать с сайта iconpack.ru или любого другого похожего ресурса:

    Удачи!

    Еще не голосовали

    рейтинг из

    ХорошоПлохо

    Ваш голос принят

    www.internet-technologies.ru

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

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

    Что такое favicon? — это небольшая картинка в формате .ico, имеющий размеры 16 на 16 пикселей и цветовую гамму TrueColor, которая отображается рядом с адресом вашего сайта, в адресной строке браузера и рядом с названием вашего сайта в «Избранном» или в «Закладках».

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

    Варианты создания иконки

    Первый вариант

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

    1. Переходим на сайт Favicon.ru

    2. В поле «Обзор…»  выбираем картинку с вашего компьютера. После чего жмем «Создать favicon.ico!»

    3. Далее нажимаем на кнопку «Скачать favicon.ico!» и сохраняем ее.

    Второй вариант

    Для любителей креатива, то есть нарисовать иконку самостоятельно.

    1. Заходим на сайт favicon.cc . Перед нами открывается страница с полем для рисования по центру и палитрой в правой колонке.

    2. Выбираем нужный цвет и…рисуем нашу будущую иконку. Все лишние детали можно потом удалить ластиком. Чуть ниже можно посмотреть превью с иконкой.

    3. Сохраняем нашу иконку, нажав на «Download Favicon».

    Установка Favicon на блог Вордпресс:

    •  Загружаем нашу иконку favicon.ico в корневую папку на хостинге. Обычно это путь: название_блога/docs/favicon.ico
    •  Переходим на ваш блог в раздел Внешний вид –> Редактор .
    • Вставляем HTML код в главный файл вашего сайта header.php перед закрывающимся тегом </head>.  Соответственно, вместо ваш_сайт, впишите адрес вашего блога.

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

    •  После того как указали путь и вставили код, нажимаем внизу «Обновить файл»

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

    Каким должен быть фавикон?

    Пару советов по созданию иконки.

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

    Если будут вопросы, задавайте их в комментариях. Удачи :)

    Еще статьи по теме:

    www.mistli.ru

    Создание иконки .ico для программ

    Сейчас я максимально подробно расскажу как сделать нормальный «.ico», что бы он корректно отображался в операционных системах Windows, на других системах тоже по идее должен, но это не проверенно. Этот урок создан для широкой аудитории, как для знающих, так и для совершенно не знакомых с «Gimp». Например, вы отличный программист, создаёте программы на заказ, интегрируете в них уже готовые «.ico», но вдруг вы решили создать что-то своё, но вы не владеете ни одним графическим редактором, этот урок поможет вам. В этом уроке я буду объяснять не только какие инструменты нужно использовать, а ещё и как их нужно использовать.

    Для начала скажу не знающим людям, что такое «.ico» и для чего он нужен.

    «.ico» — формат «картинок» присвоенных определённой программе, например:

    Перед вами исполняемый файл «Gimp 2.8», а выделенное красной линией и есть «.ico» файл, уже интегрированный в приложение.

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

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

    1. Уменьшение изображения

    Первое, что нужно сделать это уменьшить изображение которое вы хотите сделать «иконкой» до размера «256×256». Это можно сделать двумя способами, первый из них по-проще, но второй тоже не трудный.

    Способ 1:

    В редакторе «Gimp», в верхнем баре нажать на «Изображение», затем выбрать «Размер изображения».

    В открывшемся окне установить значения высоты и ширины 256.

    Получилось не красиво, но для ленивых сойдёт.

    Лучше делать вторым способом, т. к. я так и делал.

    Способ 2:

    Создать новое изображение, в баре нажать «Файл» выбираем «Создать».

    Ширину и высоту указать «256×256», остальные параметры не трогаем.

    У нас получается это.

    Далее нам нужно добавить «Альфа-канал». Это делается в правом окошке редактора «Слои — Кисти».

    Щёлкаем правой клавишей мыши на слой «Фон» и выбираем «Добавить альфа-канал».

    Теперь открываем ваше изображение в редакторе «Gimp». !Созданное изображение не закрываем!

    В верхнем баре нажимаем кнопочку «Правка» и выбираем «Копировать».

    Возвращаемся к созданному, пустому изображению «256×256».

    И в верхнем баре нажимаем кнопочку «Правка» и выбираем «Вставить».

    Далее в правом окошке «Слои-Кисти» щёлкаем правой клавишей мыши на слое «Плавающее выделение» и нажимаем «В новый слой».

    У вас получится что-то похожее:

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

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

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

    Нажимаем «Изменить».

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

    Сделаем это инструментом «Перемещение» на панели инструментов. Нажимаем на инструмент.

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

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

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

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

    Если жёлтый пунктир находится по краям холста как тут:

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

    Теперь приступим к самому созданию качественной иконки формата «.ico».

    2. 15 копий слоя

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

    Для начала я объясню, что мы будем потом делать с этими пятнадцатью слоями. В файле «.ico» структура слоёв будет состоять из трёх разных по качеству «отделений» (в каждом из них будет по 5 разных размеров иконки), что бы файл было видно везде.

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

    2.1 Копируем

    Создаём 15 копий. При помощи панели «Слои-Кисти», кликаем на слой правой кнопкой мыши и выбираем «Создать копию слоя».

    И делаем так пока не будет 15 слоёв в списке.

    Я растянул панель, что бы вы увидели, что слоёв именно 15. Это делать не обязательно, но это удобно. Так же, для простоты понимания, я переименовал слои с учётом их «отделений», опять же не обязательно, но удобно.

    2.2 Масштабируем

    С помощью инструмента «Масштаб» изменяем слой который назван у меня «2», не нарушаем структуру строения. Устанавливаем значение высоты и ширины 48, то есть слой должен получиться 48×48. Слой «3» должен быть размером 32×32. Слой «4» — 24×24 и наконец слой «5» должен быть 16×16. У вас получится что-то похожее.

    Так же делаем с остальными «отделениями».

    И последний рывок.

    В итоге у нас получается:

    3. Экспорт (сохранение) иконки в нужном формате

    Это всё, но осталось правильно сохранить. В «Gimp 2.8» нужно экспортировать, это можно сделать нажав на верхнем баре кнопку «Файл» и выбрав «Экспортировать».

    Открывается окно с сохранением работы. Обратите внимание, название файла не имеет значения, оно может быть любым, а формат должен быть только «.ico», как на скриншоте.

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

    То есть, первое «отделение» с пятью картинками должно быть «8 bpp», второе — «24 bpp», а третье — не изменяйте. Всё, поздравляю вас, теперь вы умеете делать качественные «.ico». Вот пример использования этой иконки интегрированной в программу.

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

    www.progimp.ru