Главная » Бизнес в Интернете

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

фавикон для сайтаМы с Вами будем учиться делать фавикон, причем мы будем учиться делать фавикон и на блогах, и на одностраничных, и на многостраничных сайтах. Для начала — что такое фавикон? Фавикон — это маленькая картинка рядом с названием сайта, которая позволяет ему выделяться среди других сайтов, и иметь свое неповторимое лицо. Само слово favicon произошло от английского FAVorites ICON, что означает «любимая иконка». Иногда фавикон называют ласково — фавиконка.

Фавикон виден в заголовке, в закладках и в поисковой выдаче.

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

Сначала делаете саму картинку — фавикон. Как правило, в разных источниках рекомендуют размеры фавикона делать 16 на 16 пикселей. Я предпочитаю размеры побольше, скажем, 30 на 30, или 50 на 50, картинка получается красивей.

фавиконка

Словом, дело вкуса. Также пишут, что фавикон должен обязательно называться favicon.ico. Я лично пробовал другие названия, и другие расширения, такие как jpg и gif, и всегда фавиконка отображалась. Но лучше, наверное, все же использовать традиционное название.

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

Мы с Вами будем использовать проверенные дедовские методы, а именно Adobe Photoshop.

В Adobe Photoshop делаете картинку приемлемого качества, не забывая про то, что на самом деле она будет очень маленькая, и, например, буквы не будут видны, если они будут относительно картинки небольшие.

фавикон для сайта

После этого сделайте название картинки favicon.ico — просто возьмите и переименуйте, как обычно переименовываете файлы. Убедитесь, что у Вас расширение отображается, а то я видел, например, файлы favicon.ico.jpg.

Установка фавикона

Полдела сделано, теперь надо поставить фавикон на сайт. Для начала нужно определиться, зарезервировано ли в коде место под него. Правой клавишей мыши кликаете по сайту в браузере и смотрите html код страницы — ищете строку вот такого содержания:

<link rel="icon"
href="http://pro444.ru/wp-content/themes/arthemia/images/favicon.ico" />

Вы видите здесь после href адрес ссылки: это именно то место, где стоит, или должен стоять Ваш фавикон. Если эта строка есть — ставите Вашу фавиконку по нужному адресу.

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


В данном случае это значит, если у Вас хостинг Джино, что Вы заходите в папку domains, затем в папку домена pro444.ru, в папку wp-content, и дальше в папки themes, arthemia, images. В папку images и кладете Ваш фавикон favicon.ico. Такой сложный адрес характерен для блогов на WordPress, для страниц адрес будет попроще.

Другое дело, если такой строчки нигде нет. Тогда ее нужно сделать. В одностраничнике или простом  html сайте такую строчку ставите между тегами <head></head>. Можете указать вместо абсолютного пути относительный, без доменного имени и http. Следующий адрес означает, что фавиконка будет находиться в той же папке, что и файл с кодом страницы.

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

Естественно, эта строка не должна быть внутри других тэгов и вложенных в head контейнеров. Чтобы не ошибиться, ставьте ее сразу после закрывающего тэга title, например:

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

Естественно, что путь к файлу фавикона Вы укажете такой, где будет этот фавикон лежать. К примеру, предположим, что фавикон будет лежать в корневой папке блога http://pro444.ru. В этом случае и строчка будет выглядеть так:

<link rel="icon" href="http://pro444.ru/favicon.ico" />

Саму строчку в блоге Вы пишете в файле header.php, файл этот находится в папке темы блога. Можно поступить проще  - заходите в Консоль блога — Дизайн — Редактор, находите шаблон «Шапка» (header.php), и в шаблоне после контейнера <title></title> ставите нужную строчку.

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

После этого Вам останется поставить файл favicon.ico в нужное место, и фавикон у Вас появится. Правда, Вы можете его сразу не увидеть, если у Вас блог кешируется, например, с помощью плагина WP Super Cache. Если Вы хотите увидеть фавикон сразу — отключите этот плагин, хотя бы на время.


Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
    Подписаться на блог: Дорога к Бизнесу за Компьютером

Вам понравилась статья? Поделитесь, буду весьма признателен:


Также приглашаю добавиться в друзья в социальных сетях:

<< Предыдущая статья Следующая статья >>
Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:  

36 комментариев »

  • Татьяна Мильчевская пишет:

    Все возможные варианты установки файвиконки указаны. Остаётся самое сложное — придумать собственный дизайн.

  • Лилия пишет:

    Вроде всё просто. Попробую сделать, хотя у меня стоит уже, но очень маленькая, не нравится.Спасибо.

  • Виктория пишет:

    Обязательно попробую установить, полезная вещь.

  • Зули пишет:

    Описано все подробно и доходчиво.Спасибо!

  • Анатолий пишет:

    Я уже себе установил хорошая вещь! Спасибо!!

  • Андрей пишет:

    Хорошая статья!

  • Юлия пишет:

    Спасибо за статью! Материал изложен доступно.

  • Татьяна пишет:

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

  • Вячеслав пишет:

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

  • Александр Ризун (автор) пишет:

    Пробовал и анимированый — не работает, делается статичным. По поводу дизайна — изучите фотошоп, на самом деле это несложно, и придумаете себе дизайн, какой захотите!

  • Марина пишет:

    Классный фавикон Вы себе сделали! А у меня просто граватарчик!

  • Олег пишет:

    Да уж, инструкция подробная и, главное, как установить без плагина. Но у меня все проще, тема позволяет просто указать путь к фавикону и он прописывается автоматически.

  • Элла пишет:

    Все подробно и новичку понятно будет. Спасибо!

  • Татьяна пишет:

    Уже стоит! :)

  • Марина Гай пишет:

    УРА!Наконец-то есть статья на эту тему!Спасибо огромное!Есть на что опереться теперь!

  • Татьяна пишет:

    А почему моего фавикончинка в яндексе не видно? ((((

  • Ярослав пишет:

    фавикон сайту нужен обязательно

  • Марина пишет:

    Спасибо, нужная информация. Осталось разобраться.

  • Lady пишет:

    Вы обладаете умением подать сложный материал доступно и понятно. Удачи.

  • Наталья пишет:

    Александр, большое спасибо за такой нужный урок! Очень все просто сделать и не надо устанавливать никакой плагин, уже сократили нагрузочку на блог и сделали свой сайт уникальным для узнавания :). Я правда не очень поняла все ли получилось? В верхних закладках свой фавикон (логотип это одно и тоже или это разные вещи?) вижу, а когда ищу через яндекс вижу просто ссылку на сайт, а по идее должна быть перед ссылкой картинка. Можете проверить?

  • Марина Гай пишет:

    Конгениально,Саша!!!Настолько элементарно все становится после твоей статьи, а то я все никак не могла приступить к установке фавикона на одностраничники,думала,что сложно...Ура, все получилось схода!Теперь на каждый буду ставить для прикола!Благодарю!!!

  • Марина Гай пишет:

    Чтобы не быть голословной, вот ссылка mlm.alt-academy.ru/ Установила фавиконы на все одностраничники буквально за 5 минут!До этого только на блоге был установлен осенью прошлого года в самом начале пути,и тогда мне это показалось невероятно сложным!!!;)Еще раз благодарю!

  • Валерий пишет:

    Когда читал, было всё понятно.

    Когда начал делать оказалось в коде моего блога нет указанных строчек.

    Вставить строчки не трудно, но и путь в корневой папке у меня другой.

    Нет у меня папки arthemia в themes. Там только такие папки:

    Untitled

    dot-b

    twentyeleven

    twentyten

    wp_real_estate

    zemlya

    index.php

    И во всех есть есть папки images. Куда вставлять файл favicon.ico -не понятно.

    Если можно поясните

  • Александр Ризун (автор) пишет:

    Валерий, неважно, куда Вы вставите картинку, главное, правильно прописать путь к ней. В themes у Вас, скорее всего, не будет папки arthemia, потому что это моя тема так называется, у Вас, скорее всего другая тема. Похоже, у Вас тема wp_real_estate — вот туда и вставляйте.

  • Tina пишет:

    Начала читать Вашу статью и реально представила свой фавикон (подтолкнули на идею). Спасибо,теперь попробую внедрить

  • Антонина пишет:

    Мне этого пока не понять.

  • Марина Гай пишет:

    Александр, решила поставить на свой блог другой фавикон, время пришло! Все скрупулезнейшим образом сделала по инструкции, однако ничего не произошло! Остался старый фавикон. У меня тема Weaver, может, из-за этого сбой идет?Буду признательна, если найдете время ответить!

  • Марина Гай пишет:

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

  • Юрий Бараковский пишет:

    Я не жалею о том, что установил фавикон на свой сайт, теперь посетителей стало намного больше.

  • Anna пишет:

    Александр, здравствуйте! Я смотрю, у вас изменилась форма комментария. А куда подевались слова «ответить»? Теперь по фавикону. Я уменьшила на генераторе свою фотографию 16×16, взяла код, вставила его между тегами. Но у меня ничего не изменилось, фавикон не появился. Я что-то не дописала? Помогите, пожалуйста, советом. Спасибо. Жду от вас помощи...уж очень хочу сделать фавикон!!!!!

  • Александр Ризун (автор) пишет:

    Анна, здравствуйте! А Вы картинку на хостинг закачали по нужному адресу?

  • Anna пишет:

    Александр, спасибо, что ответили. Нет, конечно,а как это сделать? Вы же знаете, что коды -это больное место у меня... Извините за настойчивость. И ещё хочу у вас спросить, вы читали новую статью Александра Борисова «Дубли страниц?» Много шума наделала в инете.Так вот там он предлагает убрать в роботсе строчки, где есть знак вопроса, чтобы открыть доступ к просмотру статей, возможно я не так выразилась, но вы меня всё равно поняли, правда? Строчка эта такая:Disallov/*?* У меня она тоже есть. Я роботс брала у вас.И теперь я вижу, что вы тоже изменили форму комментария, значит, вы уже что-то поменяли в роботсе, чтобы исключить дубликат статей? Напишите мне, пожалуйста, что вы думаете по этому поводу. Спасибо.

  • Anna пишет:

    Александр, я уже поставила фавикон, слава богу!!!Для этого я использовала плагин. По какой причине, вы, наверное, уже догадались. Но у меня теперь возник вопрос:вот теперь,когда фавикон уже стоит, я могу выключить плагин (деактивировать)? Фавикон мой не исчезнет? Напишите, пожалуйста, буду вам благодарна. И ещё одна просьба. Я хочу у вас попросить ваш роботс, чтобы его использовать у себя. Это не большая наглость с моей стороны? По старой дружбе — помогите бедному «родственнику». Это я готовлюсь к тому, чтобы удалить дубликаты страниц. Надеюсь на положительный результат. СПАСИБО!!!!!!!!!!!!!!!

  • Александр Ризун (автор) пишет:

    Я не убирал знак вопроса в роботе, и форму комментариев не изменял. По поводу фавикона — выключьте плагин, и посмотрите, будет ли фавикон отображаться. Робокс мой смотрите по ссылке: pro444.ru/robots.txt

  • Anna пишет:

    Александр, вот теперь я совсем запуталась. У вас нет кнопки «ответить», куда она исчезла? Теперь ещё вопрос:если я возьму ваш роботс, мне не нужно удалять тот, который уже стоит? Или просто новый роботс залить на корневую папку, ничего не предпринимая?Помогите, подскажите!!!!!!!!Спасибо.Извините за «глупые» вопросы.

  • Александр Ризун (автор) пишет:

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

Оставьте свой комментарий и ответный визит Вам обеспечен