создание сайтов в Raduga-Net.ru Дизайн-студия «Raduga-Net»
  Создаём вас в Интернете
Главная > Как создать фавикон (иконку сайта)?

 

Простой и надежный способ создать фавикон для блога WordPress?

21 августа 2012 года

Статью о том, как создать иконку для сайта (фавикон) в 2 клика, я увидела у Сеодед.ру уже после опубликования своего поста. Его способ, конечно, гораздо проще и быстрей. Рекомендую!

Как создать фавикон (иконку сайта)?

Здравствуйте, друзья! С Вами снова Надежда Ковальская с новой статьей на блоге. Сегодня мы разберем очень интересный и в то же время важный для Вашего блога вопрос – как создать фавикон для сайта. Этот вопрос относится к дизайну блога, т.е. к его внешнему виду. И Вы можете сказать, да какая разница, установлен у меня фавикон или нет. Но если Вы так говорите, то скорей всего на 100% не понимаете, в чем суть фавикона и почему он так важен для блога.

Создать фавикон

Я не хочу сказать, что без фавикона Ваш блог загнется, но, несмотря на всю свою миниатюрность, фавикон играет для блога свою скромную, но незаменимую роль.

Итак, что же такое фавикон? Возможно, некоторые читатели пока еще не знают ответ на этот вопрос.

Фавикон – это маленькая иконка для Вашего сайта или блога, которая отображается рядом с названием Вашего сайта в загруженной вкладке, а также рядом с ссылкой на Ваш сайт, когда он появляется в поисковой выдаче. Чтобы было понятнее, посмотрите на картинку ниже:

Как создать favicon?

А так выглядят фавиконы в поисковой выдаче:

Фавиконки в поиске

Для чего нужен фавикон?

Фавикон – это можно сказать маленькое лицо Вашего сайта. Фавикончик – очень маленький, но если сделать его удачно, то он еще ДО захода на Ваш сайт будет либо привлекать потенциального посетителя, либо отталкивать. Ну а если у Вашего сайта вообще нет фавикона, то в ряду с другими сайтами в поисковой выдаче, он будет теряться. С фавиконом же сайт сразу выделяется и привлекает внимание, делает его отличным от других.

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

Итак, давайте тогда в таком случае приступим к созданию фавикона.

Картинка

1-й шаг – это создание картинки 16×16 пикселей. Создать ее у Вас не составит труда. Я например просто взяла заглавную букву Л из названия моего сайта и вырезала ее из скриншота, а потом уменьшила до нужного размера. Это можно сделать в любом редакторе картинок, думаю, разберетесь. Есть еще вариант выбрать уже созданную картинку на просторах Интернета. Введите в поиск «скачать фавикон» и посмотрите, что Вам там предложат. Кроме того, выбрать фавиконку можно и на самом сайте создания фавиконов, с которым я Вас познакомлю в следующем шаге.

Онлайн-сервис

2-й шаг – приступаем к нему только тогда, когда у нас уже имеется картинка. Заходим на сервис по адресу favicon.cc – это и есть непосредственно тот сервис, где мы будем создавать наш фавикон. Вы наверное спросите, что делает этот сервис. Почему нельзя просто установить нашу созданную картинку на нужное место. Дело в том, что картинка в привычных нам форматах, типа jpg, png и другие, не подойдет. Фавикон – это не просто картинка, а файл с особым расширением .ico Именно такой файл встанет на то место, где ему и должно быть.

Вот как раз для создания такого расширения нам и нужен сервис. Когда Вы зайдете на favicon.cc, то увидите вот такую картину:

Сервис для создания иконок для сайтов

Далее кликаем по вкладке “Import Image”

Начинаем создание иконки для сайта

Потом загружаем нашу картинку на сервис так, как показано на скриншоте. Нажмете на выбрать файл (на моей картинке это Datei auswählen), потом в открывшемся окне найдете папку на своем компьютере, где у Вас сохранена картинка, выбираете ее, щелкаете открыть, а потом кликаете по кнопке Закачать (upload).

Загружаем картинку-исходник

После этих действий Вы увидите на экране свою фавиконку в увеличенному изображении. Выглядеть это будет не очень привлекательно, но не обращайте внимания. Далее спускаетесь немного ниже в раздел “Preview” и нажимаете на “Download Favicon”.

Скачиваем готовую иконку

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

Идете на хостинг (можно также сделать это по FTP) и закачиваете файл фавикона с расширением .ico в корневую папку Вашего блога. На WordPress эта папка называется public_html. Вот собственно и все. Потом идете на блог, обновляете страничку, лучше нажав кнопку F5 и любуетесь :)

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

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

Еще больше уроков по созданию и настройке блогов на WordPress получите в моем бесплатном видеокурсе “WordPress-блог: от создания до заработка

Новое на блоге:

 


Комментарии

АЛЁНА СЕМЁНОВА пишет:
21 Август 2012 в 16:14
Наденька, класс, как только ноут обрету, сразу же установлю себе фавикончик. Попробую, конечно, на стареньком, а вдруг получится установть. Ведь закачала же на фейс видео, а тут всего лишь маленькая иконка :)

НАДЕЖДА КОВАЛЬСКАЯ пишет:
21 Август 2012 в 19:50
Конечно получится! Там особо быстрого интернета и компа не нужно :)

РУСЛАН АХТАМЬЯНОВ пишет:
21 Август 2012 в 16:35
Да, хороший сервис! Я сам себе там делал! Надь, извини если я бываю набегами)))) Ну ты в курсе!)))))

НАДЕЖДА КОВАЛЬСКАЯ пишет:
21 Август 2012 в 19:50
Руслан, да ничего страшного, конечно я в курсе)))) Как там? все нормально?)

РУСЛАН АХТАМЬЯНОВ пишет:
21 Август 2012 в 19:52
Блин, вроде все отлично!!! Тьфу-тьфу-тьфу!!!))))Счастье есть!!!

НАДЕЖДА КОВАЛЬСКАЯ пишет:
21 Август 2012 в 19:56
Ну вот, говорила же – не надо фукать)))

РУСЛАН АХТАМЬЯНОВ пишет:
21 Август 2012 в 19:57
Почему? У тебя интуиция?)))

НАДЕЖДА КОВАЛЬСКАЯ пишет:
21 Август 2012 в 20:03
Просто не нужно никогда фукать на то, чего очень хочешь на самом деле)))

РУСЛАН АХТАМЬЯНОВ пишет:
21 Август 2012 в 20:13
Понял.

ВАСИЛИЙ пишет:
21 Август 2012 в 18:36
Интересный сервис, а я нашел готовый фавикон.

НАДЕЖДА КОВАЛЬСКАЯ пишет:
21 Август 2012 в 19:50
Василий, еще нужно статью про граватар написать, а то у Вас что-то до сих пор нет граватарчика :)

ЕВГЕНИЙ пишет:
21 Август 2012 в 19:53
Фавикон хоть и маленький, но несет в себе огромную пользу, так что не стоит о нем забывать о нем. И конечно он размещается очень просто, так что не советую использовать для него плагины.

НАДЕЖДА КОВАЛЬСКАЯ пишет:
21 Август 2012 в 19:56
Согласна на 100%, о чем собственно и написала в статье :)

ТАТЬЯНА пишет:
21 Август 2012 в 20:11
Хорошая вещичка фавикон. Жаль, что у меня уже есть, а то бы по твоему уроку установила)))) Надь, что-то у меня картинки в посте не показываются, уже перезагружала, но все равно большие не отображаются…

НАДЕЖДА КОВАЛЬСКАЯ пишет:
21 Август 2012 в 20:18
Не знаю… У меня все отображается. А как у остальных?

АНАСТАСИЯ пишет:
22 Август 2012 в 5:33
Ну вот, а я из тех чайников, которые даже не знали, что это такое. Посмотрела на сайты в поиске, действительно сайты с картинкой как-то больше внимания привлекают, сделаю себе сегодня же, спасибо, что просветили=)

НАДЕЖДА КОВАЛЬСКАЯ пишет:
22 Август 2012 в 5:36
Ну вот и отлично! Рада, что моя статья оказалась не только полезной, но и просветительской :)

АНАСТАСИЯ пишет:
22 Август 2012 в 7:09
Сейчас посмотрела на выдачу в яндексе, до этого смотрела только в гугле, там вообще нет этих картинок, поэтому подумала, что у меня нет фавикона, оказалось есть, просто я не знала, что это так называется(делала с помощью плагина Easy Icon по статье с sovetywebmastera), но если это можно сделать так просто и без плагина, то лучше переделаю и удалю плагин, чего блог нагружать зря =)

НАДЕЖДА КОВАЛЬСКАЯ пишет:
22 Август 2012 в 11:55
Да, почему-то в выдаче не всегда отображается, я тоже заметила. Лучше для верности смотреть в открытой вкладке, есть или нет фавикон.
Конечно, лучше переделай, Женя сам уже не рекомендует лишний плагин устанавливать, наверное, старая статья.

ОКСАНА пишет:
7 Сентябрь 2012 в 15:33
Наденька, очень полезный сайт у вас. Много интересного написано понятным языком. Кстати книгу я вашу прочитала и узнала много полезного. А фавикон себе я сейчас обязательно поменяю.

НАДЕЖДА КОВАЛЬСКАЯ пишет:
9 Сентябрь 2012 в 12:17
Оксана, спасибо за отзыв!

АЛЕКСЕЙ МАРТЮШОВ пишет:
19 Сентябрь 2012 в 7:34
Прямо сейчас и приступлю, уж очень достойно описана последовательность… *THUMBS UP*
Только нужен совет, что можно изобразить. *HELP*

НАДЕЖДА КОВАЛЬСКАЯ пишет:
19 Сентябрь 2012 в 7:45
Алексей, тебе виднее, что изобразить, – что-то связанное с тематикой блога, мож шоколадку?) За отзыв о последовательности большое спасибо!

АЛЕКСЕЙ МАРТЮШОВ пишет:
19 Сентябрь 2012 в 7:49
Так мой ШОКо-ЛАД с горечью… *SORRY*
Наверное, поступлю как ты *YAHOO*

НАДЕЖДА КОВАЛЬСКАЯ пишет:
19 Сентябрь 2012 в 8:25
Ну тогда горькую шоколадку можно сделать :)

АЛЕКСЕЙ МАРТЮШОВ пишет:
19 Сентябрь 2012 в 8:36
Уже наваял чего-то, вроде гламурненько вышло *CRAZY*
Скоро попрошу оценить… =)

НАДЕЖДА КОВАЛЬСКАЯ пишет:
19 Сентябрь 2012 в 8:39
Оценим, ты только свистни)))

АЛЕКСЕЙ МАРТЮШОВ пишет:
20 Сентябрь 2012 в 16:57
Свистю… :P
Все супер!!!
Надюшка, СПАСИБО!!!
Предлагаю свою новую статью: СЕО-ралли на ШОКо-ЛАДе !!! Всем участникам — БЕСПЛАТНАЯ лицензия Антивируса Касперского

НАДЕЖДА КОВАЛЬСКАЯ пишет:
20 Сентябрь 2012 в 18:09
А чего свистел? Вроде шаблон тот же.

АЛЕКСЕЙ МАРТЮШОВ пишет:
20 Сентябрь 2012 в 19:48
Надюшка, так не до конца заточенный под себя ставить как-то неудобно, народ пальцами показывать будет… :-[
Так ты же вчера забегала, уже подсмотрела… :P
Фавикон смотрится весьма на нем изящно…

PESSIMIST пишет:
20 Сентябрь 2012 в 15:02
Сразу видно, что Вы – заграничная леди :)
Фавиконку послали делать на заграничном интерфейсе. А ведь есть и с русским интерфейсом он-лайн сервисы.
Ну да ладно, с русским они и сами разберутся, а тут у Вас все на универсальном языке рисунков показано.
Когда мне надоест людям про фавиконку рассказывать – я к Вам их буду отправлять =-O

НАДЕЖДА КОВАЛЬСКАЯ пишет:
20 Сентябрь 2012 в 18:08
Про этот сервис и на других русскоязычных блогах рассказывают :) А я не заграничная, я самая что ни на есть русская))) Не подскажете наши альтернативные сервисы? Просто ни разу не встречала.

PESSIMIST пишет:
20 Сентябрь 2012 в 18:18
Ну как такой очаровательной русской леди и не подсказать…
С величайшим удовольствием :)
Например: Фавикон.ру — создание и редактирование иконок сайтов
Картинка стандартно называется favicon.ico, а разместить ее нужно в корневом каталоге на хостинге. Обычно это каталог public_html.

АЛЕКСЕЙ МАРТЮШОВ пишет:
20 Сентябрь 2012 в 18:43
Внешне исполнение очень похоже…
Если-бы знал о нем раньше, воспользовался бы…
А пока с Надюшиной неплохо получился…
Предлагаю свою новую статью: Улучшаем поведенческие факторы созданием баннера на блоге

PESSIMIST пишет:
20 Сентябрь 2012 в 19:10
Мне понравилась Ваша новая статья, Алексей.

НАДЕЖДА КОВАЛЬСКАЯ пишет:
20 Сентябрь 2012 в 19:13
Сразу видно, что наш сервис. первое, что замечаешь, – это реклама, которая прям на глаза прыгает))) А вообще – спасибо за дополнение. Это в принципе я так понимаю полный аналог того сервиса, который я описала.

PESSIMIST пишет:
20 Сентябрь 2012 в 19:22
*IN LOVE*
Конечно аналог :-D Я даже думаю, что он появился на свет несколько позже заграмоничного.
Набрал в Яндексе – фавиконку онлайн и выпала куча сервисов. На тот сервис, на котором сам делал фавиконку я ссылку и дал.
Хотел форму обратной связи для блога прикрутить. Но то, что нашел у Александра Бобрина – мне не понравилось. Принимаю советы %)

НАДЕЖДА КОВАЛЬСКАЯ пишет:
20 Сентябрь 2012 в 19:36
Вот есть статья у моего друга Володи Жданова *** – там про замену плагинов на код и есть раздел, как поставить форму обратной связи без плагина. Может понравится. Я до формы еще не дошла, стоит contact form 7 плагин, но когда будет время, обязательно заменю!

PESSIMIST пишет:
20 Сентябрь 2012 в 19:42
Большое спасибо ! Даже как-то неловко стало, я все-таки не леди =-O
Жалко, что в сутках всего 24 часа, а через пять часов уже на РАБоту вставать…
На выходные – большие планы получились, если только РАБота все планы не спутает.
Когда разберусь с формой – доложусь об успехах.
А теперь пора спать… *YAHOO*

АЛЕКСЕЙ МАРТЮШОВ пишет:
20 Сентябрь 2012 в 19:52
Вот где шляйка… :-D :-D :-D
Пользуется разницей во времени…
Минут через 20 заходи в гости ко мне, критику по новому шаблону выскажешь…

PESSIMIST пишет:
22 Сентябрь 2012 в 7:26
:idea: Передайте Вашему другу – что очень полезная тема у него получилась! Это было то, что как раз я искал. Я прикрутил себе форму обратной связи.
Моя благодарность не имеет границ (в пределах разумного) *ROSE*

НАДЕЖДА КОВАЛЬСКАЯ пишет:
22 Сентябрь 2012 в 7:30
Передам, спасибо за отзыв! :)

НЕРАДИВЫЙ БУХГАЛТЕР пишет:
31 Октябрь 2012 в 19:28
Вот и фавикона у меня нет, что я за не правильный блоггер?! Идея есть, но как обычно нет времени, может эта статья будет пинком (как с яндекс метрикой).

АЛЕКСЕЙ МАРТЮШОВ пишет:
31 Октябрь 2012 в 20:08
Золотая “Б” с короной? ;)
Предлагаю свою новую статью: Пиар-комменты!!! Расскажите о себе и своих сайтах!!!

АЛЁНА СЕМЁНОВА пишет:
31 Октябрь 2012 в 20:14
Волчонок – рокер 8)

НАДЕЖДА КОВАЛЬСКАЯ пишет:
31 Октябрь 2012 в 22:08
Посылаю тебе мысленно волшебный пендель, лови и беги фавиконку устанавливать :) )))

WEBCRASSULA пишет:
7 Март 2013 в 5:52
Статья хорошая, но зачем так сложно? Берём любую картинку, например “картинка.jpg”. Изменяем размер ( кроме 16х16 прекрасно себя чувствует и 25х25 ) Потом просто меняем название файла на favicon.ico и всё. Загружаем в корень. Радуемся. :) Иногда, иногда, правда и в папку с темой приходится подгружать, если там своя иконка прописана. Во всяком случае мне так быстрее. :)

 

Сайт создан в 2004 г. © Raduga-Net.ru | Создание сайта — Seoded.ru