Создать фавикон. | Бизнес у камина
Вы сейчас тут: Главная > Кабинет, Полезные хитрости > Как сделать фавикон.

Как сделать фавикон.

Привет! Если Вы впервые на моём блоге и он Вам понравился, то, подписавшись на RSS ленту Вы всегда будете в курсе самых свежих новостей.

Если Вы ещё не знакомы с RSS, узнать что это такое можно по этой ссылке

{lang: 'ru'}

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

Ещё её можно увидеть в закладках страницы, в поисковой системе в результатах поиска, на рабочем столе при сохранении ярлыка сайта.

Изначально, фавикон использовался только для удобства поиска того или иного адреса в закладках, но постепенно он поменял своё значение.

Теперь он всё чаще несёт в себе ещё и смысловую нагрузку - это "лицо" вашего блога, Ваш мини-логотип.

Любой уважающий себя сайт или блог просто обязан как можно раньше обзавестись личным фавиконом.

Конечно, можно взять уже готовые варианты, но я советую Вам сделать свой уникальный фавикон. Тем более, что это довольно просто.

Создаём фавикон.

Для создания фавикона есть специальные сервисы. Например, такие как 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. Любуемся на свой фавикон!

Автор: Ангелина Демидова.
Если статья Вам понравилась и оказалась для вас полезной, то поделитесь ей с другими:

Хочу себе плагин с такими кнопками

Рекомендую также следующие статьи

Метки: ,

Комментировать

Spam Protection by WP-SpamFree

:bye:  :good:  :negative:  :scratch:  :wacko:  :yahoo:  B-)  :heart:  :rose:  :)  :whistle:  :yes:  :cry:  :mail:  :(  :unsure:  ;)