això és un favicon

Què és un Favicon i per a què serveix

Cada vegada que realitzo una conferència o un curs, terra mirar-me les pàgines web dels assistents. Per això, l'organització de l'esdeveniment m'envia un llistat amb els URL i les vaig obrint en un mateix navegador però en diferents pestanyes. Per desgràcia, quan tinc les pàgines obertes i puc veure els icones fav de tot el món, observo que una bona part d'ells són els faviconos dels CMS utilitzats per construir les seves pàgines web (normalment el de Joomla o el de WordPress), no un favicon corporatiu, que és el que hauria de ser.

Així que aquí va aquest breu article explicant què és un favicon i per a què serveix, a veure si d'aquesta manera, si que la gent li atorgui la importància que es mereix.

Què és un favicon

És una petita icona (normalment de 16 × 16 píxels o de 32 × 32 px) que s'utilitza per identificar un lloc web a les pestanyes d'un navegador, en un llistat de favorits, o en qualsevol altra part que requereixi una identificació petita.

En aquest bloc que estàs llegint, el favicon és una "MP" amb fons fúcsia que pots veure al costat de l'URL oa la pestanya de la pàgina teu navegador.

Per a què serveix un favicon

És un símbol que transmet imatge corporativa, així que serveix per a:

  • Transmetre la nostra imatge de marca quan algú navega per la nostra pàgina web i fixa la seva mirada a la zona de la URL del navegador.
  • Perquè la nostra pàgina sigui fàcilment identificable quan algú té obertes diverses pestanyes al seu navegador.
  • Perquè la nostra pàgina sigui fàcilment identificable quan algú la guarda en els seus favorits.

això és un favicon

Com podem crear un favicon per a la nostra pàgina web

Hi ha molts programes que t'ajudaran a crear-lo. Aquest és el que jo faig servir per crear-los: creador de les favicones.

El meu consell és que creus la teva favicon en 32 × 32 píxels i que sigui semblant al teu logo. pots crear faviconos a partir d'imatges ... potser això pot ser-te d'ajuda, però píxel a píxel també és fàcil de crear. Un altre consell: abans de fer el teu favicon mira faviconos d'altres empreses en Google Imatges, Això pot ajudar-te a inspirar-te per el teu i a assegurar-te que sense voler, no utilitzis algun favicon que ja ha estat creat per algú més.

Quan ja ho tinguis creat, has de guardar utilitzant el nom favicon.ico i pujar-lo per FTP al directori arrel de la teva pàgina web. Alguns gestors de contingut com WordPress disposen d'una secció en el panell d'administració perquè indiquis l'URL exacte del favicon... Tot i que funciona igualment si allà no indiques res però disposes d'favicon en el teu directori arrel. També algunes plantilles de WordPress porten ja una zona en la qual indiques la URL de la imatge de la teva favicon i ja està.

Perquè el teu favicon es vegi el més aviat possible, pots donar a conèixer la seva existència a través del codi font de la pàgina web, utilitzant en els metatags la següent línia de codi:

<Link type = "image / x-icon" href = "favicon.ico" rel = "icona d'accés directe" />

Encara que de nou, si no utilitzes la línia de codi, el navegador ho veurà per si sol en algun moment. A Firefox i Chrome es veu gairebé al moment, en Explorer triga una mica més.

Això és tot.
Que vagi tot bé ... (i quan tinguis un moment, assegura't que la teva pàgina web disposa del seu propi favicon ;-)

ens parlem

Resum
Què és un favicon i per a què serveix
Nom de l'article
Què és un favicon i per a què serveix
descripció
Un favicon és una petita icona (normalment de 16x16 píxels o de 32x32 px) que s'utilitza per identificar un lloc web a les pestanyes d'un navegador, en un llistat de favorits, o en qualsevol altra part que requereixi una identificació petita.
autor
Nom de publicació
3isic.com
editorial Logo
19 respostes
  1. Carmen
    Carmen diu:

    Hola Montse que tal! Existeix un connector de photoshop que et deixa guardar-les en format ico, també pots fer alguna cosa en moviment amb un gif amb el teu favicon i guardar-.gif, un exemple d'aquesta web que la tinc en construcció és aquest http://colourlaboratory.com

    Salutacions !!

    Carmen

    :-)

  2. Montse
    Montse diu:

    Moltes gràcies Carme!
    (Escolta, el link a colour Laboratory em dóna error 500, imagino que és perquè estàs treballant-hi ... me la miraré d'aquí a una estona) -> Ja ho he arreglat (pillava el parèntesi, així que l'he tret de la teva enllaç) ara sí funciona.

    He vist el favicon en gif animat que has utilitzat. M'agrada! :-)

    Una forta abraçada.
    M.

  3. Montse
    Montse diu:

    Gràcies Jordi, saber això pot ser d'utilitat a molta gent. En el cas de Joomla, a més, el logo és ben conegut !!! així que quan obres una pàgina realitzada utilitzant aquest CMS de seguida veus el favicon de Joomla. No entenc com alguns desenvolupadors web no ho tenen en compte i són capaços de lliurar la web a un client sense haver personalitzat aquesta icona :-(

  4. Miguel
    Miguel diu:

    Si us plau em podries fer un favicon amb les lletres LO de color verd i el fons de color negre, t'ho agrairia ja tinc col·locat un però no em convenç, si ets tan amable de-m'ho si us plau Envia-me'l al meu correu el qual et adjunt, moltes gràcies per endavant, espero la teva resposta moltes gràcies.

  5. Montse
    Montse diu:

    Jajajajaja, estàs de broma Miguel !!!
    Fer un favicon és molt fàcil ... així que fes-ho tu mateix, per favor. Crea una imatge de 32 × 32 píxels i guarda-la amb el nom de "favicon", i l'extensió ".ico" ... més fàcil impossible.

  6. Pau Urani
    Pau Urani diu:

    Hola, Montse, molt interesabte aquest post. He seguit el teu consell, i em funciona amb Firefox, però no amb Explorer.

    Em pots dir on he de copiar i enganxar aquesta línia de codi?

    Gràcies!

    Pau Urani

  7. Montse
    Montse diu:

    Pau en Explorer triga unes hores a mostrar-se.
    Com fa dies que vas publicar aquest comentari és possible que ara ja ho tinguis resolt. Si no és així, Avísame si us plau ....
    Una abraçada.

  8. Xavi
    Xavi diu:

    Hola Montse,
    ens vam coneixer al curs d’Igualada.
    És molt interesant el que expliques i ja em tens enganxat, però aquest cop no me n’he sortit. El favicon se’m veu bé amb Chrome, però no amb explorer.
    En canvi la teva web es veu la M a tot arreu.
    He posat la linea al codi font, ja fa dies! i encara no es veu.
    El web: http://www.dyneke.com
    el favicon existeix: http://www.dyneke.com/favicon.ico
    la linea que he creat al codi font està lleuregament modificada de la teva proposta perue em donava error, he canviat el tipus de cometes y he suprimit l’espai abans de la / final:

    Em pots ajudar? Moltes gràcies Montse, t’envio una abraçada!
    Xavi

  9. Montse
    Montse diu:

    Xavi, amb Internet Explorer a vegades triga una mica a aparèixer el favicon (hores normalment). Et passarà el mateix quan el canviis: veuràs el nou favicon amb Chrome i Firefox al moment, però l’Explorer encara mostrarà l’antic durant una bona estona.

    Espera 24 hores i veuràs com ja ho veus.
    Una abraçada.

  10. Jordi Oliver
    Jordi Oliver diu:

    Hola

    Veig que el tema Favicon porta cua…
    Xavi, si tens problemes amb el IE prova d’esborrar l’historial i les cookies, i després reinicies el navegador; normalment funciona.

    Salutacions.

  11. Franklin
    Franklin diu:

    Hola Montse,

    Unes consultes:
    hi ha algun problema si crec el favicon en photoshop?
    Perquè sempre ha de portar com a nom favicon ja que desitjo posar-li el nom del domini?

    gràcies,
    01:00 Salutació!

  12. La Montserrat
    La Montserrat diu:

    Franklin, no hi ha cap problema. Perquè el navegador ho detecti automàticament si ha de cridar-favicon.ico, però si utilitzes un WordPress teva plantilla serà capaç de indicar-li al navegador que utilitzeu un altre fitxer amb el nom que tu vulguis.

  13. juliol Suarez
    juliol Suarez diu:

    Moltes gràcies tenia dubtes que era un favicon que vaig veure en un programa d'aprenentatge i volia saber perquè em serveix, molt bé ja fins creu un. Gràcies.

Deixa una resposta

Vols unir-te a la conversa?
No dubtis a contribuir!

Deixa un comentari

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *