<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

Весь курс соткан из практических примеров реальной вёрстки. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены!

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Установка Favicon на сайт

Установка 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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (25):

Гость Гость 19.02.2011 14:42:33

Здравствуйте еще раз. У меня не получается установить favicon. объясните пожалуйста синтаксис вот этого тега: (тег)link href="favicon.ico" rel="shortcut icon" type="image/x-icon" (тег закрыт) а именно почему тег закрывается вот так"/>"? Что это означает? почему его нельзя закрыть просто ">"? кэш браузера очищал.

Ответить

Admin Admin 19.02.2011 14:46:07

/> означает, что код написан в стандарте XHTML, а если у Вас стандарт HTML, то можно просто писать >. Стандарт задаётся в DOCTYPE. Но в любом случае, должно работать. Попробуйте посмотреть в другом браузере.

Ответить

Natalymath Natalymath 18.06.2011 12:03:20

Хочу поделиться плагином для Фотошопа для сохранения изображений в формате ico. http://narod.ru/disk/16359056001/ICOFormat.8bi.html Сохраняете плагин в папку Фотошопа ...Plug-Ins/File Formats Теперь при выборе Сохранить как... в списке появится и формат ico. И ещё - Интернет Експлорер будет отображать иконку в адресной строке только после добавления странички в избранное. Такой вот он капризный. (Может, в новых версиях это уже устранено, я точно не знаю)

Ответить

sergeevna sergeevna 06.07.2011 10:40:16

Что то у меня не получается установить favicon.Прописала на всех страницах сайта:<link href='http://mastericam.ru/favicon.ico' rel='shortcut icon' type='image/x-icon' /> Сама картинка находится в корне public_html Кэш очистила... Что я опять не то натворила(?

Ответить

Admin Admin 06.07.2011 12:31:37

Во-первых, убедитесь что эта строчка находится внутри тега <head>, а не внутри <body> или ещё где-нибудь. Во-вторых, посмотрите в других браузерах. Зачастую браузеры с большим трудом обновляют favicon.

Ответить

Adrenalin Adrenalin 16.11.2011 19:22:56

Эту строку (<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />) обязательно нужно ставить на каждую страницу сайта? Или достаточно разместить её на главной странице сайта?

Ответить

Admin Admin 16.11.2011 19:37:20

Её необходимо ставить на каждую страницу, где Вы хотите, чтобы отображался favicon.

Ответить

Jill Jill 02.04.2012 12:03:23

Сделала все, как вы сказали. Но Google при обновлении страницы ничего не показывает. Подскажите точнее, куда надо сохранять файл, я так понимаю название ему надо дать favicon.ico. Если создавать его на сайте favicon, он автоматически сохраняется в нужном формате или нет?

Ответить

Admin Admin 02.04.2012 13:10:28

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

Ответить

Jill Jill 02.04.2012 15:44:50

Не поняла, если честно. В Explorer не отображает. Вот смотрите, создаю я на сайте favicon.сс эту картинку. Сохраняю на комп. Она автоматически сохраняет в формате ico? Или надо конвертировать? И куда, в какую папку в компе надо ее(картинку) размещать? Там где и находится наш html?

Ответить

Admin Admin 02.04.2012 17:01:45

Картинку надо класть рядом с index-файлом.

Ответить

Jill Jill 02.04.2012 19:00:52

Ну да, так они и лежат в одной папке. Открывает только в Firefox, в других браузерах нет. С чем еще может быть связана эта проблема?

Ответить

Admin Admin 02.04.2012 19:43:20

Если открывает в Firefox, то откроет и в других. Просто там остался хэш, очистите его и всё появится, хотя это необязательно. Все пользователи увидят эту иконку.

Ответить

Spartak_Belarus Spartak_Belarus 14.02.2013 15:02:07

Почему-то в Firefox не заменяется favicon на странице. Меняю на сервере, меняю ссылку - ничего. Необходимо перезапускать браузер. И то, не всегда работает. Иногда открывается давно удаленный favicon. Не понимаю...

Ответить

Admin Admin 14.02.2013 21:02:24

В других браузерах появляется? Если да, то не обращайте внимание, трудно удалить favicon из кэша.

Ответить

roza3 roza3 10.03.2013 18:56:50

Здравствуйте.А верно ли то что, type="image/x-icon" устарело и им не пользуются? Ибо у меня favicon вставляется только тогда, когда использую type="image/vnd.microsoft.icon"

Ответить

Admin Admin 10.03.2013 20:58:17

У меня вставляется и через image/x-icon, и впервые слышу, чтобы это устарело.

Ответить

roza3 roza3 10.03.2013 22:39:49

да вот столкнулась на этом сайте http://www.xiper.net/collect/html-and-css-tricks/different/howto-favicon.html с записью "В 2003 году ICO формат был зарегистрирован в IANA как MIME тип image/vnd.microsoft.icon. С тех пор тип image/x-icon является не корректным." Поэтому хотела уточнить)

Ответить

JloruH JloruH 14.04.2013 16:32:07

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

Ответить

AlexMetal01 AlexMetal01 22.04.2013 15:27:42

Михаил, на другом сайте я нашел такой код favicon <link href="/favicon.ico" rel="icon" type="image/x-icon" /> <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" /> Какая разница между этим кодом и вашим?

Ответить

Admin Admin 22.04.2013 18:58:10

Никакой.

Ответить

mmgfs mmgfs 10.04.2014 20:14:24

У меня этот favicon появляется не слева от строки адреса а слева от названия вкладки. А интересно теперь смотреть код страниц, (любых других) когда хоть чуть чуть что то начинаешь понимать.

Ответить

andrei178 andrei178 07.07.2014 15:15:02

У меня не работает это.Как сделать этот favicon. посмотрите http://faviconka.ru/favicon.php?n=faviconka_ru_566.png

Ответить

Kostyaev Kostyaev 02.06.2015 13:33:06

У меня иконка находится не слева от адресной строки,а во вкладке...Как сделать в адресной строке?

Ответить

demidoff demidoff 09.02.2016 19:30:29

может повлеять на то что фавиконка не ставиться от того что стоит windows10

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.