Как создать favicon

среда, 23 декабря 2009 г.

Григ/Песня Сольвейг:

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

1. IcoFX          - icofx.ro/files/icofxsetup.exe (программа нашего разработчика)
2. Icon Magic   - sunhome.ru/Programm/WebDisign/icomagic.exe (очень простая - похожа на Paint)
3. Icon Craft     - iconempire.com/downloads/iconcraft.exe (мощная программа со всем набором)
4. Icon Empire  - iconempire.com/downloads/iconempire.zip (создает также анимированные и прозрачные иконки)

Также есть сайты на которых можно воспользоваться функцией "генератор favicon" чтобы создать иконку без мороки с софтом. Я предпочёл первый вариант.

Как сделать favicon для сайта
Я воспользовался редактором favicon - Icon Craft, так как он имеет много функций, но к сожалению платный (40$). Можно сделать только 10 сохранений после чего программа не работает. Можно воспользоваться и бесплатной Icon Magic.



Размер favicon
Сам размер favicon ico бывает разный, но в браузере и в закладках будет показываться иконка только с такими характеристиками: 16х16 пикселей, 256 цветов или TrueColor.
Справедливым будет вопрос: зачем тогда существуют разные размеры favicon? Например -  32х32 и 48х48, цвета до True Color + Alpha.
Иконки большего разрешения и цветового качества нужны для того чтобы их можно было размещать на рабочем столе где требуется лучшее цветовое разрешение и размеры. А также, если вы хотите изобразить что-то очень сложное, например человеческое лицо. Для этого выберите размер 48х48.

Анимированный favicon 
Бывают еще анимированные favicon, но формат favicon ico не поддерживает анимацию. Сама анимация создается в анимированном .gif. Но тут нужно сказать, что виден будет такой анимированный favicon только в браузерах Mozilla последней версии. Вставлять такой анимированный favicon нужно так:

<link href="/анимированный_GIF.gif" rel="icon" type="image/gif"></link>

<link href="/анимированный_GIF.gif" rel="shortcut icon" type="image/gif"></link>

Этот скрипт не сработает для Blogger, так как у блогов нет доступа к управлению файлов. Установка favicon для Blogger рассматривалась в этой статье и дальше по тексту я еще раз повторюсь как это сделать.


Создание favicon
Давайте разберём всё по порядку, сначала узнаем как сделать favicon. Для этого скачаем программу для создания favicon - Icon Craft (iconempire.com/downloads/iconcraft.exe). Установим ее на компьютер и откроем. Программа предложит нам либо зарегистрироваться и купить её, либо пользоваться сроком равным 10 сохранений иконок. Жмем ok. Вот что мы увидим когда её запустим:

Нажмем на самую верхнюю строчку Creat a new icon, откроется следующее окно:

Тут предлагается задать формат favicon для нашего сайта или блога. Оставим все как есть. Обратите внимание, что по умолчанию размер favicon стоит 32х32. Я создал себе favicon именного такого размера и как видите она вполне красиво смотрится в этом блоге.
Нажмем кнопку ок и перейдем дальше.

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

Если в вашем favicon будут присутствовать буквы - удобно воспользоваться иконкой T. Здесь вы печатаете нужные вам буквы и размещаете в желаемом месте на поле редактирования favicon. Если буква мала - ее можно растянуть. Если велика - по аналогии её можно уменьшить. Полёту фантазии нет предела, но я возьму на себя смелость посоветовать вам делать простой дизайн. Почему? Как то мне попалась книга американского гуру рекламы, в которой он рассказывал о эволюции брендов. Все крупные компании начинали с того что их логотипы были изысканными, пестрили цветами и многообразием нестандартных красивых шрифтов. В конце концов через десятки лет они пришли к тому, что логотип должен быть самым простым и только отражать название компании. Простые, читаемые буквы и запоминающиеся цвета без изысков. Также когда будет создавать favicon ico подумайте как она будет выглядеть среди остальных favicon в закладках браузера. Чем она будет от них отличаться. Как будет выделяться на фоне остальных?

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

Теперь нам надо его добавить на свой сайт.

Как добавить favicon
В прошлой статье я уже говорил как добавить favicon в blogger. Для этого нужно в закладке Дизайн в разделе Изменить HTML сразу перед тегом </head> вставить следующий код:

<link href='путь к вашей favicon' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<link href='путь к вашей favicon' rel='icon'/>

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

Куда заливать favicon
Чтобы быстро залить favicon зайдем по вот этой ссылке "pmsc.free.fr". Мы увидим французский сайт, который любезно предоставляет возможность заливать на него favicon. У мощных гигантов, таких как photobucket.com по непонятной причине файлы favicon формата ico заливать нельзя. Да и Бог с ними. Перейдем на сайт французов. Спустимся по странице чуть ниже и нажмём на кнопку как на рисунке (что значит залить favicon).

После этого нажмем на две кнопки, первая (добавить путь к  favicon), вторая залить favicon.

Заливаем.

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

<link href='путь к вашей favicon' rel='shortcut icon' type='image/vnd.microsoft.icon'/> <link href='путь к вашей favicon' rel='icon'/>

Как подробно это сделать, для тех у кого возникнут трудности посмотрите в старой статье как сменить favicon.

Разместите скрипт, сохраните и наслаждайтесь. Если у вас что-либо не получиться - напишите комментарий к статье я вам постараюсь помочь.

Похожие статьи