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

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

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

Иконки favicon появляется рядом со ссылкой в результатах поиска, например, в Яндексе:

Иконка моего блога в Яндексе

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

Иконка блога возле адреса сайта в Мозиле

Теперь научимся делать такие иконки для своего сайта или блога. Для этого нам понадобятся программы Adobe Photoshop CS3 и AWicons Pro. Если у вас нет этих программ и вы не знаете, где их можно бесплатно скачать, советую прочитать мою статью Чем бесплатно скачать любую программу.

Делаем иконку для сайта favicon.ico с помощью программ Photoshop CS3 и AWicons Pro

1. Создаем в Photoshop или любом другом графическом редакторе иконку размером 16х16, сохраняем ее в формате GIF или PNG.

2. Открываем сохраненную иконку любой программкой для создания иконок и курсоров, например, AWicons Pro (она платная). Подобных бесплатных программ достаточно много, погуглите, скачайте и установите. Откройте программу и перетащите в нее заготовку своей иконки favicon. Если вы сохраняли иконку на белом фоне, в программе AWicons Pro она выглядеть будет примерно так:

Создание иконки в AWicons

3. Если вид иконки устраивает, нажимаем F2 или Файл->Сохранить объект… и сохраняем иконку под именем favicon.ico:

Сохранить favicon.ico

Если фон favicon будет прозрачным, можно или сохранить в Фотошопе заготовку сразу с прозрачным фоном или удалить лишние пиксели в программе для создания иконок. Чтобы сделать прозрачный фон у favicon нужно изначально создать новый файл в Фотошопе с прозрачным фоном (Ctrl+N):

Прозрачный фон в Фотошопе

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

Саму иконку можно рисовать сразу в специальной программе, но лично мне удобнее в Фотошопе, да и возможностей по обработке картинки у Фотошопа несравнимо больше. Жаль только, что даже версия Photoshop CS3 не умеет сохранять иконки в формате ICO и приходится использовать специальные программы-конверторы. Но есть и второй способ, как при создании свой favicon.ico обойтись только Фотошопом.

После создания иконки favicon.ico ее нужно загрузить на свой сервер (Как загружать файлы по FTP) в корневую папку, где находится сайт и, желательно, во все подпапки.

После этого в HTML-шаблон своего сайта нужно добавить код вызова иконки. Это одна строчка между тегами HEAD:

1
2
3
<head>
      <link rel="shortcut icon" href="favicon.ico"></link>
</head>

Все. Если иконка имеет имя и формат favicon.ico, она загружена в корень сайта и в области HEAD HTML-шаблона вашего веб-сайта есть строчка загрузки – фавикон будет отображаться рядом с адресом вашего сайта или блога.

14 комментариев к «Как сделать иконку favicon.ico для своего сайта»

  1. Я обычно favicon.ru использую для этих целей, если на скорую руку нужно иконку для сайта сделать:)

  2. А я не знала… У меня фотошоп версии 6.0. 🙁
    У меня в блоге не очень красивый фавикон. Я сначала сделала фон в фотошопе, нажала Мозаика. Получиличсь красные кубики на желто-зеленом печворке…А сверху аэрографом намалевала сердечко… Получилось будто из сердечка кусочки вылетают…Ж:-о ну, пока так поживу 🙂 Вообще, хотела просто сердечко на белом фоне, но уж больно тогда мой блог будет смахивать на порносайт…>-(

  3. Guanako, у вас красивый фавикон, достаточно оригинальный и подходит для вашего блога

  4. хм….это всё можно проделать с помошью пейнта стандартного и не париться со столькими прожками.И вручную переименовать в .ico
    🙂
    а вообще спс,очень помогли 😉

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

  6. я так никогда не делал.
    Я сохранял иконку в фотошопе в ico формате, хотя его там и нет, я при сохранении файла после названия ставил точку и ico. у меня сохранялось: название иформат ико.
    надо переименовать на favicon и загрузить в менеджер файлов.
    оно заменит стандарт, но не сразу, примерно в течении 24 часов

  7. Советую IconAxialisis (кажется правильно написал), специальная прожка для разработки иконок с различной глубиной цвета, размерами и др. параметрами и пр. Позволяет создавать и сохранять в одном файле массив иконок разного размера (16х16, 32×32  и пр), также позволяет автоматически генерировать в неплохом качестве иконки поменьше из большего размера, работать с транспарентностью и пр.
    Хотя для быстрого создания фавиконок обычно хватает какого нибудь онлайн сервиса или плагина для фотошопа.

  8. Если иконка в адрессной строке браузера не появляется, то нужно обновить кеш. Если у Вас браузер IE , обычно сайт нужно добавить в избранное, чтобы иконка появилась. А в других браузерах(Opera, Mozilla Firefox) всё в порядке.

  9. У меня при вставке данного кода, флавикон появился только на главной. Для появления на всех остальных страницах мне помог код <link rel=»shortcut icon» href=»http://www.vashsait.ru/favicon.ico»>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *