Как сделать favicon для сайта или блога? Делов на 5 минут | Авторский проект Михед Александра
Life-crazy.ru | блог о SEO
и заработке в Интернет


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

Здравствуй, странник. Сегодня решится вопрос, как сделать 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="http://life-crazy.ru/favicon.ico" type="image/x-icon"> 
<link rel="shortcut icon" href="http://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» и сохранить себе на ПК, действия для загрузки такие же, как и первом варианте.

Рисовалка иконок

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

аккаунт твиттера

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

скачать favicon

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

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

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

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

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

Хороший сервис на русском — http://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

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

Метки: ,


Комментарии
  1. Олег  |  19.04.2013 в 16:56  |  Цитировать

    спасибо за информацию.

    Ответить
    • Михед Александр  |  19.04.2013 в 16:57  |  Цитировать

      Рад помочь 😉

      Ответить
  2. Алексей Григорьев  |  20.04.2013 в 15:39  |  Цитировать

    Крутое видео. Прямо как белки-летяги. Что за музыка, не знаете?

    Ответить
    • Михед Александр  |  20.04.2013 в 15:55  |  Цитировать

      Класс, мне тоже очень нравится, хотел бы полётать:) К сожалению музыка не известна(

      Ответить
  3. El-Alces  |  25.04.2013 в 12:37  |  Цитировать

    Все хорошо, только как подцепить к 16×16 другие форматы для случая скачивания иконки на рабочий стол?

    Ответить
    • Михед Александр  |  25.04.2013 в 15:48  |  Цитировать

      У меня автоматом создается иконка форматом 32×32 когда перетягиваю на рабочий стол.

      Ответить
  4. Ирина  |  27.05.2013 в 09:16  |  Цитировать

    Спасибо, большое за статью, для меня информация нужная, как раз искала такую. А у Вас все понятно и развернуто. Нашла то, что искала. Теперь сделаю себе иконку. Благодарю. =)

    Ответить
    • Михед Александр  |  27.05.2013 в 09:23  |  Цитировать

      Спасибо Ирина, рад помочь 😉 Заскакивайте на огонек:)

      Ответить
  5. Танечка  |  03.06.2013 в 08:16  |  Цитировать

    не плохая програмка спасибо =)

    Ответить
    • Михед Александр  |  03.06.2013 в 10:46  |  Цитировать

      Это сервисы 🙂

      Ответить
  6. Танечка  |  04.06.2013 в 08:33  |  Цитировать

    программа на сайте.онлайн программа!!! 😛

    Ответить
  7. Сергей  |  13.10.2013 в 04:18  |  Цитировать

    Сегодня же сделаю.

    Спасибо =)

    Ответить
  8. Александр Викторович  |  20.10.2013 в 13:54  |  Цитировать

    Хорошая программа. Пошел делать фавикон. На сайте про часы у меня есть, но там проще, установка через панель управления. Нажал скачать с компьютера и все готово.

    Ответить
  9. Александр Викторович  |  01.11.2013 в 13:49  |  Цитировать

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

    Ответить
    • Михед Александр  |  01.11.2013 в 16:48  |  Цитировать

      Мои поздравления, быстро схватываете 😉

      Ответить
  10. Александр Викторович  |  01.11.2013 в 13:52  |  Цитировать

    Александр, такой вопрос: если в подписи к коменту укажу адрес своего второго блога, это допускается?

    Ответить
    • Михед Александр  |  01.11.2013 в 16:48  |  Цитировать

      Конечно допускается 🙂

      Ответить
  11. Николай  |  21.11.2013 в 07:42  |  Цитировать

    Я недавно для блога наконец то нарисовал фавикон пикселами, получилось довольно неплохо. Рекомендую всем — 10 минут и все готово, зато ни у кого подобного нет! 😛

    Ответить
    • Александр Викторович  |  21.11.2013 в 09:07  |  Цитировать

      Я поступил так же. Фавикон простенький, но оригинальный.

      Ответить
    • Михед Александр  |  22.11.2013 в 11:16  |  Цитировать

      Прикольно смотрится, мне нравится 🙂

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

up