Как сделать favicon — мини логотип для сайта или блога?

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

Давайте для начала разберем, что такое favicon? Favicon – полное звучание с английского FAVorites ICON, что в переводе означает (очень маленькое изображение), предназначенное для «Избранного».

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

Эта маленькая иконочка стала очень популярная среди сайтов и блогов, и разлетелась по интернету с молниеносной скоростью,  при помощи фавиконок узнают многие сайты, не заходя на них. Это, как некое лицо сайта, мини логотип, и чем она будет уникальной и ярче, тем лучше!  Вот еще примеры:

А так она выглядит сейчас на моем сайте, она мне не нравится, сразу говорю, поэтому пишу данный пост и заодно переделываю еe себе 🙂

Favicon (фавиконки) бывают разных размеров, от самых малых 16×16 до самых крупных 64×64, с промежутками 24×24, 32×32 и 48×48, но стандарт считается — 16×16. Более крупные фавиконки используют для создания ярлыков на рабочем столе или в отдельной папке, для хранения веб–страниц.

Если у вас еще нет своего мини логотипа, то немедленно займитесь им!

Как сделать favicon – онлайн сервисы

Как сделать favicon используют различные сервисы? На самом деле, это самый удобный вариант, сроки изготовления 2-3-5 минут. Размеры должны быть строго в рамках 16×16 пикселей, а расширение .ico, gif, png, jpg  и т.д., полностью будет выглядеть так: фавикон.ico

И первый сервис онлайн генерации который мы рассмотрим, так это онлайн-сервис Логастер позволяет создать свой собственный фавикон с помощью мастера создания фавиконов. Этот онлайн-генератор сильно отличается от многих других тем, что вам не нужно искать картинки, загружать свое изображение на сайт или что-либо рисовать. Однако, вам нужно создать свой логотип с помощью Логастер. Для этого достаточно ввести название своей компании или сайта, подобрать иконку, цвета и шрифт логотипа. Затем, на основании логотипа создается фавикон, для этого достаточно выбрать опцию “Создать фавикон с этим логотипом” в личном кабинете:

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

Все довольно просто и интуитивно понятно, просто попробуйте и сами в этом убедитесь.

Следующий сервис это favicon.ru – сразу скажу, что это не лучший сервис на данный момент, но все же им можно пользоваться. Есть два варианта использования:
1) Сделать favicon путем загрузки изображения

2) Нарисовать самому.

Находим подходящую картинку для сайта, я для примера возьму эту:

И загружаю ее через кнопку «Обзор», спустя несколько секунд она появляется в графическом редакторе, где можно ее подправить, чуть ниже есть пред просмотр, привели в нужный вид и жмете «скачать». Сохраняйте к себе на компьютер, чуть ниже я расскажу, что с ней делать дальше.

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

После того, как favicon’ka лежит у вас на компьютере, ее нужно загрузить в корневой каталог блога. Корневой каталог – это адрес http://life-crazy.ru/favicon.ico, именно здесь поисковые машины ищут фавиконку.

Так как у меня блог на движке wordpress, пример я буду показывать на нем, хотя смысл практически везде один. Существует множество различных тем, где фавикон лежит по другому адресу, к примеру: адрес_сайта.ру\themes\название_шаблона\images\фавикон.ico. В таком случае вам просто нужно заменить иконку по этому адресу, или прописать другие пути.

Итак, подключаемся по ftp (см. статью «Правильная настройка filezilla») и закидываем туда созданную иконку. Далее нужно покопаться в файле шаблона header.php, и поискать нечто подобное с:

<link rel="icon" type="image/x-icon" href=" /favicon.ico">

Если подобной строки нет, то смело вставляйте эти две строчки между тегом «head» и «/head»:

<link rel="icon" href="life-crazy.ru/favicon.ico" type="image/x-icon"> 
<link rel="shortcut icon" href="life-crazy.ru/favicon.ico" type="image/x-icon">

Вот так это выглядит у меня, не забудьте поменять адрес сайта:

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

Можно скачать favicon уже готовый!

Вот парочка сервисов, там этих иконок завались, думаю, вы для себя что-нибудь подберете. 🙂

1. http://www.audit4web.ru/favicon/ – больше чем 15000 иконок.
2. http://www.iconj.com/ – больше 18000 иконок, встречаются даже gifki -  анимированные иконки. Присутствует генератор, довольно таки не плохой.

Чтобы бы сохранить понравившуюся картинку, нажмите на ней ПКМ и выберете пункт «Сохранить изображение». Сохраняйте к себе на локальный компьютер. Схема установки, такая же, как и в первом варианте!

Что, не нашли? Идем дальше.

Онлайн генератор — http://www.favicon.cc — принцип такой же, как и в первом варианте, можно нарисовать, а можно загрузить картинку, воспользовавшись пунктом «Import Image» и сохранить себе на ПК, действия для загрузки такие же, как и первом варианте.

Вот еще один сервис, на котором остановился я — chami.com/HTML-Kit/services/favicon , здесь также можно загрузить картинку, но я поступил иначе, я воспользовался вторым пунктом, это пункт, который позволяет сделать фавикон из аккаунта twitter’a.

В комплекте поставляется иконка в формате .ico и gif. Если хотите сделать, чтобы мини логотип у вас двигался, то есть был анимированный, то закиньте в корневую директорию 2 файла, предварительно скачав архив:

favicon.ico и animated_favicon1.gif, единичку можно стереть — animated_favicon.gif.

Соответственно в настройках тоже нужно указать, что иконка у вас анимированная. Также между тегом «head» и «/head» вставляйте кусочек этого кода:

<link rel="shortcut icon" href="//life-crazy.ru/favicon.ico" >
 </link><link rel="icon" type="image/gif" href="//life-crazy.ru/animated_favicon.gif" >
 </link>

В нем замените только адрес сайта. Анимация мне не понравилась, поэтому с этого сервиса я взял просто фавикон.ico и прописал код, как в самом первом варианте.

В сети множество различных генераторов, вот еще несколько:

Хороший сервис на русском — www.favicon.by, в использовании очень прост.

* http://www.cy-pr.com/tools/favicon/
* http://genfavicon.com/
* http://www.tools.dynamicdrive.com/favicon/
* http://favicon-generator.org/
* http://www.faviconfactory.com/
* http://shaheeilyas.com/favicon/

Из всего перечисленного, я думаю, вы себе что-нибудь выберете ;). Есть еще и программы, но думаю сильно вдаваться не нужно, этих способов будет вполне достаточно!
Вот и все! Теперь вы знаете, как сделать favicon для своего сайта или блога.

Отпишите в комментариях, каким сервисом пользуетесь вы? И есть ли фавиконка вообще у вас на блоге или сайте?

Рекомендую подписаться на обновления блога и следить за новостями, вскоре очень много полезного и интересного!!!

My Dream

С уважением, Михед Александр.