Как создать favicon

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

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

создание favicon ico
В этой статье расскажу как сделать 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. Вот что мы увидим когда её запустим:

сделать favicon

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

Тут предлагается задать формат favicon для нашего сайта или блога. Оставим все как есть. Обратите внимание, что по умолчанию размер favicon стоит 32х32. Я создал себе favicon именного такого размера и как видите она вполне красиво смотрится в этом блоге.
Нажмем кнопку ок и перейдем дальше.
сделать favicon ico
Тут мы видим рабочее поле 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.

куда заливать favicon
Заливаем.
куда заливать favicon

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

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

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

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

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

2 комментариев:

rivetru комментирует...

спасиб

Sorus комментирует...

А можно "загнать" готовую анимацию? К примеру у меня есть картинка гиф 100*100...

Отправить комментарий

Оставляйте ваши комментарии

 
 
 

Читать блог на другом языке

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified
 
Copyright ©Lagunof.com
Блога автора книги "Недвижимость: классическая, виртуальная, интеллектуальная" При перепечатке материалов с блога обратная ссылка обязательна
e4a11e6f00df223bf058f2795454739b