Для создания фавикона есть специальные сервисы. Например, такие как http://www.favicon.cc/ или http://favicon.ru/. Можно поискать ещё и найти другие варианты.
Я свой выбор остановила на сервисе http://www.favicon.cc/
Чем он меня привлёк:
1. этот сервис даёт возможность редактировать картинку попиксельно;
2. можно загрузить изображение и сделать из него фавикон;
3. можно просто нарисовать нужный вам вариант фавикона, если Вы обладаете хоть какими-то художественными навыками;
4. можно использовать открытую галерею фавиконов — выбрать из неё картинку, подправить на свой вкус и цвет в редакторе, и получить свой вариант.
Создаём фавикон. Как я это делала.
1. Нашла подходящую картинку в Яндекс.
2. С помощью «Фотошоп» вырезала из неё нужный кусок.
3. Зашла в сервис http://www.favicon.cc/.
4. Загрузила в неё свою картинку (слева в меню Import Image — обзор — выбираете картинку с компьютера — Upload).
Внизу в открывающемся окне есть кнопки:
Keep dimensions — сохранить первоначальный размер изображения
Shrink to square icon — преобразовать в квадрат
Смотрите сами, как вам удобнее, но учитывайте следующие моменты:
- при преобразовании изображения в квадрат (особенно явно прямоугольных) изображение сожмётся и, соответственно, исказится;
- при сохранении размеров (опять же явно прямоугольных) вокруг изображения останутся пустые поля, которые надо будет или заполнять цветом или можно оставить как есть, если это Вас устраивает.
Вывод: лучше всего загружать картинку с размером близкой к квадрату.
Если Вы хотите сами нарисовать нужную картинку, тогда просто нажимаете на кнопку Create New Favicon и затем рисуете.
5. Отредактировала изображение — делается это с помощью поля Color Picker.
Вспомогательные кнопки:
transparent — убрать цвет (сделать прозрачным)
pick existing color — выбор цвета
move — двигать изображение
Также под полем редактора есть строка Use Animation. Кликнув на неё Вы можете увидеть дополнительные возможности:
Clear Frame — очистить поле
Copy Previous Frame — скопировать предыдущее изображение фавикона
Append New Frame — добавить новое изображение фавикона
Delete Frame — удалить редактируемый фавикон
Лично я сильно не мудрила и отредактировала свою картинку с помощью одного инструмента pick existing color.
6. Прямо под редактором есть поле Preview, в котором Вы можете наблюдать процесс изменения внешнего вида вашего фавикона в режиме реального времени и в окончательных размерах (т.е. его окончательный вид в адресной строке).
7. Если Вам всё нравится нажимаем Download Favicon, после чего Ваш фавикон сохраняется на компьютер (файл favicon.ico).
8. Загружаем файл с фавиконом на свой хостинг в папку public_html
9. Если у Вас стоит WordPress, то в редакторе блога в файл header.php (Внешний вид -> Редактор) между тегами <head> и </head> (например перед последним) добавляем следующий код <link rel=»shortcut icon» href=»favicon.ico» type=»image/x-icon»>
10. Любуемся на свой фавикон!