Как сделать фавикон
Мы с Вами будем учиться делать фавикон, причем мы будем учиться делать фавикон и на блогах, и на одностраничных, и на многостраничных сайтах. Для начала — что такое фавикон? Фавикон — это маленькая картинка рядом с названием сайта, которая позволяет ему выделяться среди других сайтов, и иметь свое неповторимое лицо. Само слово 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="/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, например:
Естественно, что путь к файлу фавикона Вы укажете такой, где будет этот фавикон лежать. К примеру, предположим, что фавикон будет лежать в корневой папке блога . В этом случае и строчка будет выглядеть так:
<link rel="icon" href="/favicon.ico" />
Саму строчку в блоге Вы пишете в файле header.php, файл этот находится в папке темы блога. Можно поступить проще - заходите в Консоль блога — Дизайн — Редактор, находите шаблон «Шапка» (header.php), и в шаблоне после контейнера <title></title> ставите нужную строчку.
После этого Вам останется поставить файл favicon.ico в нужное место, и фавикон у Вас появится. Правда, Вы можете его сразу не увидеть, если у Вас блог кешируется, например, с помощью плагина WP Super Cache. Если Вы хотите увидеть фавикон сразу — отключите этот плагин, хотя бы на время.
Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.
Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
Подписаться на блог: Дорога к Бизнесу за Компьютером
Вам понравилась статья? Поделитесь, буду весьма признателен:
Также приглашаю добавиться в друзья в социальных сетях:
Все возможные варианты установки файвиконки указаны. Остаётся самое сложное — придумать собственный дизайн.
Вроде всё просто. Попробую сделать, хотя у меня стоит уже, но очень маленькая, не нравится.Спасибо.
Обязательно попробую установить, полезная вещь.
Описано все подробно и доходчиво.Спасибо!
Я уже себе установил хорошая вещь! Спасибо!!
Хорошая статья!
Спасибо за статью! Материал изложен доступно.
Это точно, самое сложное — придумать собственный дизайн. Хотя, можно же заказать у фрилансера.
Спасибо за подсказку! Интересно, если формат .gif принимается, может и анимированный .gif будет работать, не пробовали?
Классный фавикон Вы себе сделали! А у меня просто граватарчик!
Да уж, инструкция подробная и, главное, как установить без плагина. Но у меня все проще, тема позволяет просто указать путь к фавикону и он прописывается автоматически.
Все подробно и новичку понятно будет. Спасибо!
Уже стоит!
УРА!Наконец-то есть статья на эту тему!Спасибо огромное!Есть на что опереться теперь!
А почему моего фавикончинка в яндексе не видно? ((((
фавикон сайту нужен обязательно
Спасибо, нужная информация. Осталось разобраться.
Вы обладаете умением подать сложный материал доступно и понятно. Удачи.
Александр, большое спасибо за такой нужный урок! Очень все просто сделать и не надо устанавливать никакой плагин, уже сократили нагрузочку на блог и сделали свой сайт уникальным для узнавания :). Я правда не очень поняла все ли получилось? В верхних закладках свой фавикон (логотип это одно и тоже или это разные вещи?) вижу, а когда ищу через яндекс вижу просто ссылку на сайт, а по идее должна быть перед ссылкой картинка. Можете проверить?
Конгениально,Саша!!!Настолько элементарно все становится после твоей статьи, а то я все никак не могла приступить к установке фавикона на одностраничники,думала,что сложно...Ура, все получилось схода!Теперь на каждый буду ставить для прикола!Благодарю!!!
Чтобы не быть голословной, вот ссылкаmlm.alt-academy.ru/ Установила фавиконы на все одностраничники буквально за 5 минут!До этого только на блоге был установлен осенью прошлого года в самом начале пути,и тогда мне это показалось невероятно сложным!!!;)Еще раз благодарю!
Когда читал, было всё понятно.
Когда начал делать оказалось в коде моего блога нет указанных строчек.
Вставить строчки не трудно, но и путь в корневой папке у меня другой.
Нет у меня папки arthemia в themes. Там только такие папки:
Untitled
dot-b
twentyeleven
twentyten
wp_real_estate
zemlya
index.php
И во всех есть есть папки images. Куда вставлять файл favicon.ico -не понятно.
Если можно поясните
Начала читать Вашу статью и реально представила свой фавикон (подтолкнули на идею). Спасибо,теперь попробую внедрить
Мне этого пока не понять.
Александр, решила поставить на свой блог другой фавикон, время пришло! Все скрупулезнейшим образом сделала по инструкции, однако ничего не произошло! Остался старый фавикон. У меня тема Weaver, может, из-за этого сбой идет?Буду признательна, если найдете время ответить!
теперь все получилось,благодарю за помощь!!!
Я не жалею о том, что установил фавикон на свой сайт, теперь посетителей стало намного больше.
Александр, здравствуйте! Я смотрю, у вас изменилась форма комментария. А куда подевались слова «ответить»? Теперь по фавикону. Я уменьшила на генераторе свою фотографию 16×16, взяла код, вставила его между тегами. Но у меня ничего не изменилось, фавикон не появился. Я что-то не дописала? Помогите, пожалуйста, советом. Спасибо. Жду от вас помощи...уж очень хочу сделать фавикон!!!!!
Александр, спасибо, что ответили. Нет, конечно,а как это сделать? Вы же знаете, что коды -это больное место у меня... Извините за настойчивость. И ещё хочу у вас спросить, вы читали новую статью Александра Борисова «Дубли страниц?» Много шума наделала в инете.Так вот там он предлагает убрать в роботсе строчки, где есть знак вопроса, чтобы открыть доступ к просмотру статей, возможно я не так выразилась, но вы меня всё равно поняли, правда? Строчка эта такая:Disallov/*?* У меня она тоже есть. Я роботс брала у вас.И теперь я вижу, что вы тоже изменили форму комментария, значит, вы уже что-то поменяли в роботсе, чтобы исключить дубликат статей? Напишите мне, пожалуйста, что вы думаете по этому поводу. Спасибо.
Александр, я уже поставила фавикон, слава богу!!!Для этого я использовала плагин. По какой причине, вы, наверное, уже догадались. Но у меня теперь возник вопрос:вот теперь,когда фавикон уже стоит, я могу выключить плагин (деактивировать)? Фавикон мой не исчезнет? Напишите, пожалуйста, буду вам благодарна. И ещё одна просьба. Я хочу у вас попросить ваш роботс, чтобы его использовать у себя. Это не большая наглость с моей стороны? По старой дружбе — помогите бедному «родственнику». Это я готовлюсь к тому, чтобы удалить дубликаты страниц. Надеюсь на положительный результат. СПАСИБО!!!!!!!!!!!!!!!
Александр, вот теперь я совсем запуталась. У вас нет кнопки «ответить», куда она исчезла? Теперь ещё вопрос:если я возьму ваш роботс, мне не нужно удалять тот, который уже стоит? Или просто новый роботс залить на корневую папку, ничего не предпринимая?Помогите, подскажите!!!!!!!!Спасибо.Извините за «глупые» вопросы.
Оставьте свой комментарий и ответный визит Вам обеспечен
Выберите рубрику
Успех и личностный рост
Компьютерная Азбука
Бизнес в Интернете
Продвижение сайтов
Инвестиции
Бизнес на земле
Интересно
Подписка на pro444.ru
Что у нас
часто ищут
Бесплатные сервисы
Последние комментарии
Самое комментируемое
Последние статьи