Favicon – это иконка, которая расположена возле адреса сайта в адресной строке браузера и возле названия страницы на панели вкладок. Так же эта иконка помогает быстрее выбрать нужный сайт в закладках. Следовательно – favicon важная составляющая во внешнем виде Вашего сайта и его визуальной идентификации пользователем. Как сделать свой favicon?
Чтобы иконка правильно отображалась во всех браузерах, желательно использовать изображение размером 16x16 пикселей. Формат - ICO, PNG или GIF. Нарисовать нужную картинку можно в любом графическом редакторе, а чтобы получить формат ICO можно воспользоваться специальными программами, например: IcoFX, Aveicon, Axialis Icon Workshop и др. Если Вы используете Photoshop, можно воспользоваться плагином ICO Plugin, который позволяет сохранять изображение в формате ICO.
Favicon в формате ICO так же можно сделать, воспользовавшись он-лайн сервисами, такими как www.favicon.cc и www.favicon.co.uk или любыми другими (Google в помощь).
Установка:
В большинстве случаев достаточно просто поместить файл иконки с названием favicon в корневую директорию сайта, но такой способ работает или не всегда, или не во всех браузерах.
Личная практика показала, что лучше всего использовать сразу два изображения: PNG или GIF для большинства браузеров и ICO для Internet Explorer. Нужные файлы иконок помещаем в корневой каталог сайта, а в самом коде прописываем следующую конструкцию:
Где favicon.ico и favicon.png – файлы Ваших иконок. Как вы уже догадались, первая строка предназначена для “ослика”, а вторая для всех остальных. Данный код размещается внутри тега <head>. Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Title </title>
<link href="style.css" rel="stylesheet" type="text/css"/>
Чтобы установить иконку блога в Wordpress можно пойти разными путями: первый описан выше, причем код нужно прописывать в файле header.php используемого в блоге шаблона.
Другой способ пригодится, если Вы любите менять шаблоны оформления блога, и хотите в каждом шаблоне использовать разный favicon. В таком случае файл иконки нужно поместить в папку темы, т.е. по пути /wp-content/themes/ваша_тема/ и в коде файла header.php поместить:
В этом случае PHP-скрипт будет искать файл иконки в корневой папке шаблона вашего Wordpress блога.
Установка Favicon на Blogger.
Как известно, горячо мною любимый Blogger не даёт возможность загружать файлы в каталоги блога, так как же использовать свой favicon на blogspot?
Выход есть: можно использовать один из многочисленных фотохостингов (например, Radikal или Picasa), предварительно убедившись, что он поддерживает формат ICO, так как данный формат понимают не все хостинги изображений.
Загрузив иконки на фотохостинг и получив ссылки, идём в настройки блога на вкладку “дизайн”, выбираем пункт “Изменить HTML” после чего вписываем в открывшемся редакторе код:
Рекомендуется вставлять этот код непосредственно перед закрывающим тегом </head>. После чего нажимаем кнопку сохранить шаблон и радуемся результатом.
Общие советы.
Не пытайтесь запихнуть в favicon как можно больше графических элементов: из-за маленького размера вы рискуете получить не иконку для сайта, а непонятное месиво пикселей.
В иконке должен узнаваться стиль Вашего сайта, желательно применять основные цвета своего Интернет-ресурса. Оптимальным решением будет отобразить в favicon логотип сайта или блога, если логотип имеет сложную конструкцию - было бы неплохо сделать его упрощённый вариант.
Если после установки иконки она не отображается, просто очистите кеш Вашего браузера и снова загрузите страницу.
Надеюсь, эта статья помогла Вам в улучшении внешнего вида Вашего Интернет-ресурса.
Хорошо написано, но для меня как новичка в этом деле не совсем понятно. Я достаточно много посетила блогов с подобным описанием. Мне не очень разбирающейся в HTML хотелось бы чтоб конкретно было указано куда. То есть, чтоб прям пальчиком ткнуть надо :). Там знаете ли много всего, что боюсь с лупой не определю куда правильно впихать этот код. Мой блог на blogger.
Наталья, в статье я подробно написал, код нужно вставлять непосредственно перед закрывающим тегом </head>. На вкладке "Шаблон" есть кнопка "Изменить HTML", на этой вкладке воспользуйтесь поиском по странице (есть в любом браузере, по умолчанию - комбинация клавиш Ctrl F).
К тому же, в блоггер недавно появилась возможность вставлять свой favicon на вкладке "Дизайн", там есть в самом верху пункт "Значок".
А вообще, HTML стоит выучить, хотя бы на начальном уровне (благо, курсов в тырнете хватает). Удачи!
2 комментария:
Хорошо написано, но для меня как новичка в этом деле не совсем понятно. Я достаточно много посетила блогов с подобным описанием. Мне не очень разбирающейся в HTML хотелось бы чтоб конкретно было указано куда. То есть, чтоб прям пальчиком ткнуть надо :). Там знаете ли много всего, что боюсь с лупой не определю куда правильно впихать этот код. Мой блог на blogger.
Наталья, в статье я подробно написал, код нужно вставлять непосредственно перед закрывающим тегом </head>. На вкладке "Шаблон" есть кнопка "Изменить HTML", на этой вкладке воспользуйтесь поиском по странице (есть в любом браузере, по умолчанию - комбинация клавиш Ctrl F).
К тому же, в блоггер недавно появилась возможность вставлять свой favicon на вкладке "Дизайн", там есть в самом верху пункт "Значок".
А вообще, HTML стоит выучить, хотя бы на начальном уровне (благо, курсов в тырнете хватает). Удачи!
Отправить комментарий