Favicon и его установка на сайт или блог.

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

Как сделать свой favicon?

Чтобы иконка правильно отображалась во всех браузерах, желательно использовать изображение размером 16x16 пикселей. Формат - ICO, PNG или GIF. Нарисовать нужную картинку можно в любом графическом редакторе, а чтобы получить формат ICO можно воспользоваться специальными программами, например: IcoFX, Aveicon, Axialis Icon Workshop и др. Если Вы используете Photoshop, можно воспользоваться плагином ICO Plugin, который позволяет сохранять изображение в формате ICO.

Favicon
Favicon в формате ICO так же можно сделать, воспользовавшись он-лайн сервисами, такими как www.favicon.cc и www.favicon.co.uk или любыми другими (Google в помощь).

Установка:

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

Личная практика показала, что лучше всего использовать сразу два изображения: PNG или GIF для большинства браузеров и ICO для Internet Explorer. Нужные файлы иконок помещаем в корневой каталог сайта, а в самом коде прописываем следующую конструкцию:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="icon" href="favicon.png" type="image/png"/>
Где 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"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="icon" href="favicon.png" type="image/png"/>
<meta name="keywords" content=" " />
<meta name="description" content=" " />
  </head>
    <body>
    </body>
</html>
Favicon и Wordpress.

Чтобы установить иконку блога в Wordpress можно пойти разными путями: первый описан выше, причем код нужно прописывать в файле header.php используемого в блоге шаблона.

Другой способ пригодится, если Вы любите менять шаблоны оформления блога, и хотите в каждом шаблоне использовать разный favicon. В таком случае файл иконки нужно поместить в папку темы, т.е. по пути /wp-content/themes/ваша_тема/ и в коде файла header.php поместить:
<link rel="shortcut icon" href="http://адрес_блога/ wp-content/themes/ваша_тема/ favicon.ico" type="image/x-icon">
Вообще, чтобы не прописывать такой длинный путь к иконке, можно воспользоваться PHP:
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" type="image/x-icon"/> 
В этом случае PHP-скрипт будет искать файл иконки в корневой папке шаблона вашего Wordpress блога.

Установка Favicon на Blogger.

Как известно, горячо мною любимый Blogger не даёт возможность загружать файлы в каталоги блога, так как же использовать свой favicon на blogspot?

Выход есть: можно использовать один из многочисленных фотохостингов (например, Radikal или Picasa), предварительно убедившись, что он поддерживает формат ICO, так как данный формат понимают не все хостинги изображений.
Загрузив иконки на фотохостинг и получив ссылки, идём в настройки блога на вкладку “дизайн”, выбираем пункт “Изменить HTML” после чего вписываем в открывшемся редакторе код:
<link href='Адрес_иконки_формата_ICO' rel='shortcut icon' type='image/x-icon'/>
<link href='Адрес_PNG_иконки' rel='icon' type='image/png'/>
Рекомендуется вставлять этот код непосредственно перед закрывающим тегом </head>. После чего нажимаем кнопку сохранить шаблон и радуемся результатом.

Общие советы.

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

В иконке должен узнаваться стиль Вашего сайта, желательно применять основные цвета своего Интернет-ресурса. Оптимальным решением будет отобразить в favicon логотип сайта или блога, если логотип имеет сложную конструкцию - было бы неплохо сделать его упрощённый вариант.

Если после установки иконки она не отображается, просто очистите кеш Вашего браузера и снова загрузите страницу.

Надеюсь, эта статья помогла Вам в улучшении внешнего вида Вашего Интернет-ресурса.

2 комментария:

Наталья Самолюк комментирует...

Хорошо написано, но для меня как новичка в этом деле не совсем понятно. Я достаточно много посетила блогов с подобным описанием. Мне не очень разбирающейся в HTML хотелось бы чтоб конкретно было указано куда. То есть, чтоб прям пальчиком ткнуть надо :). Там знаете ли много всего, что боюсь с лупой не определю куда правильно впихать этот код. Мой блог на blogger.

Arraks комментирует...

Наталья, в статье я подробно написал, код нужно вставлять непосредственно перед закрывающим тегом </head>. На вкладке "Шаблон" есть кнопка "Изменить HTML", на этой вкладке воспользуйтесь поиском по странице (есть в любом браузере, по умолчанию - комбинация клавиш Ctrl F).

К тому же, в блоггер недавно появилась возможность вставлять свой favicon на вкладке "Дизайн", там есть в самом верху пункт "Значок".

А вообще, HTML стоит выучить, хотя бы на начальном уровне (благо, курсов в тырнете хватает). Удачи!

Отправить комментарий