Привет! Если Вам интересны темы и статьи в блоге "Работа для Мамы" и Вы не хотите пропустить новые, то подпишитесь на обновления блога, следуйте за мной в Твиттере и Фейсбук.


Must Know: как создать фавикон

favicon


Ну вот и у меня появился ОН — ФАВИКОН!
Вы еще не знаете, что это такое? Тогда вам обязательно нужно прочитать эту статью!
Еще пару недель назад и я на знала, что это.
Все началось с того, что меня привлекла одна маленькая картикна, которая находится в адресной строке перед URL. Я решила, что такая картинка необходима и моему блогу.

Как вы поняли, фавикон — это и *Wor*k4*Mama.ru есть та маленькая картинка. Вы ее можете увидеть:

    1. В строке адреса в браузере
    2. Во вкладке браузера
    3. В избранном при создании закладки
    4. В поисковой системе напротив названия вашего сайта
    5. На рабочем столе при сохранении ярлыка для вашего сайта


Фавикон для "Работа для Мамы"

Теперь, я думаю, вы поняли, что маленькая картинка играет далеко не последнюю *Wor*k4Mam*a.ru роль в дизайне вашего сайта.

Такое интересное название «фавикон» пришло, как вы догадались, из английского. Это сокращение от FAVorites ICON.
Стандартный размер фавикона — это изображение 16*16 пикселей в формате ico.
Изначально, фавикон сайта использовался браузером только при создании закладки в избранном. А теперь — это неотъемлемая часть, можно сказать логотип, вашего сайта.
Очень важно, чтобы ваш логотип был ярким, запоминающимся и понятным.

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

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

Теперь посмотрим на созданию фавикона. Для этого существует множество сервисов, которые позволяют создать изображение и сохранить *Work*4Mama.*ru его на компьютер. Обычно такой файл называется favicon.ico.

Приведу вам два сервиса, которые использовала я.

    http://www.favicon.cc/ — позволяет попиксельно сделать фавикон. Можно загрузить изображение и сделать из него фавикон. Кроме этого можно использовать открытую галерею фавиконов. Выбрав из нее картинку, вы можете подправить ее в редакторе по своему желанию. А затем сохранить фавикон у себя на компьютере.
    http://favicon.ru/ — русский сервис, который позволяет загрузить изображение с компьютера или интернета *Wo*rk4Ma*ma.ru и преобразовать его в картинку размера 16*16 пикселей. При этом вы можете создать дополнительные изображения для сохранения на рабочем столе (они сохраняются внутри файла favicon.ico, но имеют больший размер) .

Итак, 16-пиксельный образ сайта мы создали, теперь время прикрутить его к нашему сайту.
Для этого файл favicon.ico вам нужно скопировать в корневую папку вашего сайта.

Теперь остается написать путь к вашей картинке. Для этого в области между тегами <head&gt *Wo*rk4Mama.ru* и </head&gt запишем следующий код:


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

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

Если у вас стоит WordPress, то добавляем этот тег в файл header.php (Внешний вид -> Редактор).

На этом все :-) У вашего сайта теперь есть свой favicon. Поздравляю!

И еще несколько советов.

    Когда вы *Wor*k4*Mama.ru создаете картинку, создайте несколько вариантов, посмотрите в галерее фавиконов, обратите внимание на фавиконы в вашем Избранном. Пусть у вас будет выбор. Не застревайте на одном, ищите наиболее подходящий вам.
    Возможно использование анимированных фавиконов. Однако они воспринимаются не всеми браузерами.
    Помните, что «вес» изображения играет важную роль при загрузке вашего сайта. Не создавайте «тяжелых» фавиконов.
    Если вы сохранили новый фавикон, но в браузере отображается старый вариант, то вам *Work4Mam*a.r*u просто нужно перезагрузить браузер. Когда вы вновь войдете, в кеш попадет уже новое изображение, которое вы и увидите на мониторе.
    Ну а если вы серьезно к этому относитесь, то можете заказать создание фавикона профессионалам.



TwitterVkontakteLiveJournalBlogger PostGoogle GmailFriendFeedFavoritenEmailGoogle ReaderShare

Об авторе блога "Работа для Мамы: создаем блог - строим успешный интернет-бизнес"

WebMama (Наталья Ужакина

Наталья Ужакина

Мама и Блоггер, организатор проектов "Клуб Успешные WebMamы" и "MamHost", автор Бесплатного ВидеоКурса "Блог для Мамы - первый шаг к Интернет-Бизнесу".

Вы можете оставить комментарий, или поставить трэкбек со своего сайта.

Есть 19 коммент. к “Must Know: как создать фавикон”

  1. Как создать иконку это я уже разобрался, спасибо, а как вы ее в вордперессе Установили, куда код нужно прописывать ? Или иконку можно залить в любое место сайта а потом в header-е сделать тег на нее?

  2. Наталья Ужакина:

    Максим, спасибо за вопрос.

    Совсем забыла уточнить, если файл с картинкой лежит не в корневом каталоге, то в header-е прописывается следующее:

    
     <link rel="icon" href="/" type="image/x-icon"> 
    <link rel="shortcut icon" href="/" type="image/x-icon">

  3. А мне муж все сам сделал и дизайн и фавикон :) ))

  4. У меня всей технической стороной блога занимается мой хороший знакомый. А вашему мужу — похвала — помогать с дочкой это тоже работа!

    • Техническая сторона у меня пока занимает самое большое количество времени. Пишу я где-то 10% от всего времени, которое могу уделить блогу. Хочется уже быстрее разобраться и заняться делом :-)

      А муж у меня действительно молодец! После работы находит силы поиграть с дочкой. Без его поддержки у меня ничего бы не получилось.

  5. Юлия:

    Мой словарный запас пополнился еще одним словом!

    Что самое интересное — я год просила, чтобы для нашего сайта сделали "Ну маленькую картиночку, которая будет появляться в поисковике на против нашейго названия... и т.д и т.п. " это так я объясняла ребятам, которые продвигали сайт — они меня так и не поняли О_о пока не показала.

    Я знала о существовании такой «картиночки», но не знала как она называется!

  6. Значит я не зря про фавикон написала :-)

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

  7. Юлия:

    Возможно. А может просто не хотели заморачиваться — тож студенты были, им, как оказалось, главное сиюминутная выгода, а не долговременное сотрудничество.

  8. Наталья, спасибо, что рассказали, что такое фавикон. Я такое слово слышу впервые. Теперь буду знать.

  9. Да, фавикон — нужная вещь для сайта! Раньше у меня был другой, а сейчас моя маленькая фотка. Мне нравится ! :)

  10. ура я тоже сделала себе фавикон :) . спасибо Наталья за подсказку.

  11. Больше спасибо, я после праздников обязательно себе сделаю на блог.

  12. Вот еще один вариант установки фавикона для вордпрессовских блогов. Вычитала на одном сайте:"Для того, чтобы установить favicon на свой сайт на движке WordPress, нужно favicon.ico положить в папку img темы сайта и в header.php написать:

    <link rel=”icon” href=”/img/favicon.ico” />

    <link rel=”shortcut icon” href=”/img/favicon.ico” />"

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


  13. Twitter:

    Мне тоже нужен Фавикон!!!

    Надо заняться его созданием.

  14. Мари:

    Наталья,спасибо !Теперь у моего сайта есть свой фавикон :)

  15. Спасибо за науку. ТОлько можете пояснить, как вставить иконку в корневую папку сайта?

    • Наталья Ужакина:

      Alfiya, через панель управления хостингом или через фтп. Обычно корневая папка называется public_html

Написать комментарий

XHTML: Вы можете использовать эти теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge
Локализовано: Русскоязычные темы для ВордПресс