Ваш браузер не определен автоматически, в связи с чем оформление блога может отображаться некорректно. подробнее...
twitter
rss
friendfeed
punkwj.mp
punkWJ ВКонтакте

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

4
коммент.

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

Сегодня рассмотрим как создать иконку для сайта – favicon.ico.

Favicon (сокр. от англ. FAVorites ICON — «значок для избранного», от названия папки с закладками в MSIE) — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, в вкладках и в других элементах интерфейса.

Wikipedia

Есть два варианта создания иконок: конвертация уже существующего изображения или рисование «с нуля». Для обоих вариантов отлично подходит программа IcoFX (есть и портативная версия на PortableApps.com). IcoFX позволяет создавать иконки всех типов и размеров. Имеется много встроенных эффектов.

Интерфейс

icofxПрограмма имеет руссифицированный интерфейс, поэтому проблем с ней возникнуть не должно. Слева расположено меню папок и превью ваших изображений, которые можно конвертировать /* об этом дальше */. Справа – панель инструментов /* типичная для графических редакторов */, панель выбора цвета и предпросмотр вашей иконки в натуральную величину. И в центре окна программы – редактпрование иконки в нужном масштабе /* от 100 до 10000% */.

Создание иконки из изображения

Если у вас уже есть изображение из которого можно/нужно сделать иконку, создайте новую иконку и перетащите на область редактирования ваше изображение. Программа предложит обрезать картинку как необходимо, выбрать прозрачный цвет и размер будущей иконки /* для favicon нужно 16×16px */. Вот и всё. При желании иконку можно подредактировать, для этого есть все необходимые инструменты и различные эффекты.

Кстати, есть онлайн сервисы создания иконок, а так же библиотеки иконок в ICO и PNG. Можно взять иконку от туда и изменить размер до необходимого или заказать бесплатно иконку для блога /* сайта */

Создание иконки «с нуля»

Всё просто. Создаем новое изображение 16×16px и рисуем нужную нам иконку. Здесь всё зависить только от вашей фантазии и ваших способностей.

Интеграция favicon.ico в сайт

Встраивается favicon между тегами <head> и </head> и имеет представление
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />,
где атрибут rel указывает на то, что это иконка избранного, атрибут type указывает MIME-тип, а href указывает абсолютный или относительный путь к файлу иконки.

Вот и всё! Не забывайте подписаться на RSS.

И ещё, если вам необходима иконка чьего-то сайта и он /* сайт */ проиндексирован Яндексом, то иконку в PNG можно найти по адресу http://favicon.yandex.net/favicon/имя_сайта
/* например, http://favicon.yandex.net/favicon/punkwj.com */.

Комментарии(4) к записи «Создание иконки для сайта – favicon»

Ура! Юра, спасибки. Это типа для меня ;-) . завтра же начну поглощать инфо (или уже правильнее сказать в 4 утра, что сегодня)

Да не за что! Как просила)))

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

[...] Создание иконки для сайта – favicon [...]

 
 
     

Реклама

Rotaban.ru - биржа банерной рекламы
Хостинг, хостинг php, MySql, cron, хостинг сайтов