Установка Favicon на сайт
Favicon - это небольшая картинка размером 16x16 (или 32x32) пикселя, которая находится в браузере слева от адресной строки. Почему-то не так много людей добавляют favicon на свои сайты. На мой взгляд, они многое теряют. Например, в Yandex отображаются иконки сайтов, и люди переходят по таким сайтам гораздо чаще, чем по тем, на которых нет favicon. Также, на мой взгляд, это немного повышает авторитетность сайта. В общем, в этой статье мы установим favicon на сайт.
Для начала как найти favicon. Во-первых, Вы можете создать самостоятельно. Очень хороший сервис favicon.cc. На нём Вы прямо в онлайне создадите себе favicon. Также Вы можете воспользоваться уже готовыми коллекциями и выбрать себе подходящий. Самый простой способ - это воспользоваться поиском и запросом: "коллекция favicon". Думаю, что уже первый сайт покажет Вам тысячи различных favicon, и Вам останется его только выбрать.
Теперь второй шаг - установка favicon на сайт. Для этого добавьте внутри тега <head> следующую строку:
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />Советую разместить favicon прямо в корень сайта. Если же Вы решили разместить его в другом месте, то, соответственно, измените значение атрибута "href".
После обновления страницы, Вы увидите Ваш favicon рядом с адресом Вашего сайта.
Иногда favicon появляется не сразу. Как правило, виновато кэширование браузера. Поэтому если картинка отсутствует, то попробуйте очистить кэш браузера (в настройках это должно быть). Также может помочь перезапуск браузера. Но ещё раз говорю: если Вы всё сделали правильно, то favicon на Вашем сайте появится.
Вот и всё, что хотелось рассказать об установке favicon на сайт.
Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html
-
Создано 05.12.2010 10:17:20
-
Михаил Русаков
Комментарии (25):
Здравствуйте еще раз. У меня не получается установить favicon. объясните пожалуйста синтаксис вот этого тега: (тег)link href="favicon.ico" rel="shortcut icon" type="image/x-icon" (тег закрыт) а именно почему тег закрывается вот так"/>"? Что это означает? почему его нельзя закрыть просто ">"? кэш браузера очищал.
Ответить
/> означает, что код написан в стандарте XHTML, а если у Вас стандарт HTML, то можно просто писать >. Стандарт задаётся в DOCTYPE. Но в любом случае, должно работать. Попробуйте посмотреть в другом браузере.
Ответить
Хочу поделиться плагином для Фотошопа для сохранения изображений в формате ico. http://narod.ru/disk/16359056001/ICOFormat.8bi.html Сохраняете плагин в папку Фотошопа ...Plug-Ins/File Formats Теперь при выборе Сохранить как... в списке появится и формат ico. И ещё - Интернет Експлорер будет отображать иконку в адресной строке только после добавления странички в избранное. Такой вот он капризный. (Может, в новых версиях это уже устранено, я точно не знаю)
Ответить
Что то у меня не получается установить favicon.Прописала на всех страницах сайта:<link href='http://mastericam.ru/favicon.ico' rel='shortcut icon' type='image/x-icon' /> Сама картинка находится в корне public_html Кэш очистила... Что я опять не то натворила(?
Ответить
Во-первых, убедитесь что эта строчка находится внутри тега <head>, а не внутри <body> или ещё где-нибудь. Во-вторых, посмотрите в других браузерах. Зачастую браузеры с большим трудом обновляют favicon.
Ответить
Эту строку (<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />) обязательно нужно ставить на каждую страницу сайта? Или достаточно разместить её на главной странице сайта?
Ответить
Её необходимо ставить на каждую страницу, где Вы хотите, чтобы отображался favicon.
Ответить
Сделала все, как вы сказали. Но Google при обновлении страницы ничего не показывает. Подскажите точнее, куда надо сохранять файл, я так понимаю название ему надо дать favicon.ico. Если создавать его на сайте favicon, он автоматически сохраняется в нужном формате или нет?
Ответить
Название значения не имеет. Надо чтобы картинка была формата ico и правильно указан путь к ней. Браузер должен эту картинку отобразить, если не отображает, попробуйте в другом браузере.
Ответить
Не поняла, если честно. В Explorer не отображает. Вот смотрите, создаю я на сайте favicon.сс эту картинку. Сохраняю на комп. Она автоматически сохраняет в формате ico? Или надо конвертировать? И куда, в какую папку в компе надо ее(картинку) размещать? Там где и находится наш html?
Ответить
Картинку надо класть рядом с index-файлом.
Ответить
Ну да, так они и лежат в одной папке. Открывает только в Firefox, в других браузерах нет. С чем еще может быть связана эта проблема?
Ответить
Если открывает в Firefox, то откроет и в других. Просто там остался хэш, очистите его и всё появится, хотя это необязательно. Все пользователи увидят эту иконку.
Ответить
Почему-то в Firefox не заменяется favicon на странице. Меняю на сервере, меняю ссылку - ничего. Необходимо перезапускать браузер. И то, не всегда работает. Иногда открывается давно удаленный favicon. Не понимаю...
Ответить
В других браузерах появляется? Если да, то не обращайте внимание, трудно удалить favicon из кэша.
Ответить
Здравствуйте.А верно ли то что, type="image/x-icon" устарело и им не пользуются? Ибо у меня favicon вставляется только тогда, когда использую type="image/vnd.microsoft.icon"
Ответить
У меня вставляется и через image/x-icon, и впервые слышу, чтобы это устарело.
Ответить
да вот столкнулась на этом сайте http://www.xiper.net/collect/html-and-css-tricks/different/howto-favicon.html с записью "В 2003 году ICO формат был зарегистрирован в IANA как MIME тип image/vnd.microsoft.icon. С тех пор тип image/x-icon является не корректным." Поэтому хотела уточнить)
Ответить
Хром категорически отказывается видеть favicon, а вот мазила в этом плане норм. так что раньше времени не паникуем и держим мазилу под боком
Ответить
Михаил, на другом сайте я нашел такой код favicon <link href="/favicon.ico" rel="icon" type="image/x-icon" /> <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" /> Какая разница между этим кодом и вашим?
Ответить
Никакой.
Ответить
У меня этот favicon появляется не слева от строки адреса а слева от названия вкладки. А интересно теперь смотреть код страниц, (любых других) когда хоть чуть чуть что то начинаешь понимать.
Ответить
У меня не работает это.Как сделать этот favicon. посмотрите http://faviconka.ru/favicon.php?n=faviconka_ru_566.png
Ответить
У меня иконка находится не слева от адресной строки,а во вкладке...Как сделать в адресной строке?
Ответить
может повлеять на то что фавиконка не ставиться от того что стоит windows10
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.