G|Translate: English EN Français FR Deutsch DE Italiano IT Русский RU Español ES

Файл favicon.ico

Фавикон – это маленькая иконка рядом с названием сайта (точнее title страницы) в браузере.

Вот, например, сайт www.comphome.ru про домашний компьютер. Мы видим картинку с загадочным треугольником.

Файл favicon.ico

Как она туда попала? Это такой специальный файл favicon.ico для хранения иконки сайта. Он же фавикон.

Что бы браузер ее показал, необходимо:

1. Формат файла ICO/png/gif

да, именно так – там может быть и анимированная картинка в формате gif

2. Картинка должна быть физически на сайте:

2.1 Расположение в корне сайта (в 90% случаев это понимают браузеры и поисковые машины для файла favicon.ico)
Например вот так – в корне сайта.

Файл favicon.ico

Ничего дополнительно указывать не надо – и так все браузеры “знают”, что файл фавикона (именно с расширением .ico) нужно в первую очередь искать в корневой директории.

2.2 Явное указание расположения файла фавикона (или не корневая директория или не ICO)

Например, Вы расположили фавикон в папке image

Файл favicon.ico

Тогда внутри тэгов head указываем

– для ico

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

– для png/gif

<link rel=“shortcut icon” href=“/images/favicon.png” type=“image/png”>
<link rel=“shortcut icon” href=“/images/favicon.gif” type=“image/gif”>

Важно:
никакого закрывающего слеша в конце не должно быть.
Вот так неправильно (но работать будет)
<link rel=“shortcut icon” href=“/images/favicon.ico” type=“image/x-icon”/>

Сноска.

HTML тег <link……….> определяет отношение между текущим html-документом и внешним ресурсом, на который он ссылается. Он является пустым элементом (не имеет закрывающего тега) и всегда должен располагаться внутри элемента <head>.
Атрибут href определяет адрес документа, который может быть как абсолютным так и относительным.
Атрибут rel указывает связь между HTML файлом и тем, на что Вы ссылаетесь
Атрибут type сообщает браузеру MIME тип документа.

Атрибут rel favicon’а это продукт эволюции. В IE5 нужно было обязательно указывать shortcut icon для установления соответствия между страницей и ее иконкой, но потом спецификации HTML определили, что атрибуты указанные через пробел являются 2 атрибутами — shortcut и icon. Затем, в 2010, спецификации HTML5 определили, что необходимо декларировать только идентификатор icon. Получилось, что теперь, во всех браузерах кроме IE, можно не указывать shortcut.

Итого
– лучше указывать вариант “shortcut icon” для обычного фавикона
– для анимированного фавикона придется сделать две записи и два файла соответственно (т.к. не все браузеры могут отображать)

<link rel=“shortcut icon” href=“/images/favicon.ico” type=“image/x-icon”> – для всех браузеров
<link rel=“icon”              href=“/images/favicon.gif” type=“image/gif”> – для тех браузеров, которые могут :)

2.3 Указание фавикона через настройки темы в CMS

Конечно, браузеры немного по разному видят эту иконку (с ico, phg, gif обычный = работают все браузеры)

БраузерICOPNGGIFАнимированный GIFJPEGAPNGSVG
Google ChromeДа4.04.0Нет4.0НетНет
Internet Explorer5.011.011.0НетНетНетНет
Firefox1.01.01.0ДаДа3.0Нет
Opera7.07.07.07.07.09.59.6
SafariДа4.04.0Нет4.0НетНет

Необходимо нарисовать изображение размером 16х16 пикселов и сохранить его в формате ICO в корне сайта под именем favicon.ico.

Можно указать несколько изображений в разных форматах — например, строку с rel=”shortcut icon” и значком в формате ICO для Internet Explorer, и строку с rel=”icon” и значком в формате GIF или PNG для остальных браузеров.

Базовый размер фавикона – 16х16 пиксель.
Но формат ico поддерживает хранение нескольких изображений. Зачем?
Что бы можно было сохранять ссылку на сайт себе на компьютер!

Если делать совсем правильно – в файле ico должно храниться 3 картинки:

формат 16х16 – для отображения иконки в браузере
формат 32*32 – для сохранения ссылки на сайт в панели задач
формат 48*48 – для сохранения ссылки на сайт на рабочем столе

Вот более подробно http://habrahabr.ru/post/260777/
Adobe Photoshop не понимает формат ICO и не сохраняет в нем рисунки, так что для этой цели требуется дополнительный плагин.

Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats. По умолчанию программа Photoshop CS под Windows устанавливается в папке c:\Program Files\Adobe\Photoshop CS. Тогда полный путь для файла плагина будет c:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats.

Размещение плагина для сохранения файлов в формате ICO

Размещение плагина для сохранения файлов в формате ICO

После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon».

Тип файла для сохранения иконки

Тип файла для сохранения иконки

Остается сделать желаемую иконку 16х16 пикселов и сохранить ее под именем favicon.ico в корне сайта.


Вы можете сохранить ссылку на эту страницу себе на компьютер в виде htm файла



Вы будете видеть наш сайт у себя в ленте


Нажмите "Подписаться"


Нажмите "Нравится" или напишите сообщение



Почитать в разделе: ЗАЧЕМ НУЖЕН САЙТ?

  • Всего статей в разделе: 5
  • Показано статей в списке: 4
  • Сортировка: название по алфавиту

Выбор хостинга

Хостинг - это такое место, где живет Ваш сайт (точнее, все Ваши файлы, из которых собран сайт). Хостинг бывает платным и бесплатным. Бесплатное место под сайт - это хорошо, но есть некоторые проблемы: - на бесплатном хостинге могут начать некоторую перестройку и Ваш сайт на время станет недоступным - на Вашем сайте будет размещаться чужая реклама (бесплатному для Вас хостингу надо на что-то жить) - длинное и неудобное имя для Вашего сайта (например www.имя.narod.ru) - почтовый ящик для Вашей почты тоже будет немного не Вашим Частично проблему с именами можно решить, зарегистрировав в RU-центр имя для Вашего сайта вместе с переадресацией: - при...
(Читать полностью...)

Как создать домен 3-го уровня

Что такое домен третьего уровня? Домен первого уровня .ru -  национальный домен верхнего уровня для России. Домен второго уровня seotable.ru - открывается наш сайт Домен третьего уровня subdomen.seotable.ru - открывается мини-сайт (из одной строки "Hello, World") на PHP Домен третьего уровня может быть использован для нескольких целей 1. как алиас основного сайта, делаются настройки у регистратора и наш сайт будет открываться по двум адресам 2. как часть для размещения важного раздела основного сайта Создаем домен 3-го уровня через редактирование DNS Что бы сайт в домене 3-го уровня отзывался на subdomen.seotable.ru -...
(Читать полностью...)

Основные метатэги

Метатеги (англ. meta tags) — теги, предназначенные для предоставления структурированных метаданных о веб-странице. Как правило, указываются в заголовке, внутри структуры <head> </head> Элемент meta принимает как минимум четыре атрибута: content, http-equiv, name и scheme. Из них обязателен только атрибут content и исключение тег revisit. Метатеги разделены на нескольких основных групп. Основные — NAME и HTTP-EQUIV. Группа NAME отвечает за текстовую информацию о странице, её авторе, а также — рекомендации для поисковых систем. HTTP-EQUIV фактически эквивалентны гипертекстовым заголовкам, формируют заголовок страницы и определяют его обработку. Как правило, они...
(Читать полностью...)

Сервер доменных имен DNS

DNS – что это за «зверь» такой? DNS – это Domain Name Server, т.е сервер доменных имен. На этом сервере лежат служебные записи, в которых указано: - на каком сервере лежат файлы сайта (хостинг) - какой используется почтовый сервер - другие полезные настройки для работы сайта В целом обеспечение технической работы сайта состоит из 4-х частей: 1. Регистратор доменного имени, т.е. та организация, которая выделяет Вам доменное имя = имя.ru У регистратора же (в данном случае nic.ru) указывается, где находится таблица DNS Указано, что таблица DNS находится на серверах Мастерхоста. В данном случае говорится «домен делегирован на Мастерхост». Видно, что Еще DNS бывают...
(Читать полностью...)