Объявление:
Наши контакты: +7 (928) 029 69 59, +7 (909) 493 69 59

Создание и продвижение сайтов в Пятигорске, Черкесске и Ставрополе WEB студия DigitalART предоставляет услуги по разработке и созданию сайтов в Черкесске, Пятигорске и Ставрополе. Так же Мы предоставляем услуги по поисковой оптимизации и продвижению сайтов Черкесска, Ставрополя и Пятигорска в поисковых системах. Более подробные условия заказа создания или продвижения сайта в Ставрополе, Пятигорске или Черкесске, Вы можете узнать по телефонам +7 (928) 029 69 59, +7 (909) 493 69 59 Разработка и раскрутка сайтов в Черкесске, Ставрополе и Пятигорске 

Последние работы по созданию и продвижению сайтов нашей WEB студии в Ставрополе, Черкесске и Пятигорске

Дизайн-студия DigitalART » Photoshop,WEB дизайн » Как создать иконку для своего сайта
19.01.2012

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

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

Как создать иконку для своего сайта? Создаем иконку (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

Прокомментировать статью
Дата добавления: 19.01.2012
Эта запись опубликована 19.01.2012 в 17:48, автором DigitalART, и добавлена в рубрику Photoshop, WEB дизайн. Вы можете подписаться на обновления данной статьи по RSS 2.0 ,

Об авторе

Студия WEB-Дизайна DigitalART предоставляет услуги по созданию и продвижению сайтов в поисковых системах в городе Черкесске и Карачаево-Черкесской Республике, а также в городе Ставрополе и Ставропольском крае.

WEB студия DigigtalART в интернете

Комментарии закрыты.

Вверх